轮廓（Figures）

通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。本文档包含了轮廓（figure）组件的说明和示例。

On this page

任何时候，如果您需要显示一段内容（如带有可选标题的图片），请考虑使用 <figure>。

使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5 <figure>和<figcaption>标签一些基本样式设定。图片没有明确尺寸，请务必在<img>标签加上 .img-fluid类别设定为响应式图片。

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>

通过使用我们提供的文本工具类可以轻松对齐 <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);