Bootstrap按钮必须添加基础类名btn,否则所有变体类(如btn-primary、btn-sm)均无效;需配合语义化标签使用,禁用状态须用disabled属性而非disabled类,按钮组需用btn-group容器包裹。

按钮基础类名必须用 btn,否则不是 Bootstrap 按钮
Bootstrap 的按钮样式完全依赖 btn 这个基础类。不加它,哪怕写了 btn-primary 或 btn-lg,CSS 也不会生效——因为所有变体类都通过 .btn 的祖先选择器或组合选择器定义。
常见错误是只写 class="btn-primary",结果按钮还是浏览器默认样式。正确写法必须包含 btn:
<button class="btn btn-primary">确认</button> <a href="#" class="btn btn-outline-secondary">取消</a> <input type="submit" class="btn btn-success">
btn-sm 和 btn-lg 不影响行高逻辑,只改 padding 和 font-size
Bootstrap 的尺寸类不是简单缩放,而是按设计系统重新设定了 padding、font-size 和 border-radius。比如 btn-sm 的 padding 是 0.25rem 0.5rem,而默认 btn 是 0.375rem 0.75rem。
这意味着:如果你在已加 btn-sm 的按钮上再手动加 style="line-height: 2",很可能导致文字上下偏移——因为 line-height 会覆盖原本靠 padding 控制的垂直对齐。
- 尺寸类之间不叠加,
btn-sm btn-lg以后者为准(btn-lg的 CSS 权重更高) - 响应式尺寸不存在,如
btn-sm-md是无效类名 - 若需微调高度,优先用
py-1这类间距工具类,而非直接改line-height
禁用状态必须用 disabled 属性,disabled 类无效
Bootstrap 对禁用按钮的处理是基于原生 disabled 属性的。只加 class="disabled" 不会触发样式变化,也不会阻止点击事件——这是很多人踩坑的地方。
正确做法:
<button class="btn btn-danger" disabled>删除</button> <button class="btn btn-warning" disabled>等待中</button>
-
disabled是布尔属性,写disabled或disabled="disabled"效果一致 - 对
标签,不能用disabled属性(HTML 不合法),得用class="btn btn-link disabled"+tabindex="-1"+ 手动阻止click -
opacity: 0.65和pointer-events: none是 Bootstrap 自动加上的,别用 CSS 覆盖它们,否则可访问性受损
按钮组里多个 btn 会自动去边框,但需要父容器 btn-group
把几个按钮并排显示且共享边框(比如“左对齐/居中/右对齐”三连按钮),不能只靠 btn 类堆砌。必须用 btn-group 包裹,否则左右按钮的圆角和边框会重叠或断裂。
<div class="btn-group"> <button class="btn btn-outline-dark">A</button> <button class="btn btn-outline-dark">B</button> <button class="btn btn-outline-dark">C</button> </div>
-
btn-group会清除内部按钮的左右margin,并统一处理相邻边框(例如隐藏中间按钮的左边框) - 响应式分组要用
btn-group-vertical,但注意它会让按钮堆成一列,不是“在小屏下变竖排” - 如果按钮里混用了
和,部分老版本 Bootstrap 会出现边框错位,建议统一标签类型
实际项目里最容易被忽略的是 btn 的语义约束——它只负责样式,不处理交互逻辑。比如点击后变灰、加载中状态、防重复提交,这些都得自己用 JavaScript 控制 disabled 属性和类名切换,Bootstrap 不管。











