Bootstrap 5 按钮组件
Bootstrap 5 提供了丰富且灵活的按钮组件，用于创建各种交互元素。
按钮组件的主要特点：
- 多种样式 - 实心、轮廓、链接等多种按钮样式
- 语义化颜色 - 使用主题颜色表示不同操作类型
- 灵活尺寸 - 从小型到大型的各种按钮尺寸
- 状态控制 - 活动、禁用、加载等状态
- 分组功能 - 按钮组、工具栏和下拉菜单
按钮示例
按钮大小
使用大小类调整按钮的尺寸。
块级按钮
使用 .btn-block 类创建占据父容器宽度的按钮。
<!-- 按钮大小 -->
<button type="button" class="btn btn-primary btn-lg">大型按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小型按钮</button>
<!-- 块级按钮 -->
<button type="button" class="btn btn-primary w-100">块级按钮</button>不同样式的按钮大小
<!-- 轮廓按钮大小 -->
<button type="button" class="btn btn-outline-primary btn-lg">大型轮廓按钮</button>
<button type="button" class="btn btn-outline-success">默认轮廓按钮</button>
<button type="button" class="btn btn-outline-danger btn-sm">小型轮廓按钮</button>带图标的按钮
在按钮中添加图标，增强视觉传达效果。
仅图标按钮
创建仅包含图标的按钮，节省空间。
<!-- 带图标的按钮 -->
<button type="button" class="btn btn-primary">
<i class="bi bi-download me-2"></i>下载
</button>
<button type="button" class="btn btn-success">
<i class="bi bi-check-lg me-2"></i>确认
</button>
<button type="button" class="btn btn-danger">
<i class="bi bi-trash me-2"></i>删除
</button>
<!-- 仅图标按钮 -->
<button type="button" class="btn btn-outline-primary btn-sm">
<i class="bi bi-pencil"></i>
</button>
<button type="button" class="btn btn-outline-success btn-sm">
<i class="bi bi-check"></i>
</button>图标位置
图标可以放在按钮文本的左侧或右侧。
按钮组
基本按钮组
使用 .btn-group 类将一系列按钮组合在一起。
工具栏
使用 .btn-toolbar 类组合多个按钮组。
<!-- 基本按钮组 -->
<div class="btn-group" role="group" aria-label="基本按钮组">
<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 class="btn-toolbar" role="toolbar" aria-label="工具栏">
<div class="btn-group me-2" role="group" aria-label="第一组">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="第二组">
<button type="button" class="btn btn-outline-secondary">4</button>
<button type="button" class="btn btn-outline-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="第三组">
<button type="button" class="btn btn-outline-secondary">6</button>
</div>
</div>垂直按钮组
使用 .btn-group-vertical 类创建垂直排列的按钮组。
下拉按钮
基本下拉按钮
创建带有下拉菜单的按钮。
分割下拉按钮
创建分割按钮，一部分是操作，一部分是下拉菜单。
<!-- 基本下拉按钮 -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
下拉按钮
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">其他操作</a></li>
</ul>
</div>
<!-- 分割下拉按钮 -->
<div class="btn-group">
<button type="button" class="btn btn-danger">操作</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">切换下拉菜单</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">其他操作</a></li>
</ul>
</div>不同样式的下拉按钮
交互按钮演示
按钮状态切换
点击按钮切换其状态。
按钮计数器
点击按钮增加计数。
按钮生成器
自定义创建按钮。
按钮使用最佳实践
语义化设计
- 根据操作类型选择合适的按钮颜色
- 主要操作使用突出颜色，次要操作使用中性颜色
- 危险操作使用红色，成功操作使用绿色
- 保持颜色使用的一致性
用户体验
- 按钮文本应该清晰描述其功能
- 为重要操作提供足够的视觉权重
- 考虑按钮在不同状态下的外观
- 确保按钮有足够的点击区域
可访问性
- 为所有按钮提供有意义的文本或标签
- 确保按钮有足够的颜色对比度
- 为图标按钮提供替代文本
- 考虑键盘导航和屏幕阅读器用户
响应式设计
- 在不同屏幕尺寸上测试按钮布局
- 考虑在小屏幕上使用块级按钮
- 确保按钮组在不同设备上正常显示
- 使用合适的断点调整按钮大小