html没有“合并按钮”语法，本质是通过div容器+css类（如btn-group）+边框/圆角控制实现视觉连贯；bootstrap的btn-group最稳妥，需加role="group"和aria-label，容器内只混用一种按钮类型，圆角需分层设置，禁用/加载状态须批量js或css模拟，响应式换行需btn-toolbar或flex-wrap，移动端注意热区与键盘焦点管理。
直接说结论：HTML 本身没有“合并按钮”的语法，所谓“合并”实际是视觉与交互层面的样式控制和 DOM 结构组织，核心靠 div 容器 + CSS 类（如 btn-group）+ 合理的边框/圆角处理来实现连贯外观。
用 btn-group 容器包裹按钮是最稳妥的起点
Bootstrap 的 btn-group 是经过验证的按钮组方案，它自动抹平相邻按钮之间的圆角、消除默认间距，并统一 hover/focus 行为。不建议手写 flex 或 grid 模拟，除非你明确要绕开框架约束。
- 必须给容器加
role="group"和aria-label，否则屏幕阅读器无法识别这是逻辑组合 - 容器内只混用一种按钮类型：
<button></button>或<a></a>，不要交叉使用，否则tabindex和键盘导航会出问题 - 如果按钮文字长度差异大，
btn-group默认等宽拉伸可能让短文本按钮显得空荡——此时应加btn-group-sm或手动设flex: 0 0 auto防止撑开
自定义圆角渐变按钮组时，border-radius 必须分层控制
想让整组按钮有外层圆角（比如左上/右上圆角），又保持内部按钮直角衔接，不能只对容器设 border-radius——容器本身不渲染背景，起作用的是按钮的边框拼接。
- 第一个按钮设
border-top-left-radius: 8px+border-bottom-left-radius: 8px - 最后一个按钮设
border-top-right-radius: 8px+border-bottom-right-radius: 8px - 中间所有按钮设
border-radius: 0，并确保margin: 0和border: 1px solid transparent（防抗锯齿错位） - 如果用了 CSS 变量管理渐变色，记得在每个按钮上单独覆盖
--grad-start和--grad-end，否则整组会变成同一色带
多个按钮需要统一禁用或加载状态？别逐个操作 disabled
直接给 btn-group 容器加 disabled 属性无效——HTML 规范规定只有表单控件才响应该属性。正确做法是用 JavaScript 批量控制子按钮，或用 CSS 类做视觉模拟。
- 批量 JS 控制：
document.querySelectorAll('.btn-group button').forEach(b => b.disabled = true) - 视觉模拟禁用（无交互）：
.btn-group.disabled button { opacity: 0.5; pointer-events: none; }，但必须同步移除所有click监听器，否则事件仍可触发 - 加载中状态建议加
data-loading="true"属性，配合 CSSbutton[data-loading]::after插入旋转 SVG，比替换 innerText 更稳定
响应式换行时，btn-group 的断点行为容易被忽略
Bootstrap 的 btn-group 默认不换行；一旦父容器宽度不足，按钮会被压缩甚至重叠。这不是 bug，是设计预期——它本就面向工具栏类窄区域场景。
- 真需要折行，请改用
btn-toolbar套多层btn-group，每组独立控制换行 - 纯 CSS 方案：给容器设
display: flex; flex-wrap: wrap;，但必须为每个按钮设flex: 0 0 calc(50% - 4px)类似值，否则单个按钮可能占满一行 - 移动端慎用图标按钮组：小屏下
font-size缩小后，padding不足会导致点击热区过小，WCAG 2.1 要求最小 44×44px
最常被跳过的细节是键盘焦点管理：当按钮组被 Tab 进入时，焦点默认落在第一个按钮上，但用户按 → 键时，浏览器不会自动跳到下一个按钮——除非你手动实现 keydown 监听并 focus() 切换。这点在无障碍验收里几乎必卡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
