English 中文 العربية 日本語 Português

Bootstrap: 按钮与按钮组

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Alice 的注册页面需要三个按钮：提交（蓝色主按钮）、重置（灰色次要按钮）和已有账号登录（链接风格）——每个按钮的样式不同，但都基于 .btn 基类。

(4) 解法

Bootstrap 提供了丰富的按钮样式和尺寸选项，以及按钮组的组合排列能力。

理解方式： 按钮就像遥控器按键——颜色代表功能（蓝色=主要，红色=危险，绿色=成功），尺寸适配不同容器，disabled 表示不可用。

(5) 收益

借助 Bootstrap 的按钮系统，无需手写 CSS 即可实现专业、一致且可访问的按钮界面。

2. 按钮基础

Bootstrap 使用 .btn 作为按钮基类，配合颜色变体使用：

HTML 
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：按钮变体展示

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Standard Buttons</h5>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-light">Light</button>
    <button class="btn btn-dark">Dark</button>
    <button class="btn btn-link">Link</button>

    <hr>

    <h5>Outline Buttons</h5>
    <button class="btn btn-outline-primary">Primary</button>
    <button class="btn btn-outline-secondary">Secondary</button>
    <button class="btn btn-outline-success">Success</button>
    <button class="btn btn-outline-danger">Danger</button>

    <hr>

    <h5>Button Sizes</h5>
    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-sm">Small</button>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

3. 按钮变体

(1) 颜色语义

class 语义 用途
btn-primary 蓝色 主要操作（提交、下一步）
btn-secondary 灰色 次要操作（取消、返回）
btn-success 绿色 成功性操作（保存、确认）
btn-danger 红色 危险操作（删除、退出）
btn-warning 黄色 警告性操作
btn-info 青色 信息性操作
btn-light 白色 浅色背景上使用
btn-dark 黑色 深色背景上使用
btn-link 链接色 将按钮伪装成链接

(2) 轮廓按钮

HTML 
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 轮廓按钮悬停时会填充背景色，适合作为次要操作。

(3) 按钮尺寸

class 字号 内边距 场景
btn-lg 1.25rem 0.5rem 1rem 醒目 CTA、Hero 区域
默认 1rem 0.375rem 0.75rem 通用
btn-sm 0.875rem 0.25rem 0.5rem 表格内、紧凑空间

4. 按钮状态

HTML 
<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1">Disabled link</a>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 <button> 元素原生支持 disabled 属性。<a> 标签通过 .disabled class 禁用。

5. 按钮块级

HTML 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full-width block button</button>
  <button class="btn btn-outline-secondary" type="button">Also full width</button>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

6. 按钮组

HTML 
<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 按钮组变体

HTML 
<div class="btn-group-vertical">
  <button class="btn btn-primary">Top</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Bottom</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">B</button>
    <button class="btn btn-outline-secondary">I</button>
    <button class="btn btn-outline-secondary">U</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary">Left</button>
    <button class="btn btn-outline-secondary">Center</button>
    <button class="btn btn-outline-secondary">Right</button>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 效果 场景
btn-group 水平分组 工具栏、分页
btn-group-vertical 垂直分组 侧栏选项
btn-toolbar 多个组拼成工具栏 富文本编辑器

7. 按钮决策与参考

(1) 按钮变体选择流程

100% 
graph TD
    A[需要按钮] --> B{主要还是次要?}
    B -->|主要操作| C{颜色选择}
    B -->|次要操作| D[btn-outline-* 或 btn-link]
    C --> E[提交/保存 → btn-primary]
    C --> F[危险/删除 → btn-danger]
    C --> G[成功确认 → btn-success]
    C --> H[警告提示 → btn-warning]
    D --> I{有边框?}
    I -->|是| J[btn-outline-primary / outline-danger]
    I -->|否| K[btn-link 链接风格]
    A --> L{尺寸要求?}
    L --> M[醒目 → btn-lg]
    L --> N[标准 → 默认]
    L --> O[紧凑 → btn-sm]
    A --> P{成组?}
    P --> Q[btn-group 水平 / btn-group-vertical 垂直]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(2) 按钮尺寸完整参考

class 字号 padding-y padding-x 边框圆角 场景
btn-lg 1.25rem 0.5rem 1rem 0.5rem CTA、Hero 区域
默认 1rem 0.375rem 0.75rem 0.375rem 通用按钮
btn-sm 0.875rem 0.25rem 0.5rem 0.25rem 表格、紧凑空间

(3) 按钮组类型参考

class 布局 HTML 结构 场景
btn-group 水平排列 div.btn-group > button*N 分页、操作组
btn-group-vertical 垂直排列 div.btn-group-vertical > button*N 侧栏按钮
btn-toolbar 组合多个 btn-group div.btn-toolbar > div.btn-group*N 富文本编辑器
btn-group + dropup 向上弹出 div.btn-group.dropup 上传菜单
btn-group + dropend 向右弹出 div.btn-group.dropend 侧边菜单

▶ 示例：按钮工具栏

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Toolbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>富文本编辑器工具栏</h5>

    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Formatting toolbar">
      <div class="btn-group me-2" role="group" aria-label="Text style">
        <button type="button" class="btn btn-outline-secondary">B</button>
        <button type="button" class="btn btn-outline-secondary">I</button>
        <button type="button" class="btn btn-outline-secondary">U</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Alignment">
        <button type="button" class="btn btn-outline-secondary">⬅</button>
        <button type="button" class="btn btn-outline-secondary">⬇</button>
        <button type="button" class="btn btn-outline-secondary">➡</button>
      </div>
      <div class="btn-group" role="group" aria-label="Actions">
        <button type="button" class="btn btn-outline-secondary">🔗</button>
        <button type="button" class="btn btn-outline-secondary">📷</button>
      </div>
    </div>

    <p class="text-muted small">btn-toolbar 组合多个 btn-group，me-2 控制组间距</p>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：切换按钮

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">单选切换</h5>
    <div class="btn-group mb-4" role="group" aria-label="Basic radio toggle">
      <input type="radio" class="btn-check" name="options" id="option1" checked>
      <label class="btn btn-outline-primary" for="option1">日视图</label>

      <input type="radio" class="btn-check" name="options" id="option2">
      <label class="btn btn-outline-primary" for="option2">周视图</label>

      <input type="radio" class="btn-check" name="options" id="option3">
      <label class="btn btn-outline-primary" for="option3">月视图</label>
    </div>

    <h5 class="mb-3">多选切换</h5>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle">
      <input type="checkbox" class="btn-check" id="checkbox1">
      <label class="btn btn-outline-success" for="checkbox1">粗体</label>

      <input type="checkbox" class="btn-check" id="checkbox2">
      <label class="btn btn-outline-success" for="checkbox2">斜体</label>

      <input type="checkbox" class="btn-check" id="checkbox3">
      <label class="btn btn-outline-success" for="checkbox3">下划线</label>
    </div>

    <p class="text-muted small mt-3">使用 <code>btn-check</code> + <code>&lt;label&gt;</code> 实现切换效果，无需 JavaScript。</p>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：加载状态按钮

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-4">加载状态按钮</h5>

    <div class="d-flex gap-2 mb-3">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        加载中...
      </button>
      <button class="btn btn-success" disabled>
        <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
        保存中...
      </button>
      <button class="btn btn-danger" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        删除中...
      </button>
    </div>

    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        连接中...
      </button>
      <button class="btn btn-outline-success">
        <span class="spinner-border spinner-border-sm me-2 d-none" role="status"></span>
        提交按钮
      </button>
    </div>

    <p class="text-muted small mt-3">使用 <code>spinner-border</code> 或 <code>spinner-grow</code> 配合 <code>disabled</code> 实现加载状态。</p>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：块级按钮

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">块级按钮（d-grid）</h5>

    <div class="d-grid gap-2 mb-4">
      <button class="btn btn-primary btn-lg" type="button">主要操作 — 全宽按钮</button>
      <button class="btn btn-outline-secondary" type="button">次要操作</button>
    </div>

    <h5 class="mb-3">响应式块级</h5>
    <div class="d-grid gap-2 d-md-block">
      <button class="btn btn-primary me-md-2" type="button">桌面端并排</button>
      <button class="btn btn-outline-secondary" type="button">手机端堆叠</button>
    </div>

    <p class="text-muted small mt-3">
      <code>d-grid gap-2</code> 实现堆叠全宽按钮，<code>d-md-block</code> 在桌面端恢复并排。
    </p>

    <hr>

    <h5 class="mb-3">Button group 块级变体</h5>
    <div class="d-grid gap-2">
      <div class="btn-group" role="group">
        <button class="btn btn-primary">选项一</button>
        <button class="btn btn-primary">选项二</button>
        <button class="btn btn-primary">选项三</button>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

❓ 常见问题

Q <button> 和 <a> 做按钮有什么区别？
A <button> 用于触发表单提交或交互动作（提交、保存、删除），<a> 用于页面跳转（详情页、外部链接）。语义上 button 是做事，a 是去某处。
Q 按钮上的 type="button" 有什么作用？
A 防止按钮触发表单提交。在 <form> 内的 <button> 默认 type="submit"，点击会刷新页面。显式指定 type="button" 可避免这个行为。
Q 如何自定义按钮颜色？
A 两种方式：(1) 用 Bootstrap 的 CSS 变量覆盖——--bs-btn-bg、--bs-btn-color、--bs-btn-hover-bg；(2) Phase 5 通过 Sass 变量 $theme-colors 定制。
Q 按钮组可以嵌套吗？
A 可以。btn-group 内部可以再放 btn-group 实现下拉分组，例如：<div class="btn-group"><button>1</button><div class="btn-group"><button class="dropdown-toggle">更多</button><ul class="dropdown-menu">...</ul></div></div>。嵌套的按钮组会保持在同一行，适合分页组件中的"更多"按钮。
Q 按钮里可以放图标吗？怎么做纯图标按钮？
A 可以。在 <button> 内直接放 <i> 或 <svg> 即可。纯图标按钮建议加 aria-label 提供文字说明：<button class="btn btn-outline-secondary" aria-label="搜索"><svg ...></svg></button>。Bootstrap Icons 是官方配套图标库，使用 <i class="bi bi-search"></i> 即可嵌入。

📖 小节

📝 作业

  1. ⭐ 创建一个表单底部的操作栏：提交（btn-primary btn-lg）、保存草稿（btn-outline-secondary）、删除（btn-outline-danger）、取消（btn-link）。
  2. ⭐⭐ 用 btn-group 做一个分页组件：上一页 + 页码 1-5 + 下一页，选中页码高亮为 btn-primary。
  3. ⭐⭐⭐ 创建一个工具栏：用 btn-toolbar 组合文字格式（B/I/U）和对齐（Left/Center/Right）两个按钮组。

上一课： 导航栏 · 下一课： 卡片

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏