第五章 BootStrap基本CSS样式 - 《BootStrap4响应式开发实战》

5.1 排版
5.2 代码
5.3 图片
- 5.3.1 响应式图片
  - SVG 在 IE 10 上的表现
5.3.2 缩略图
5.3.3 对齐
5.3.4 Picture 标签
5.4 表格
5.4.9 标题
5.4.10 响应式设计的表格
- 垂直截断
5.4.10.1 始终水平滚动
5.4.10.2 选择性设置水平滚动
5.5 图文区 - Figures

5.1 排版

Bootstrap 排版功能，包括全局设置，标题，正文，列表等。

5.1.1 全局设定

Bootstrap 设置基本的全局显示，排版和链接样式。当需要更多控制时，请查看文本工具。

使用本机字体为每个操作系统和设备选择最佳字体系列。
更具包容性和可访问的缩放设置，我们假设浏览器默认根字体大小（通常为16px），以便访问者可以根据需要自定义其浏览器默认值。
使用$font-family-base，$font-size-base和$$line-height-base属性作为应用于<body>的排版基础。
通过 $link-color 设置全局链接颜色，并仅在 :hover 上应用链接下划线。
使用$body-bg在 background-color 上设置背景颜色（默认情况下为#fff）。
这些样式可以在 _reboot.scss 中找到，全局变量在 _variables.scss 中定义。确保在 $font-size-base 中设置 rem。

5.1.2 标题

所有HTML标题<h1>到<h6>都可用。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

5.1.2.1 定制标题样式

使用包含的工具类创建 Bootstrap 3 的小辅助标题文本。

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

5.1.3 超大标题

传统的标题元素旨在最好地处理页面内容。当你需要更突出标题时，请考虑使用超大标题 - 更大，更醒目。

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

5.1.4 引言

可以使用 .lead 来添加引言内容（字体比标题小一些）。

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

5.1.5 内联文本元素

针对常见内联HTML5元素的样式。
You can use the mark tag to text.
~~This line of text is meant to be treated as deleted text.~~
~~This line of text is meant to be treated as no longer accurate.~~
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.mark和.small类也可用于应用与<mark>和<small>相同的样式，同时避免标记带来的任何不必要的语义含义。
虽然上面没有展示，但可以在HTML5中使用<b>和 <i> 。 <b>旨在突出显示单词或短语而不会传达额外的重要性，而 <i>主要用于声音，技术术语等。

5.1.6 缩写

用于缩写和首字母缩略词的HTML的 <abbr> 元素的程式化实现，以显示悬停时的扩展版本。缩写具有默认下划线并获得帮助光标以提供有关悬停和辅助技术用户的其他上下文。
将.initialism添加到缩写中以获得略小的字体大小。

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

5.1.7 引用

用于引用文档中其他来源的内容块。将任何HTML包含在<blockquote class="blockquote">里作为引用。

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

5.1.7.1 署名

在 <footer class="blockquote-footer"> 里添加需要署名的内容。并在 <cite> 里添加作者。

<blockquote class="blockquote">
  <p class="mb-0">我们中国的最伟大最永久，而且最普遍的“艺术”是男人扮女人。</p>
  <footer class="blockquote-footer">来自 <cite title="Source Title">鲁迅</cite></footer>
</blockquote>

5.1.7.2 对齐

根据需要使用文本工具来更改 blockquote 的对齐方式。

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

5.1.8 列表

5.1.8.1 无特效列表

删除列表项上的默认列表样式和左边距（仅限直接子项）。仅适用于直接子列表项，这意味着你还需要为任何嵌套列表添加类。

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

5.1.8.2 行内列表

删除列表的项目符号并使用两个类的组合应用一些微小的边距，使用 .list-inline和.list-inline-item 来实现。

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

5.1.8.3 描述内容的对齐

使用栅格系统的预定义类来对内容进行水平对齐。对于较长的内容，你可以选择添加 .text-truncate 类来省略过长的内容。

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>
  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

5.2 代码

这里教你如何使用 bootstrap 来展示多行代码

5.2.1 行内代码

在 <code> 里编写行内代码，请务必转义HTML的尖括号。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

5.2.2 大段引用

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<a name="variables"></a>
### 5.2.3 变量[](http://bs4.ntp.org.cn/pages/content.html#variables)
使用 `<var>` 标记变量。<br />
```html
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

5.2.3 按钮

你可以使用 <kbd> 来标记键盘上的按钮，这看起来很生动。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

5.2.4 输出

使用 <samp> 标签来展示可能的输出结果

<samp>This text is meant to be treated as sample output from a computer program.</samp>

5.3 图片

添加响应式设计的图片，这很简单，只需要给图片加上一些类就可以了。

5.3.1 响应式图片

Bootstrap 中，给图片添加 .img-fluid 类，这样它就变成了一张响应式设计的图片。另外添加 max-width: 100%; 和 height: auto; 可以让图片根据父元素的大小进行等比例缩放。

<img src="..." class="img-fluid" alt="Responsive image">

SVG 在 IE 10 上的表现

在Internet Explorer 10中，具有 .img-fluid 的SVG图像的大小不成比例。要解决此问题，请添加 width: 100% \9; 。由于此调整不能正确地调整其他图像格式的大小，因此Bootstrap不会自动应用它。

5.3.2 缩略图

除了使用 border-radius 工具, 你还可以使用 .img-thumbnail 类来设置一个1像素宽度的边框。

<img src="..." alt="..." class="img-thumbnail">

5.3.3 对齐

给图像设置浮动类进行对齐。块级图像可以使用 .mx-auto margin 工具居中。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

5.3.4 Picture 标签

如果使用 <picture> 元素为特定的 <img> 指定多个<source>元素，请确保将 <img> 类添加到 <img> 而不是 <picture>标记。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

5.4 表格

创建基于 Bootstrap 的表格。

5.4.1 例子

由于表格在日历和日期选择器等第三方小部件中的广泛使用，我们设计的表格是可选择的。只需将基类 .table 添加到任何 <table> ，然后就可以使用自定义样式或各种包含的修饰符类进行扩展。
使用最基本的.table标记，下面的例子是基于.table-*的表格在 Bootstrap 中的外观。所有表格样式都在 Bootstrap 4 中继承，这意味着任何嵌套表格的样式都与父表格相同。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

你还可以使用 .table-dark 在深色背景上使用浅色文本反转颜色。

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.2 表头选项

与表格和暗表类似，使用修饰符类 .thead-light 或 .thead-dark 使 <thead> 显示为浅灰色或深灰色。

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.3 带有条纹的行

使用 .table-striped 来给 <tbody> 的所有行添加条纹效果。

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.4 表格边框

加上这个 .table-bordered 类可以给表格内的所有单元添加边框。

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.5 去除表格边框

使用 .table-borderless 类来移除表格里的所有边框。

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderless 还可以用在黑色模式。

<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.6 高亮

使用 .table-hover 类可以使 <tbody> 里的内容在获得鼠标停留时高亮显示。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.7 更小的表格

使用 .table-sm 类可以让表格所有单元的间距缩小一半。

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.8 表格工具类

使用表格工具类可以给表格的列或者行单独上色。

<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

暗色表格不提供常规表格背景类，但是，你可以使用文本或背景工具来实现类似的样式。

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

使用辅助技术传达内容

使用颜色添加含义仅提供视觉指示，这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。确保颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过其他方式包含，例如使用 .sr-only 类隐藏的附加文本。
通过使用 .table-responsive{-sm|-md|-lg|-xl} 配合任意 .table 来创建响应式表，使表在每个最大宽度断点处水平滚动，最多（但不包括）576px，768px，分别为992px和1120px。
请注意，由于浏览器当前不支持范围上下文查询，因此我们通过使用更高的值来解决具有小数宽度的 min- 和 max-前缀和 viewport 的限制（例如，在高dpi设备的某些条件下可能会出现这种情况）这些比较的精确度。

5.4.9 标题

<caption>的功能类似于表格的标题。它可以帮助屏幕阅读器的用户找到一张桌子，了解它的含义，并决定是否要阅读它。

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5.4.10 响应式设计的表格

响应式设计的表格允许水平滚动。通过使用 .table 包装 .table-responsive ，使所有 viewport 都能响应。或者，使用 .table-responsive{-sm|-md|-lg|-xl}选择一个最大断点，通过该断点可以获得响应。
.table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

垂直截断

响应表使用 overflow-y: hidden ，它会截断超出表格底部或顶部边缘的任何内容。特别是，这可以截断下拉菜单和其他第三方小部件。

5.4.10.1 始终水平滚动

给需要水平滚动的表添加 .table-responsive 类。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

5.4.10.2 选择性设置水平滚动

使用 .table-responsive{-sm|-md|-lg|-xl} 类来使表格再某些特定的情况下变成水平滚动的设计。
在响应样式应用于特定 viewport 宽度之前，这些表格可能会崩溃。

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

5.5 图文区 - Figures

展示图片及其说明
如果需要显示带有标题的图像，请考虑使用<figure>（一种全新的玩法）。
使用包含的 .figure ， .figure-img 和 .figure-caption 类为HTML5 <figure> 和 <figcaption> 元素提供一些基本样式。 <figure> 中的图像没有明确的大小，因此请务必将 .img-fluid 类添加到 <img> 以使其成为响应式设计的图像。

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

使用文本工具可以轻松对齐 figure 中标题。

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>