Bootstrap 无现成价格表组件，但可用card+row+col构建响应式结构；推荐方案用border-primary border-3和shadow-sm突出，价格用display-6 fw-bold强调，移动端用collapse收起长列表。
Bootstrap 本身不提供现成的“价格表”组件，但用它的栅格、卡片和工具类能快速搭出响应式价格表——关键不是套模板，而是控制好间距、断点和交互状态。
用 card + row + col 搭结构
别硬套旧版 panel 或第三方插件。Bootstrap 5+ 推荐用 card 作为单个价格区块容器，外层用 row 和 col 控制排列与响应行为。
- 每列放一个
card，用col-md-4实现三栏（桌面），col-12自动堆叠（手机） - 避免给
card设固定高度——价格项内容长度常不同，强行等高会导致文字截断或空白过多 -
card-body内部用text-center对齐标题/价格，用list-unstyled清除列表默认样式
示例结构：
<div class="row">
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-header text-center"><strong>基础版</strong></div>
<div class="card-body">
<h4 class="card-title"><strong>$9</strong>/月</h4>
<ul class="list-unstyled">
<li>最多 3 个项目</li>
<li>基础支持</li>
</ul>
</div>
<div class="card-footer"><button class="btn btn-outline-primary">选择</button></div>
</div>
</div>
</div>
让“推荐”项视觉突出：用 border-primary 和 shadow
用户扫一眼要立刻识别出主推方案。Bootstrap 的边框和阴影工具类比自定义 CSS 更轻量、更可控。
- 给推荐卡片加
border border-primary border-3（注意：Bootstrap 5.3+ 才支持border-3；若用老版本，需额外写style="border-width: 3px"） - 加
shadow-sm或shadow提升层级感，但别用shadow-lg——太重，像模态框 - 慎用
bg-primary填充整个卡片：文字可读性会崩，尤其在深色模式下
价格数字大而清晰：靠 display-6 和 fw-bold
价格是决策焦点，但 Bootstrap 默认字号在卡片里不够跳。不能只靠 h1～h6，它们语义不对且响应行为不可控。
- 用
display-6（Bootstrap 5+）配合fw-bold，比h2更专注视觉表达 - 美元符号和单位（如
/月）用小号字体：加small类或text-muted，避免和主价格抢 attention - 别把价格包在
h2里再设aria-label——屏幕阅读器会读成“heading level 2”，干扰语义流
移动端折叠细节项：用 collapse 而非 JS 手写展开
当功能列表太长，桌面显示全量、移动端默认收起几项，这是合理做法。Bootstrap 的 collapse 是最省心的选择。
- 给长列表外层加
id="features-collapse"，触发按钮加data-bs-toggle="collapse" data-bs-target="#features-collapse" - 别忘了加
show类控制初始状态（桌面显示，移动端隐藏需配合媒体查询或 JS 切换） - 常见坑：
collapse默认不带动画高度过渡，得确保父容器没设overflow: hidden，否则动画卡住
事情说清了就结束——价格表真正的难点不在样式，而在信息密度控制：删掉“免费试用”按钮旁的“无需信用卡”，用户反而更信你。
