Bootstrap 按钮组件 #

按钮是网页中最常用的交互元素之一。Bootstrap 提供了丰富的按钮样式和功能，帮助你快速创建美观、一致的按钮。

基础按钮 #

按钮标签 #

Bootstrap 的 .btn 类可以应用于多种 HTML 元素：

html

<!-- button 标签（推荐） -->
<button class="btn btn-primary">按钮</button>

<!-- a 标签 -->
<a class="btn btn-primary" href="#" role="button">链接按钮</a>

<!-- input 标签 -->
<input class="btn btn-primary" type="button" value="输入按钮">
<input class="btn btn-primary" type="submit" value="提交按钮">
<input class="btn btn-primary" type="reset" value="重置按钮">

注意：当使用 <a> 标签作为按钮时，务必添加 role="button" 属性以提供更好的可访问性。

按钮颜色 #

Bootstrap 提供了 8 种预定义的按钮颜色：

html

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-light">浅色按钮</button>
<button class="btn btn-dark">深色按钮</button>

类名	用途
`.btn-primary`	主要操作，品牌色
`.btn-secondary`	次要操作
`.btn-success`	积极、确认操作
`.btn-danger`	危险、删除操作
`.btn-warning`	警告操作
`.btn-info`	信息提示
`.btn-light`	浅色背景
`.btn-dark`	深色背景

轮廓按钮 #

使用 .btn-outline-* 创建带边框的轮廓按钮：

html

<button class="btn btn-outline-primary">主要轮廓</button>
<button class="btn btn-outline-secondary">次要轮廓</button>
<button class="btn btn-outline-success">成功轮廓</button>
<button class="btn btn-outline-danger">危险轮廓</button>
<button class="btn btn-outline-warning">警告轮廓</button>
<button class="btn btn-outline-info">信息轮廓</button>
<button class="btn btn-outline-light">浅色轮廓</button>
<button class="btn btn-outline-dark">深色轮廓</button>

按钮尺寸 #

预设尺寸 #

Bootstrap 提供了三种按钮尺寸：

html

<!-- 大按钮 -->
<button class="btn btn-primary btn-lg">大按钮</button>

<!-- 默认按钮 -->
<button class="btn btn-primary">默认按钮</button>

<!-- 小按钮 -->
<button class="btn btn-primary btn-sm">小按钮</button>

类名	说明
`.btn-lg`	大尺寸
默认	标准尺寸
`.btn-sm`	小尺寸

块级按钮 #

使用 .d-grid 和 .gap-* 创建块级按钮：

html

<div class="d-grid gap-2">
  <button class="btn btn-primary">块级按钮</button>
  <button class="btn btn-secondary">块级按钮</button>
</div>

响应式块级按钮：

html

<!-- 仅在移动端显示为块级 -->
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
  <button class="btn btn-primary">按钮一</button>
  <button class="btn btn-secondary">按钮二</button>
</div>

按钮状态 #

禁用状态 #

使用 disabled 属性禁用按钮：

html

<button class="btn btn-primary" disabled>禁用按钮</button>
<button class="btn btn-secondary" disabled>禁用按钮</button>

对于 <a> 标签，使用 .disabled 类：

html

<a class="btn btn-primary disabled" href="#" role="button" aria-disabled="true">禁用链接</a>

激活状态 #

使用 .active 类表示激活状态：

html

<button class="btn btn-primary active" aria-pressed="true">激活按钮</button>
<button class="btn btn-secondary active" aria-pressed="true">激活按钮</button>

切换状态 #

使用 data-bs-toggle="button" 创建切换按钮：

html

<button class="btn btn-primary" data-bs-toggle="button">切换按钮</button>
<button class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">已激活</button>

按钮组 #

基础按钮组 #

使用 .btn-group 创建按钮组：

html

<div class="btn-group" role="group" aria-label="基础按钮组">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>

按钮工具栏 #

使用 .btn-toolbar 创建按钮工具栏：

html

<div class="btn-toolbar" role="toolbar" aria-label="工具栏">
  <div class="btn-group me-2" role="group">
    <button class="btn btn-primary">1</button>
    <button class="btn btn-primary">2</button>
    <button class="btn btn-primary">3</button>
  </div>
  <div class="btn-group me-2" role="group">
    <button class="btn btn-secondary">4</button>
    <button class="btn btn-secondary">5</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-info">6</button>
  </div>
</div>

按钮组尺寸 #

html

<!-- 大按钮组 -->
<div class="btn-group btn-group-lg">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>

<!-- 小按钮组 -->
<div class="btn-group btn-group-sm">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>

垂直按钮组 #

html

<div class="btn-group-vertical">
  <button class="btn btn-primary">上</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">下</button>
</div>

带下拉菜单的按钮 #

单按钮下拉 #

html

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    下拉菜单
  </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>

分裂按钮下拉 #

html

<div class="btn-group">
  <button class="btn btn-primary">主要按钮</button>
  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    <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>

下拉方向 #

html

<!-- 向上弹出 -->
<div class="btn-group dropup">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    向上
  </button>
  <ul class="dropdown-menu">...</ul>
</div>

<!-- 向右弹出 -->
<div class="btn-group dropend">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    向右
  </button>
  <ul class="dropdown-menu">...</ul>
</div>

<!-- 向左弹出 -->
<div class="btn-group dropstart">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    向左
  </button>
  <ul class="dropdown-menu">...</ul>
</div>

带图标的按钮 #

图标按钮 #

html

<button class="btn btn-primary">
  <svg class="bi me-2"><use xlink:href="#check"></use></svg>
  保存
</button>

<button class="btn btn-secondary">
  <svg class="bi me-2"><use xlink:href="#trash"></use></svg>
  删除
</button>

纯图标按钮 #

html

<button class="btn btn-primary" aria-label="保存">
  <svg class="bi"><use xlink:href="#check"></use></svg>
</button>

<button class="btn btn-outline-danger" aria-label="删除">
  <svg class="bi"><use xlink:href="#trash"></use></svg>
</button>

加载状态按钮 #

旋转图标 #

html

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>
  加载中...
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm me-2"></span>
  加载中...
</button>

JavaScript 控制 #

html

<button class="btn btn-primary" id="loadBtn" type="button">
  提交
</button>

<script>
document.getElementById('loadBtn').addEventListener('click', function() {
  this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>提交中...';
  this.disabled = true;
  
  setTimeout(() => {
    this.innerHTML = '提交';
    this.disabled = false;
  }, 2000);
});
</script>

实战案例 #

登录表单按钮 #

html

<form>
  <div class="mb-3">
    <label class="form-label">邮箱</label>
    <input type="email" class="form-control">
  </div>
  <div class="mb-3">
    <label class="form-label">密码</label>
    <input type="password" class="form-control">
  </div>
  <div class="d-grid gap-2">
    <button class="btn btn-primary" type="submit">登录</button>
    <button class="btn btn-outline-secondary" type="button">注册账号</button>
  </div>
</form>

操作按钮组 #

html

<div class="btn-toolbar justify-content-between">
  <div class="btn-group">
    <button class="btn btn-outline-secondary">
      <svg class="bi"><use xlink:href="#pencil"></use></svg>
    </button>
    <button class="btn btn-outline-secondary">
      <svg class="bi"><use xlink:href="#trash"></use></svg>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-primary">保存</button>
  </div>
</div>

分页按钮 #

html

<nav aria-label="分页">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">上一页</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

社交登录按钮 #

html

<div class="d-grid gap-2">
  <button class="btn btn-outline-dark">
    <svg class="bi me-2">...</svg>
    使用 GitHub 登录
  </button>
  <button class="btn" style="background-color: #1877f2; color: white;">
    <svg class="bi me-2">...</svg>
    使用 Facebook 登录
  </button>
  <button class="btn" style="background-color: #db4437; color: white;">
    <svg class="bi me-2">...</svg>
    使用 Google 登录
  </button>
</div>

确认对话框按钮 #

html

<div class="modal-footer">
  <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
  <button class="btn btn-danger">确认删除</button>
</div>

按钮样式定制 #

Sass 变量 #

scss

$btn-padding-y: 0.375rem;
$btn-padding-x: 0.75rem;
$btn-font-family: null;
$btn-font-size: $font-size-base;
$btn-line-height: 1.5;
$btn-white-space: null;

$btn-padding-y-sm: 0.25rem;
$btn-padding-x-sm: 0.5rem;
$btn-font-size-sm: $font-size-sm;

$btn-padding-y-lg: 0.5rem;
$btn-padding-x-lg: 1rem;
$btn-font-size-lg: $font-size-lg;

$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;

自定义按钮 #

scss

.btn-custom {
  @include button-variant(
    $background: #ff6600,
    $border: #ff6600,
    $hover-background: darken(#ff6600, 10%),
    $hover-border: darken(#ff6600, 10%),
    $active-background: darken(#ff6600, 15%),
    $active-border: darken(#ff6600, 15%)
  );
}

最佳实践 #

1. 语义化使用 #

html

<!-- 推荐：根据操作含义选择颜色 -->
<button class="btn btn-danger">删除</button>
<button class="btn btn-success">保存</button>

<!-- 不推荐：随意使用颜色 -->
<button class="btn btn-danger">保存</button>
<button class="btn btn-success">删除</button>

2. 可访问性 #

html

<!-- 推荐：添加 aria 属性 -->
<button class="btn btn-primary" aria-label="保存文档">
  <svg class="bi">...</svg>
</button>

<!-- 推荐：禁用状态 -->
<button class="btn btn-primary" disabled aria-disabled="true">禁用</button>

3. 一致的尺寸 #

html

<!-- 推荐：按钮组使用相同尺寸 -->
<div class="btn-group">
  <button class="btn btn-primary btn-sm">按钮一</button>
  <button class="btn btn-primary btn-sm">按钮二</button>
</div>

<!-- 不推荐：混合尺寸 -->
<div class="btn-group">
  <button class="btn btn-primary btn-lg">按钮一</button>
  <button class="btn btn-primary btn-sm">按钮二</button>
</div>

常见问题 #

1. 按钮点击后不恢复？ #

确保没有忘记移除 disabled 属性：

javascript

// 正确做法
btn.disabled = true;
await someAsyncOperation();
btn.disabled = false;

2. 下拉菜单不工作？ #

确保引入了 Bootstrap JavaScript：

html

<script src="bootstrap.bundle.min.js"></script>

3. 按钮宽度不一致？ #

使用 d-grid 或设置固定宽度：

html

<div class="d-grid gap-2">
  <button class="btn btn-primary">按钮一</button>
  <button class="btn btn-primary">按钮二</button>
</div>

下一步 #

现在你已经掌握了按钮组件，接下来学习表单组件，了解如何创建各种表单元素！