Bootstrap4 按钮组学习笔记

Bootstrap4 是一个流行的CSS框架，拥有各种各样的UI组件，包括按钮组。按钮组是非常常用的UI组件，用于展示一组相关的操作。

按钮组元素

Bootstrap4 中，按钮组由以下元素组成：

• .btn-group：按钮组的容器元素
• .btn：按钮元素
• .btn-outline-*：描边按钮元素
• .btn-{颜色}：颜色按钮元素

基本按钮组

通过在.btn-group中添加若干个.btn元素可以创建一个基本按钮组。

htmlCopy Code
<div class="btn-group" role="group" aria-label="Basic example">
  <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>

上述代码会生成一个包含三个按钮的按钮组，如下图所示：

描边按钮组

描边按钮是带边框的按钮，适合在需要突出显示的场景下使用。

htmlCopy Code
<div class="btn-group" role="group" aria-label="Outlined example">
  <button type="button" class="btn btn-outline-primary">左</button>
  <button type="button" class="btn btn-outline-primary">中</button>
  <button type="button" class="btn btn-outline-primary">右</button>
</div>

上述代码会生成一个包含三个描边按钮的按钮组，如下图所示：

颜色按钮组

Bootstrap4 还提供了多种颜色按钮，分别用于不同的场景和效果。例如，.btn-danger表示危险按钮，.btn-warning表示警告按钮。

htmlCopy Code
<div class="btn-group" role="group" aria-label="Colored example">
  <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>

上述代码会生成一个包含三个不同颜色的按钮的按钮组，如下图所示：

总结

本文介绍了 Bootstrap4 中按钮组的基本用法和常见元素，并通过实例演示了如何创建不同类型的按钮组。希望这篇学习笔记对你有所帮助！