bootstrap 官方不提供 fab 组件，所有效果均需开发者用 position: fixed、.rounded-circle、.shadow 等手动实现；必须设 width/height 相等、z-index≥1060、适配安全区与点击热区。
bootstrap 本身没有 fab 组件
Bootstrap 官方 CSS 和 JS 中不提供 Floating Action Button（FAB）这个 UI 模式。它属于 Material Design 规范的产物，而 Bootstrap 是独立设计语言。强行套用 .btn-fab 或类似类名会失效——因为根本不存在。
- 所有“Bootstrap FAB”效果都是开发者用自定义 CSS + 基础按钮类（如
.btn、.btn-primary）手动实现的 - 不能依赖
bootstrap.bundle.min.js自动渲染或行为控制，FAB 的悬浮定位、点击反馈、z-index 层级全靠手写 - 如果你在第三方模板里看到
.fab类，那一定是作者自己加的，不是 Bootstrap 原生支持
用 position: fixed + margin 实现右下角悬浮按钮
这是最轻量、兼容性最好、也最可控的做法。核心是脱离文档流 + 精确锚定视口右下角。
- 必须用
position: fixed，不能用absolute（否则随滚动消失）或sticky（不适用于右下角固定） - 推荐使用
bottom: 20px和right: 20px，留出安全边距，避免遮挡移动端手势区域 - 务必加
z-index: 1050或更高（Bootstrap Modal 默认是 1050，FAB 至少要 ≥1060 才能浮在 modal 上面） - 按钮本身建议用
<button type="button" class="btn btn-primary"></button>，避免表单默认提交行为
<button type="button" class="btn btn-primary rounded-circle shadow" style="width: 56px; height: 56px; position: fixed; bottom: 20px; right: 20px; z-index: 1060;" aria-label="新增"><i class="fas fa-plus"></i></button>
图标、圆角、阴影这些细节决定是否“像 FAB”
FAB 的识别度不来自位置，而来自视觉特征：圆形、带阴影、有图标、无文字。Bootstrap 提供基础能力，但需组合使用。
-
.rounded-circle是必须的，Bootstrap 5 里它会让按钮变成正圆；别用.rounded-pill（椭圆）或只设border-radius: 50%（易受 padding 影响变形） -
.shadow或.shadow-sm提供基础浮起感；不要省略，否则看起来就是个贴在角落的普通按钮 - 图标必须用
<i></i>标签引入（比如 Font Awesome），且禁用文字内容；加aria-label保证可访问性 - 显式设置
width和height相等（如56px），否则.rounded-circle在内容撑开时会失效
移动端适配和点击热区容易被忽略
桌面端看着没问题，但在 iPhone 或安卓小屏上，56px 按钮可能太小、边缘太近、甚至被虚拟导航栏遮挡。
- 真机测试时重点看底部是否被 Android 底部导航条或 iOS 安全域裁切——可临时加
padding-bottom: env(safe-area-inset-bottom) - 触摸热区至少要保证
48×48px（WCAG 最小点击尺寸），所以实际按钮尺寸别小于48px，再小就难点准 - 如果页面有
overflow: hidden的父容器（比如某些 tab-pane 或 modal-body），fixed按钮会被裁掉——检查 computed styles，必要时把按钮挂到下 - 别给 FAB 加
:hover动画（比如 scale 变大），移动端没 hover 状态，反而造成误触发或卡顿
