3.3 内容组件：表格图片与排版

3.3 内容组件：表格图片与排版

内容类组件处理「已经有的东西怎么展示」：表格（table）、图片（img-fluid、缩略图）、图注（figure）、引用与列表。它们的共同考题是窄屏退化——表格是横向滚动还是堆叠、图片是缩放还是裁切、长词是溢出还是折行。本节逐个断案。

位置：组件四案第三案。表格与图片是内容页的主体，退化策略选错，移动端体验一票否决。本节的裁决随后在第 7 章案例里直接复用。

案一：表格的窄屏退化

后台列表页六列数据，手机上要么横向滚动要么挤压换行。Bootstrap 的官方裁决是横向滚动：table-responsive 包一层滚动容器，且可带断点。

<!-- 全区间可横向滚动 -->
<div class="table-responsive">
  <table class="table table-striped table-hover align-middle">
    <thead>
      <tr><th scope="col">订单号</th><th scope="col">客户</th><th scope="col">金额</th>
          <th scope="col">状态</th><th scope="col">创建时间</th><th scope="col">操作</th></tr>
    </thead>
    <tbody>
      <tr><td>A-1042</td><td>观察站会员</td><td>256.00</td>
          <td><span class="badge text-bg-success">已支付</span></td><td>08-24 09:12</td><td>详情</td></tr>
      <tr><td>A-1041</td><td>访客</td><td>128.00</td>
          <td><span class="badge text-bg-warning">待支付</span></td><td>08-24 08:40</td><td>详情</td></tr>
    </tbody>
  </table>
</div>
<!-- 效果：手机上表格保持列结构，容器整体左右滑动；md 起空间充裕，滚动自然消失 -->
​

<!-- 断点版：md 以下才允许滚动，md 起直接铺开 -->
<div class="table-responsive-md">
  <table class="table table-bordered">
    <thead><tr><th>指标</th><th>本周</th><th>上周</th><th>环比</th></tr></thead>
    <tbody><tr><td>访问量</td><td>12040</td><td>10800</td><td>上升一成一</td></tr></tbody>
  </table>
</div>
<!-- 判读：table-responsive-md 等价于「md 起撤销滚动容器」，与栅格断点同源 -->
​

裁决口径：列结构有业务语义（金额对金额、状态对状态）判滚动；纯展示型两列表可判堆叠重排——后者 Bootstrap 没有内置类，用第 2 章显隐工具在窄屏换一组卡片式 DOM 即可，但注意 2.4 节的重复内容警告。align-middle 顺手把单元格垂直居中，状态列混排徽章时观感立正。

案二：图片的三种刑期

<!-- 一号判决：img-fluid —— 等比缩放，永不超容器 -->
<img src="photo-wide.jpg" class="img-fluid rounded" alt="产品全景图">
<!-- 效果：宽图在大屏按原始尺寸显示，窄屏等比缩小，高度随宽度自动收缩 -->

<!-- 二号判决：缩略图 —— 加内边距与边框的展示框 -->
<img src="cover-small.jpg" class="img-thumbnail" alt="课程封面">
<!-- 效果：白色相框效果，适合相册墙 -->

<!-- 三号判决：占位纵横比 —— ratio 家族，防止加载时布局跳动 -->
<div class="ratio ratio-16x9">
  <iframe src="player.html" title="课程视频"></iframe>
</div>
<!-- 效果：容器按 16 比 9 恒定纵横比预留空间，视频加载前后高度不变 -->
​

img-fluid 的本质是 max-width: 100%; height: auto 两条规则。它解决「宽图撑破容器」，不解决「容器本身多高」——封面墙这类需要统一高度的场合，交给 ratio-* 预留纵横比，或第 4 章的尺寸工具裁切。

<!-- 图注组合：figure 与 figcaption -->
<figure class="figure">
  <img src="chart-breakpoints.png" class="figure-img img-fluid rounded" alt="断点命中统计">
  <figcaption class="figure-caption text-end">数据口径：最近三十天全站采样</figcaption>
</figure>
<!-- 效果：图与注解绑成一个整体，注解右对齐，随图一起缩放 -->
​

案三：排版内容的长词与引用

<!-- 长串字符（URL、哈希值）在窄屏的两种下场 -->
<p class="text-break">文件指纹 e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855</p>
<!-- 效果：text-break 允许在任意字符处折行，避免撑破正文列 -->

<!-- 引用块与列表的去装饰 -->
<blockquote class="blockquote">
  <p>布局的争议，最终都要折算成十二列上的证据。</p>
</blockquote>
<blockquote class="blockquote">
  <p class="mb-0">栅格管分地，flex 管对齐。</p>
  <footer class="blockquote-footer">本册 2.3 节</footer>
</blockquote>
<ul class="list-unstyled">
  <li>无样式列表：常用于页脚链接组</li>
  <li>配合 list-inline 可做行内标签</li>
</ul>
​

text-break 是中文语境容易忽略、英文技术文档必备的判决：默认折行规则不认英文长串里的断点，没有它，一串哈希能把整栏撑出横向滚动。

💡 关键直觉：内容组件的断点行为几乎都不是自己实现的——表格滚动靠包装容器，图片缩放靠 max-width 百分比，图注随行靠普通文档流。看穿这一点，「组件」就还原成了几条普通 CSS 规则，排错不再有神秘感。

结案要点

• 表格窄屏默认判横向滚动：table-responsive 全区间、table-responsive-{bp} 到档撤销；
• img-fluid 管等比缩放，统一高度交给 ratio-* 或尺寸工具；
• 长串字符记得 text-break，中文正文与英文技术内容混排时尤其要；
• 图注用 figure 家族绑定成组，引用与列表去装饰类按需取用。

第四案收编弹层与杂项：modal、toast、卡片、徽章们。