数字（Figures）

在Bootstrap中使用图形组件显示相关图像和文本的文档和示例。

当前页

每当需要显示一段内容（例如带有可选标题的图像）时，请考虑使用<figure>。

使用包含的.figure、.figure-img和.figure-caption类为 HTML5 <figure>和<figcaption>元素提供一些基线样式。图中的图像没有明确的大小，因此请务必将.img-fluid类添加到<img>中以使其具有响应性。

A caption for the above image.

html

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

使用我们的文本实用程序对齐图形的标题很容易。

A caption for the above image.

html

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

CSS

Sass 变量

scss/_variables.scss

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);