Bootstrap - 按钮组：初学者指南

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap按钮组的奇妙世界。作为你友好的邻里电脑老师，我很兴奋能引导你走过这段旅程。如果你之前从未编写过一行代码，也不用担心——我们将从基础开始，逐步深入学习。让我们开始吧！

按钮组是什么？

在我们跳入代码之前，先来了解一下按钮组是什么。想象你正在为一个电视遥控器创建按钮。如果你把所有按钮都散布在各处，而不是把相似功能的按钮分组在一起，那会怎么样？这正是我们在网页设计中使用按钮组的方式！

Bootstrap中的按钮组允许我们将相关的按钮聚集在一起，创建一个更有组织性和视觉吸引力的界面。这就好比给你的按钮们一个温馨的小家，让它们和谐共处。

基本示例

让我们从一个简单的示例开始，以便入门：

<div class="btn-group" role="group" aria-label="基本示例">
<button type="button" class="btn btn-primary">左</button>
<button type="button" class="btn btn-primary">中</button>
<button type="button" class="btn btn-primary">右</button>
</div>

这段代码创建了一个包含三个按钮的组，分别标记为“左”、“中”和“右”。让我们分解一下：

1. 我们将按钮包裹在带有btn-group类的<div>中。
2. role="group"属性帮助屏幕阅读器理解这些按钮是相关的。
3. aria-label为按钮组提供了一个描述。
4. 每个<button>都有btn和btn-primary类，这给它们提供了Bootstrap的按钮样式。

当你运行这段代码时，你会看到三个蓝色的按钮紧紧地靠在一起，就像豌豆在豆荚里一样！

混合样式

现在，让我们稍微增加一些趣味。在现实生活中，并不是所有的按钮都一样。有些按钮比其他的更重要，我们可以通过视觉来显示这一点：

<div class="btn-group" role="group" aria-label="混合样式">
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-success">批准</button>
</div>

在这个示例中，我们使用了不同的Bootstrap颜色类：

• btn-danger用于红色的“删除”按钮
• btn-warning用于黄色的“警告”按钮
• btn-success用于绿色的“批准”按钮

这创建了一个视觉上引人注目的按钮组，每个按钮的颜色编码与其功能相对应。就像是你网页上的交通信号灯！

轮廓样式

有时，你希望你的按钮更加微妙。这时，轮廓样式就派上用场了：

<div class="btn-group" role="group" aria-label="轮廓样式">
<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">次要</button>
<button type="button" class="btn btn-outline-info">信息</button>
</div>

通过使用btn-outline-*而不是btn-*，我们得到带有颜色边框和文字，但背景透明的按钮。它们在你想在你的设计中使用更轻的触感时非常完美。

复选框和单选按钮组

现在，让我们来增加一些互动性。Bootstrap允许我们创建像复选框或单选按钮一样的按钮组：

<div class="btn-group" role="group" aria-label="基本复选框切换按钮组">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">复选框 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">复选框 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">复选框 3</label>
</div>

这段代码创建了一个像复选框一样的按钮组。你可以点击多个按钮，它们会保持“按下”状态，直到你再次点击它们。就像在你的按钮组中有一个待办事项列表！

按钮工具栏

有时，你需要将你的按钮组分组。这时，按钮工具栏就派上用场了：

<div class="btn-toolbar" role="toolbar" aria-label="带有按钮组的工具栏">
<div class="btn-group me-2" role="group" aria-label="第一组">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="第二组">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="第三组">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

这创建了一个带有三个按钮组的工具栏。就像组织你的厨房用具一样——叉子在一个抽屉里，勺子在另一个抽屉里，而你阿姨送给你的那个奇怪的小玩意儿在它自己特别的地方。

尺寸

就像人一样，按钮也有各种大小。Bootstrap使得调整整个按钮组的尺寸变得简单：

<div class="btn-group btn-group-lg" role="group" aria-label="大型按钮组">
<button type="button" class="btn btn-outline-dark">左</button>
<button type="button" class="btn btn-outline-dark">中</button>
<button type="button" class="btn btn-outline-dark">右</button>
</div>

通过给容器添加btn-group-lg，我们使所有按钮变大。你也可以使用btn-group-sm来得到更小的按钮。就像金发女孩的故事一样——你可以找到刚好合适的尺寸！

嵌套

有时，你需要一个按钮组内嵌另一个按钮组。Bootstrap可以做到：

<div class="btn-group" role="group" aria-label="带有嵌套下拉菜单的按钮组">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">下拉链接</a></li>
<li><a class="dropdown-item" href="#">下拉链接</a></li>
</ul>
</div>
</div>

这创建了一个带有两个常规按钮和一个下拉按钮的按钮组。就像俄罗斯套娃一样，但是用按钮做的！

垂直变体

最后但同样重要的是，让我们将事物转向垂直方向，使用垂直按钮组：

<div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-primary">按钮</button>
</div>

通过使用btn-group-vertical而不是btn-group，我们将按钮垂直堆叠。当你希望你的按钮形成一个塔而不是一行时，这是完美的！

结论

就这样，朋友们！我们一起穿越了Bootstrap按钮组的领域，从基本示例到垂直变体。记住，熟能生巧，所以不要害怕尝试这些示例。混合和搭配不同的样式、大小和布局，以创建适合你项目的按钮组。

网页开发是关于创造力和解决问题的，按钮组只是你手中众多的工具之一。继续学习，继续编码，最重要的是，享受乐趣！下次见，快乐编码！

Credits: Image by storyset