BootStrap框架模块：BootStrap4基础

BootStrap简介Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设

脑袋不灵光的小白羊

4721人浏览 · 2022-01-14 14:06:28

脑袋不灵光的小白羊 · 2022-01-14 14:06:28 发布

BootStrap简介

Bootstrap 是全球最受欢迎的前端开源工具库，它支持Sass混合、响应式矩阵系统和它自带的库分量和分量的JavaScript。基于Bootstrap提供强大的功能，能够让你快速设计和自定义你的网站。

利用 BootstrapCDN 和一个最简单的快速上手 Bootstrap。Bostrap 是全球最流行的前端框架，用于制造响应式模板、移动设备优先的 WEB 站点。

BootStrap中文官网

第一章BootStrap4基础

下载Bootstrap以获取经过编译的CSS和JavaScript文件，以及源码。或者使用你所擅长的包管理器（npm、 RubyGems 等）加载 Bootstrap。

编译的CSS和JS文件

下载Bootstrap.5.0的预编译文件，这样就可以轻松将其直接加入到你的预编译版本4中，包括：

编译并压缩（minified）之后的 CSS 文件（请参见 CSS 文件对比）编译并压缩（minified 之后的 JavaScript 插件）不包含文档、源文件或插件的 JavaScript 依赖项（jQuery 和 Popper.js）。

1.1 BootStrap 布局

Containers

Container(容器)是Bootstrap中最基本的布局元素，在使用bootstrap的默认网格系统时，容器是必需的。容器用于在其中容纳，填充和使内容居中。可以嵌套容器，但是大多数布局不需要嵌套容器。

Bootstrap带有三个不同的容器：

.container: 它max-width在每个响应断点处设置一个
.container-fluid: 这是width: 100%所有断点
.container-{breakpoint}: width: 100%直到指定的断点为止

固定丰富的容器：

与strap3一样，默认.everyone类是响应式，固定丰富的容器，这意味着它max - width在断点处更改。

<div class="container">
  <!-- 内容 -->
</div>

container-fluid:

使用.container-fluid了全宽的容器，跨越视口的整个宽度。

<div class="container-fluid">
  ...
</div>

响应

响应容器是Bootstrap v4.4中的新增功能。它们允许您指定100％宽的类，直到达到指定的断点（不同屏幕的比例的节点）为止，此后，我们max-width对每个较高的断点应用。例如:.container-sm100％宽开始直到sm到达断点，在那里将扩大同md，lg和xl。

<div class="container-sm">100% 直到达到指定sm断点为止</div>
<div class="container-md">100% 直到达到指定md断点为止</div>
<div class="container-lg">100% 直到达到指定lg断点为止</div>
<div class="container-xl">100% 直到达到指定xl断点为止</div>

响应断点

由于Bootstrap首先开发为移动设备，其使用了少数媒体查询来为布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们随着视口的变化按比例放大元素。

Bootstrap主要在源Sass文件中使用以下媒体查询范围（或断点）作为布局，网格系统和组件。

//超小设备  (手机 phones, 576px 起)
@media (min-width: 576px) { ... }

//小型设备  (平板电脑, 768px 起)
@media (min-width: 768px) { ... }

//中型设备  (台式电脑, 992px and 起)
@media (min-width: 992px) { ... }

//大型设备  (大台式电脑, 1200px 起)
@media (min-width: 1200px) { ... }

1.2 栅格系统介绍

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
  </div>
</div>

上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。

让我们来慢慢揭开它的工作原理：

栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container(严格意义上也包括.container-fluid，后文相同不再备注-译者)应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。
这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例，请参阅本文档自动布局列部分。
你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。
.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
列具有水平padding定义，用于创建列与列之的间隙。
.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...
总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大（大、特大也可以称为宽、超宽）.col-xl-。
栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。
用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用Sass mixins来进行更多的语义标记满足开发需要。

BootStrap3栅格系统和BootStrap4栅格系统的区别

bootstrap4它的源码是采用 Sass 语言编写的

使用flex的布局方式

全部使用了rem为单位（除了部分的margin和padding使用px）

Bootstrap 4 共有5种栅格类，依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)

偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。

bootstrap3使用float的布局方式

bootstrap3 共有4种栅格类，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)

bootstrap3里面使用push和pull向左和向右移动

栅格选项

Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。

通过一个简单的表格查看Bootstrap的网格系统在各种屏幕和设备上的细节约定：
在这里插入图片描述

1.3 栅格系统常用属性

利用栅格断点特性进行排版，可以简化列的大小，而不需要批定显式的列宽，如强制写为：.col-sm-6。

自动布局列

等宽布局

下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽列可以分成多行,下面是等宽列两行的处理方法，引用w-100进行切割分行：

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

设置一列宽度

在Flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统布局表现，请使用.col和.col-*类。后者是用于指定特定大小的(如.col-6)，否则使用.col就可以了。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

水平堆砌

使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其它媒体查询断点宽度，这个栅格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col-后，自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果：

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

混合布局

设计师们当然不会简单的把各个屏幕下的栅格都做成一样，那将是单调乏味的，所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理：

<!-- 定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列 -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

1.4 BootStrap内容之排版

初始化与CSS重置

Bootstrap致力于提供一个简洁、优雅的的基础，以此作为立足点。我们使用Reboot，把一系列元素特征的CSS修改放在一个文件里。参考官网文档了解这些知识

CSS选择器也支持以.h1 -- .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-译者注），效果如下：

<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>

自定义标题备注

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本，如下所示：

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

显式标题

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式，则可以用下面方法：

<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>

文本内联元素

HTML5 文本元素的常用内联表现方法也适用于BootStrap4。

<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>

Blockquote 来源备注与引用

引用文档中另一个来源的内容块，，请在一段HTML外面包裹 <blockquote class="blockquote">，作为引用。为了显示直接引用，我们推荐使用p作为子级包裹容器，这在 HTML 规范中也有多个变通方法，下面逐一讲解。

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

底部备注来源

<footer class="blockquote-footer"> 用于标识来源，一般用于页脚（所以有*-footer)，然后配合 <cite>使用。

<blockquote class="blockquote">
  <p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

对齐处理

如果需要居中对齐或右对齐，使用.text-center、.text-right方法配合即可，如下两示例：

<blockquote class="blockquote text-center">
  <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

<blockquote class="blockquote text-right">
  <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

列表

在ul(或ol）上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距（只针对直接子元素），这只生效于在直接子列表项目上，不影响你嵌套的子列表。

<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>

分行或单行多列并排

使用.list-inline 、 .list-inline-item结合，可以实现列表逐行显示（默认不引用且无父元素影响也是逐行显示）、或单行并多列并排（遵循从左对右的原则、并清除margin方法）。

<ul class="list-inline">
  <li class="list-inline">列表之一</li>
  <li class="list-inline">列表之二</li>
  <li class="list-inline">列表之三</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">列表之一</li>
  <li class="list-inline-item">列表之二</li>
  <li class="list-inline-item">列表之三</li>
</ul>

1.5 BootStrap内容之代码和图片

代码

基于Bootstrap显示行内嵌入的内联代码和多行代码段的文档和示例。

内联代码

用<code>包裹内联代码片断，勿忘转义HTML尖括号。

示例： <code>&lt;section&gt;</code> 代码嵌入到文本段中。

代码块

使用 <pre>标签可以包裹代码块，同样HTML的尖托号需要进行义，你还可以使用 .pre-scrollable CSS样式，实现垂直滚动的效果，它默认提供350px高度限制、Y轴垂直滚动效果

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Var变量

推荐使用 <var>标签包裹标示变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

用户输入（键盘动作提示）

使用 <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>

示例标注

<samp>标签代表这是一个示例。

<samp>这是一个代码示例.</samp>

图片

BootStrap图片处理的示例和文档，由于我们为图片添加了轻量级的无干扰样式和响应式行为，因此在BootStrap设计中引用图片可以更加方便且不会轻易撑破其它元素。

响应式图片

在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

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

缩略图处理

您可以使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式（你也可以使用系统提供的边隙间距方法，如.p-1再加上边框颜色定义达成），效果如下：

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

图像对齐处理

对于.block属性的块状图片，我们也可以使用浮动定义规范或文字对齐规范，来实现对图像的对齐、浮动控制，带.block块属性的图片，可以自动获得 .mx-auto 的位置对齐属性.

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

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

1.6 BootStrap内容之表格和图文框

使用最基本的表格标记，下面是Bootstrap中 .table表格的样式（基本样式）， Bootstrap 4继承了所有的表格样式，这意味着任何嵌套表格都将以与父类型相同的方式进行样式化。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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-darkclass选择器来产生颜色反转对比效果，即深色背景和浅色文本.

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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>

Head表头处理

与预设的反转样式相似，使用.thead-light 或.thead-dark 中的一个样式，就能使 <thead>区显示出浅黑或深灰。

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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 Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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-striped 样式定义 <tbody>，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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-bordered 类可以产生表格边框与间隙系统

<table class="table table-bordered">
  <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-hover 定义到 <tbody>上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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-sm 可以将表格的padding值缩减一半，使表格更加紧凑。

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</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>

图文框

示例

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

结合我们的文本实用工具可以轻松对齐图文框的说明文字（比如右对齐、左对齐，只要引用.text-*方法即可-译者注）。

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>