按钮与徽章
Bootstrap 的按钮采用「基类 + 修饰类」命名法：btn 是基类（形状、内边距、过渡），btn-primary / success / danger / outline-* 决定配色。尺寸用 btn-lg / btn-sm，禁用加 disabled 属性或类。这种「基类 + 修饰符」的命名思路（BEM 风格）贯穿整套框架。
徽章（badge）是小型计数/标签胶囊：badge text-bg-primary 显示数量、状态。常见组合是按钮内嵌徽章（消息数）、标题后跟状态标签（Beta/New）。rounded-pill 把徽章变成胶囊形。
实用技巧：btn-outline-danger 生成描边按钮（hover 才填充），适合「次要操作」；「主要操作用实心、次要操作用描边」是通用的视觉层级原则，别把页面上所有按钮都做成实心的。
本节要点btn 基类 + btn-{颜色} 修饰；outline-* 描边按钮做次要操作；lg/sm 控尺寸；badge 用 text-bg-* 上色，rounded-pill 变胶囊。
代码
<!-- 按钮：btn 基类 + btn-{颜色} 修饰类 -->
<button class="btn btn-primary">主要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-outline-danger">描边（次要操作）</button>
<!-- 尺寸与状态 -->
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-secondary btn-sm">小按钮</button>
<button class="btn btn-primary" disabled>禁用</button>
<!-- 徽章：text-bg-{颜色} 上色 -->
<h4>新功能 <span class="badge text-bg-warning">Beta</span></h4>
<!-- 按钮内嵌徽章：显示消息数 -->
<button class="btn btn-primary position-relative">
消息
<span class="badge text-bg-danger">4</span>
</button>
<!-- 胶囊形徽章 -->
<span class="badge rounded-pill text-bg-success">已通过</span>📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读