怎么用Bootstrap制作单选框按钮-Bootstrap教程-PHP中文网

Bootstrap 5 不支持开箱即用的按钮式单选，需通过纯 CSS 隐藏原生 radio 并样式化 label 为按钮，或手动 JS 管理 btn-group 中 button 与 input 的状态同步。

怎么用bootstrap制作单选框按钮

Bootstrap 5 的 `form-check` 不支持原生按钮式单选？

Bootstrap 5 默认不提供类似 btn-group + type="radio" 的“按钮组单选”开箱即用方案。你看到的 form-check 是基于 + 的常规样式封装，不是按钮外观。真要按钮效果，得手动组合或改用 btn-group 配合自定义状态管理。

用 `btn-group` + `data-bs-toggle="buttons"` 实现（Bootstrap 5.3+）

这是最接近“按钮式单选”的官方路径，但要注意：它依赖 JavaScript 状态同步，且需手动初始化（5.3+ 已移除自动绑定）。

必须给每个添加 type="button" 和 data-bs-toggle="button"
用 包裹，并添加 data-bs-toggle="buttons"（注意是复数 buttons）
初始选中项需加 checked 属性到对应，同时给对应加 active 类


隐藏原生 ，用  视觉替代，靠 JS 同步值
<div class="btn-group" data-bs-toggle="buttons">
  <input type="radio" name="options" id="option1" value="1" checked autocomplete="off"><label class="btn btn-outline-primary">
    <button type="button" class="btn btn-outline-primary active">选项一</button>
  </label>

  <input type="radio" name="options" id="option2" value="2" autocomplete="off"><label class="btn btn-outline-primary">
    <button type="button" class="btn btn-outline-primary">选项二</button>
  </label>
</div>
⚠️ 实际运行会发现点击无响应——因为 Bootstrap 5.3+ 移除了对 data-bs-toggle="buttons" 的默认 JS 支持。你得自己监听 click，手动切换 active 并设置对应 input 的 checked 属性。
更稳妥的做法：纯 CSS 模拟按钮外观 + 原生 radio
避开 JS 状态同步风险，直接用 CSS 把标准 form-check 改造成按钮样貌。关键点是隐藏原生 ，用  承担点击区域和视觉样式。

给  设 position: absolute; opacity: 0;

给  设 display: inline-flex; padding: 0.375rem 0.75rem; 及 border、border-radius 等按钮属性
用 input:checked + label 选择器控制选中态背景/边框
保留 name 和 value，表单提交完全正常

<div class="d-flex gap-2">
  <input type="radio" name="theme" id="light" value="light" checked style="position:absolute;opacity:0;"><label for="light" class="btn btn-outline-secondary">浅色</label>

  <input type="radio" name="theme" id="dark" value="dark" style="position:absolute;opacity:0;"><label for="dark" class="btn btn-outline-secondary">深色</label>
</div>
这样既不用写 JS，又完全兼容 Bootstrap 的按钮类（btn-primary、btn-sm 等），还能响应 :hover、:focus，表单验证也照常工作。

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										
为什么别用 Bootstrap 4 的 btn-group-toggle？
如果你查旧文档，会看到 Bootstrap 4 有 data-toggle="buttons" 和 .btn-group-toggle 类。但它在 5.x 中已被彻底移除，且存在严重缺陷：

不支持键盘操作（Tab 切换 + Space 选中）
无障碍属性缺失（没 aria-checked、role="radiogroup"）
移动端点击反馈延迟或失效
与现代表单库（如 React Hook Form）集成困难

强行降级或魔改 4.x 代码，后期维护成本远高于用纯 CSS 模拟或手写轻量 JS 控制。
真正麻烦的不是怎么画出按钮样子，而是让浏览器知道“这是单选控件”，并让屏幕阅读器、键盘用户、自动化测试都能正确识别状态。原生  是唯一被普遍支持的语义化基础，所有“按钮化”都该围绕它展开，而不是绕开它。