Bootstrap 按钮组
Bootstrap按钮组
Bootstrap是一个流行的开源前端框架，它可以帮助开发人员构建响应式、移动优先的Web应用程序。Bootstrap为开发人员提供了许多常用的UI组件，其中包括按钮组。
按钮组可以用于将多个按钮组合在一起，以进行更好的操作控制和UI设计。在此文档中，我们将介绍如何使用Bootstrap创建按钮组。
创建按钮组
要创建一个按钮组，您需要定义一个带有.btn-group类的div元素，并将所有按钮包含在其中。例如：
<div class="btn-group" role="group">
<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>
这将创建一个包含三个按钮的按钮组。我们设置.btn-group类来将它们包含在一起。
垂直按钮组
如果您需要将按钮组垂直排列，可以使用.btn-group-vertical类。例如：
<div class="btn-group-vertical" role="group">
<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>
这将垂直地对齐您的按钮。
尺寸
Bootstrap为按钮组提供了不同的尺寸选项，可以在.btn-group类中设置以下类之一：
.btn-group-lg：大尺寸。.btn-group-sm：小尺寸。.btn-group-xs：极小尺寸。
例如：
<div class="btn-group btn-group-lg" role="group">
<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>
这将创建一个具有大尺寸的按钮组。 您可以使用相同的方式设置小尺寸和极小尺寸。
按钮颜色
Bootstrap提供了不同的颜色选项，可以通过在按钮上使用以下类之一来设置颜色：
.btn-primary：默认的蓝色。.btn-success：绿色，用于表示成功。.btn-info：天蓝色，用于表示信息。.btn-warning：黄色，用于表示警告。.btn-danger：红色，用于表示危险。
例如：
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-success">按钮2</button>
<button type="button" class="btn btn-danger">按钮3</button>
</div>
这将创建一个包含三个带有不同颜色的按钮的按钮组。
激活状态
您可以使用.active类来标记选定的按钮。例如：
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary active">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-primary">按钮3</button>
</div>
这将创建一个包含三个按钮的按钮组，其中第一个按钮被标记为激活状态。
总结
按钮组是在Bootstrap中使用很广泛的UI组件。您可以使用.btn-group类轻松地将多个按钮组合在一起，并使用其他类设置按钮组的颜色、尺寸和垂直排列。
除此之外，您还可以使用.active类来标记选定的按钮。