一、简介¶
在网页开发中，按钮是用户交互的重要元素。使用Bootstrap5的按钮组件，可以快速实现统一的样式、响应式布局和丰富的交互状态，无需从零开始编写CSS。本章将带你掌握Bootstrap5按钮的核心用法，包括基础样式、尺寸调整和状态设置。
二、引入Bootstrap5¶
在使用按钮组件前，需要先引入Bootstrap5的CSS和JS文件。最简单的方式是通过CDN（内容分发网络）引入：
<head>
<!-- 引入Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 引入Bootstrap5 JS（可选，若需要交互功能如下拉菜单等） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
提示：如果仅需要基础样式（无交互功能），可以只引入CSS文件。
三、基础按钮样式¶
Bootstrap5按钮的样式通过不同的类名控制，核心是.btn类，再配合颜色类实现不同视觉效果。
1. 基础按钮类¶
所有按钮必须添加.btn类作为基础，然后通过颜色类设置样式：
<button class="btn">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-light">浅色按钮</button>
<button class="btn btn-dark">深色按钮</button>
效果：.btn-primary是最常用的蓝色系按钮，.btn-secondary是灰色系，其他颜色类对应不同主题色。
2. 轮廓按钮¶
如果需要透明背景+边框的样式，可以使用btn-outline-*前缀：
<button class="btn btn-outline-primary">轮廓按钮</button>
<button class="btn btn-outline-success">成功轮廓</button>
<button class="btn btn-outline-danger">危险轮廓</button>
特点：仅保留边框和文字颜色，背景透明，悬停时会填充颜色（和填充类按钮效果一致）。
四、按钮尺寸设置¶
Bootstrap5提供了三种预设尺寸：默认、小尺寸（sm）、大尺寸（lg）。
1. 默认尺寸¶
不添加额外尺寸类时，按钮为默认大小：
<button class="btn btn-primary">默认按钮</button>
2. 小尺寸按钮¶
通过.btn-sm类设置小尺寸：
<button class="btn btn-primary btn-sm">小按钮</button>
3. 大尺寸按钮¶
通过.btn-lg类设置大尺寸：
<button class="btn btn-primary btn-lg">大按钮</button>
效果对比：小按钮更紧凑，大按钮占据更多空间，适合突出重要操作。
五、按钮状态设置¶
按钮在不同交互状态下会自动显示不同样式，无需额外CSS即可实现。
1. 悬停状态（Hover）¶
鼠标悬浮在按钮上时，默认会有颜色加深效果：
<button class="btn btn-primary">悬停试试</button>
原理：Bootstrap5通过CSS伪类hover自动实现，如.btn-primary:hover会让背景色更深。
2. 点击状态（Active）¶
按钮被点击时，会有“内凹”效果（类似按压感）：
<button class="btn btn-primary active">点击按钮</button>
提示：active类通常配合aria-pressed="true"属性使用（无障碍支持），但基础样式无需额外处理。
3. 禁用状态（Disabled）¶
通过disabled属性禁用按钮，此时按钮会变灰且不可点击：
<button class="btn btn-primary" disabled>禁用按钮</button>
注意：
- 禁用按钮必须添加disabled属性（HTML原生属性），而非类名。
- 禁用状态下，无法触发点击事件（需JS处理时，可配合class="opacity-50 cursor-not-allowed"增强视觉反馈）。
六、实用扩展技巧¶
1. 按钮形状调整¶
通过边框半径工具类调整按钮形状：
- .rounded-0：无圆角（直角）
- .rounded：默认圆角（Bootstrap5中需搭配.rounded或直接写rounded）
- .rounded-circle：圆形按钮
<button class="btn btn-primary rounded-0">直角按钮</button>
<button class="btn btn-primary rounded-circle">圆形按钮</button>
2. 按钮组（Btn Group）¶
多个按钮可组合成一组（如导航、工具条），通过.btn-group类实现：
<div class="btn-group" role="group" aria-label="操作按钮组">
<button class="btn btn-primary">左</button>
<button class="btn btn-secondary">中</button>
<button class="btn btn-danger">右</button>
</div>
效果：按钮间会合并边框，形成整体感，适合横向排列的操作按钮。
七、总结¶
Bootstrap5按钮组件通过简单的类名即可实现样式、尺寸和状态的控制，核心要点：
- 基础样式：.btn + 颜色类（如.btn-primary）或轮廓类（.btn-outline-*）。
- 尺寸控制：.btn-sm（小）、.btn-lg（大）。
- 状态管理：disabled属性（禁用）、自动hover/active效果。
练习建议：复制示例代码到HTML文件，修改颜色、尺寸和状态，观察效果差异，快速熟悉类名规律。