在这一章中，我们将详细探讨如何使用 Bootstrap 5 来创建和定制按钮。Bootstrap 的按钮组件提供了多种样式和尺寸选项，使得你可以轻松地将功能性和美观性结合起来。
按钮的基本用法
按钮是用户界面中最常用的元素之一，它们用于触发操作或导航到其他页面。Bootstrap 提供了预定义的类来快速应用常见的按钮样式。
创建一个基本按钮
要创建一个基本的按钮，只需在 <button> 元素上添加 btn 类：
<button type="button" class="btn">默认按钮</button>
不同的按钮类型
Bootstrap 提供了不同样式的按钮类，包括主要按钮、次级按钮、成功按钮、信息按钮等。这些样式可以通过不同的类名实现：
-- -------------------- ---- ------- ------- ------------- ---------- -------------------------- ------- ------------- ---------- ---------------------------- ------- ------------- ---------- -------------------------- ------- ------------- ---------- ----------------------- ------- ------------- ---------- -------------------------- ------- ------------- ---------- ------------------------- ------- ------------- ---------- ------------------------ ------- ------------- ---------- ----------------------- ------- ------------- ---------- -----------------------
自定义按钮颜色
如果你想要自定义按钮的颜色，可以使用 text-* 和 bg-* 类来改变文本颜色和背景颜色：
<button type="button" class="btn text-white bg-primary">自定义颜色</button>
按钮尺寸
Bootstrap 提供了几种不同的按钮尺寸，使你的设计更具灵活性。这些尺寸通过添加特定的类来实现。
小型按钮
要创建一个小尺寸的按钮，可以使用 btn-sm 类：
<button type="button" class="btn btn-primary btn-sm">小型按钮</button>
大型按钮
要创建一个大尺寸的按钮，可以使用 btn-lg 类：
<button type="button" class="btn btn-primary btn-lg">大型按钮</button>
块级按钮
如果你希望按钮占据其父容器的全部宽度，可以使用 btn-block 类：
<button type="button" class="btn btn-primary btn-block">块级按钮</button>
按钮状态
Bootstrap 提供了一些类来表示按钮的不同状态，例如激活状态、禁用状态和悬停效果。
激活状态
要显示一个激活的按钮，可以使用 active 类：
<button type="button" class="btn btn-primary active">激活按钮</button>
禁用状态
要创建一个禁用的按钮，可以使用 disabled 属性：
<button type="button" class="btn btn-primary" disabled>禁用按钮</button>
悬停效果
虽然悬停效果是默认启用的，但你可以通过自定义 CSS 来增强这些效果：
<style>
.btn-primary:hover {
background-color: #0069d9;
}
</style>
<button type="button" class="btn btn-primary">悬停效果</button>按钮组
Bootstrap 还支持创建按钮组，这是一种将多个按钮组合在一起的便捷方式。按钮组可以水平或垂直排列。
水平按钮组
要创建一个水平排列的按钮组，可以使用 .btn-group 类，并将其包裹在一个带有 .btn-toolbar 类的容器中：
<div class="btn-toolbar">
<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>
</div>垂直按钮组
要创建一个垂直排列的按钮组，可以使用 .btn-group-vertical 类：
<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>结尾
本章介绍了如何使用 Bootstrap 5 创建和定制按钮。从基础按钮到按钮组，Bootstrap 提供了丰富的工具来帮助你快速构建美观且功能强大的用户界面。在下一章中，我们将探讨表单组件，包括输入框、选择框等。