Bootstrap 4 按钮组

Bootstrap 4 是一个流行的前端开发框架，提供了丰富的组件，其中包括按钮组。按钮组允许开发者将一组按钮组织在一起，并根据需要进行排列和定位。本文将介绍 Bootstrap 4 按钮组的使用方法及相关的选项和配置参数。

基本用法

Bootstrap 4 按钮组可以通过 .btn-group 类来定义。下面是一个简单的示例代码：

<div class="btn-group">
  <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 类来定义按钮组，然后在按钮组中放置了三个按钮，它们都是用 .btn 和 .btn-primary 类定义的。

注意每个按钮都需要设置 type="button" 属性，以便将其识别为按钮。

交互状态

在实际应用中，我们常常需要为按钮组添加一些交互效果，Bootstrap 4 按钮组也提供了一些选项来支持这些效果。下面是一些常见的交互状态：

• 激活状态：.active 类可以用来表示按钮是否处于激活状态，可以通过 JavaScript 切换按钮的状态。
• 焦点状态：.focus 类可以用来表示按钮是否拥有焦点，可以通过 JavaScript 来设置焦点状态。
• 鼠标悬停状态：.hover 类可以用来表示鼠标是否悬停在按钮上，可以通过 CSS 来改变按钮的样式。

按钮工具栏

Bootstrap 4 按钮组还提供了一个按钮工具栏类 .btn-toolbar，可以用来将多个按钮组组合在一起。下面是一个例子：

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group mr-2" role="group">
    <button type="button" class="btn btn-secondary">按钮一</button>
    <button type="button" class="btn btn-secondary">按钮二</button>
    <button type="button" class="btn btn-secondary">按钮三</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">按钮四</button>
    <button type="button" class="btn btn-secondary">按钮五</button>
  </div>
</div>

效果如下：

在这个例子中，我们使用了 .btn-toolbar 和 .btn-group 两个类来定义工具栏和按钮组，然后将两个按钮组放在一个工具栏中。我们还使用了 .mr-2 类来为第一个按钮组添加一些右边距，使其与第二个按钮组保持一定的距离。

垂直或水平排列

Bootstrap 4 按钮组还提供了选项来控制按钮组的排列方式，可以选择垂直或水平排列。默认情况下，按钮组是水平排列的。下面是一个例子代码：

<div class="btn-group-vertical">
  <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-toggle 类来启用切换按钮的功能。切换按钮允许选中多个按钮，并将它们组合在一起。下面是一个例子：

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> 按钮一
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> 按钮二
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> 按钮三
  </label>
</div>

效果如下：

在这个例子中，我们使用了 .btn-group-toggle 类来启用切换功能，并在每个按钮标签中添加了 <input type="checkbox"> 元素来表示每个按钮开关的状态。

总结

以上是 Bootstrap 4 按钮组的基本用法和常见配置选项。使用按钮组可以使界面更加简洁明了，同时也提高了用户的操作效率。具体的使用方法需要结合实际情况进行调整，希望本文对你有所帮助。