Bootstrap无原生标签云组件，需用.badge或.btn手动构建，通过fs-*类、内联style控制字号颜色，配合d-flex flex-wrap gap-1布局，并用对数缩放处理权重实现视觉差异。
Bootstrap 本身不提供原生的“标签云”（tag cloud）组件，也没有 class="tag-cloud" 这样的内置类。想用 Bootstrap 实现标签云，得靠 CSS 手动控制字号、颜色、间距，再配合 HTML 结构和可选的 JS 动态计算权重 —— 不是调个组件就完事。
用 .badge 或 .btn 搭建基础标签结构
Bootstrap 的 .badge（v5+）或 .btn（带 btn-sm）是最接近标签云视觉效果的现成样式。它们自带圆角、内边距和响应式排版，但默认大小一致，需手动加权。
- 别用
.list-group：它强制垂直堆叠，破坏云状自由布局 - 优先用
包裹文字，而非—— 后者默认带下划线和颜色干扰，若需跳转再加href - 给容器加
class="d-flex flex-wrap gap-1"（v5.3+）或class="d-flex flex-wrap"+ 手动margin控制间距
示例结构：
<div class="d-flex flex-wrap gap-1"> <span class="badge bg-primary fs-6">JavaScript</span> <span class="badge bg-secondary fs-4">React</span> <span class="badge bg-success fs-2">CSS</span> </div>
按频次/权重动态调整 font-size 和 bg-color
标签云的核心是“权重可视化”，而 Bootstrap 的 fs-* 类（如 fs-1～fs-6）只覆盖 6 级字号，不够细粒度；bg-* 色板也仅限预设色。真要反映数据差异，得脱离纯 class 控制。
- 用内联
style="font-size: 1.4rem; background-color: #0d6efd;"覆盖fs-*和bg-*，更灵活 - 避免直接写死像素值，推荐用
rem或em，便于整体缩放 - 颜色建议用 HSL 动态生成（如
hsl(200, 70%, 60%)），比切换bg-primary/bg-warning更连贯 - 若用 JS 计算权重，注意归一化：取最大频次为基准，其余按比例缩放
font-size（例如 min 0.8rem，max 2.2rem）
响应式断点下避免换行错乱或重叠
标签云在小屏上容易挤成一团或单列瀑布，失去“云”的松散感。Bootstrap 的栅格系统对这种自由流式布局帮助有限，得靠媒体查询微调。
- 给容器加
class="flex-wrap"是必须的，但默认flex-basis为auto，导致小标签被压缩 - 在
@media (max-width: 576px)下，把gap从0.5rem降到0.25rem，并限制单行最多显示 3–4 个标签（用flex-basis: calc(25% - 0.25rem)） - 禁用
white-space: nowrap（Bootstrap 默认没设，但自定义时易误加），否则标签会溢出容器 - 测试时用浏览器设备模拟器拉宽高比，尤其关注 375px 宽度下的换行位置
真正难的不是堆出一堆带颜色的字，而是让字号变化符合感知权重 —— 人眼对大小差异不敏感，1.2rem 和 1.3rem 几乎看不出区别，至少拉开 0.4rem 以上才有意义。另外，如果后端返回的是原始频次（比如 1、5、23、197），别直接映射到 font-size，先做对数缩放或分段映射，否则高频词会大得突兀。
