按钮是用户界面中最常用的交互元素之一。Bootstrap 4 提供了丰富多样的按钮样式、大小和状态，帮助您创建直观、美观的用户交互体验。
Bootstrap 4 提供了多种语义颜色的按钮样式，用于传达不同的操作意图。
<!-- 主要按钮 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<!-- 成功按钮 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 危险按钮 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 警告按钮 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 信息按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 链接按钮 -->
<button type="button" class="btn btn-link">链接按钮</button>
轮廓按钮是没有背景填充的按钮变体，只显示边框和文本。
<!-- 主要轮廓按钮 -->
<button type="button" class="btn btn-outline-primary">主要轮廓</button>
<!-- 成功轮廓按钮 -->
<button type="button" class="btn btn-outline-success">成功轮廓</button>
<!-- 危险轮廓按钮 -->
<button type="button" class="btn btn-outline-danger">危险轮廓</button>
<!-- 警告轮廓按钮 -->
<button type="button" class="btn btn-outline-warning">警告轮廓</button>
Bootstrap 4 提供了多种按钮大小选项，以适应不同的设计需求。
<!-- 大号按钮 -->
<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 btn-block">块级按钮</button>
Bootstrap 4 提供了多种按钮状态，包括活动状态、禁用状态等。
<!-- 活动状态按钮 -->
<button type="button" class="btn btn-primary active">活动状态</button>
<!-- 禁用状态按钮 -->
<button type="button" class="btn btn-primary" disabled>禁用状态</button>
<!-- 轮廓活动状态按钮 -->
<button type="button" class="btn btn-outline-primary active">轮廓活动状态</button>
<!-- 轮廓禁用状态按钮 -->
<button type="button" class="btn btn-outline-primary" disabled>轮廓禁用状态</button>
您可以在按钮中添加图标，增强按钮的视觉效果和可识别性。
<!-- 带图标的按钮 -->
<button type="button" class="btn btn-primary">
<i class="fas fa-download"></i> 下载
</button>
<!-- 带图标的轮廓按钮 -->
<button type="button" class="btn btn-outline-primary">
<i class="fas fa-search"></i> 搜索
</button>
按钮组用于将一系列按钮组合在一起，形成一组相关的操作。
<!-- 基本按钮组 -->
<div class="btn-group" role="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 class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button type="button" class="btn btn-secondary">1</button>
<!-- 更多按钮 -->
</div>
<!-- 更多按钮组 -->
</div>
<!-- 垂直按钮组 -->
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-secondary">按钮</button>
<!-- 更多按钮 -->
</div>
下拉按钮将按钮与下拉菜单组合在一起，提供更多操作选项。
<!-- 基本下拉按钮 -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
主要下拉菜单
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">操作</a>
<!-- 更多菜单项 -->
</div>
</div>
<!-- 分割下拉按钮 -->
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">操作</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">切换下拉菜单</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">操作</a>
<!-- 更多菜单项 -->
</div>
</div>
Bootstrap 4 提供了样式化的复选框和单选按钮，可以像按钮一样使用。
<!-- 复选框样式按钮 -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> 复选框 1
</label>
<!-- 更多复选框 -->
</div>
<!-- 单选按钮样式 -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> 单选 1
</label>
<!-- 更多单选按钮 -->
</div>
您可以通过添加自定义CSS类来创建独特的按钮样式。
<style>
.btn-custom {
background: linear-gradient(45deg, #6f42c1, #e83e8c);
border: none;
color: white;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s;
}
.btn-custom:hover {
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}
</style>
<button type="button" class="btn btn-custom">自定义按钮</button>
恭喜！您已经学习了Bootstrap 4按钮组件的核心概念和功能。按钮是创建直观用户交互的关键元素，掌握这些技巧将帮助您设计出更好的用户体验。
继续学习下一章：Bootstrap 4 卡片组件