轮廓（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.

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

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

Sass

Variables

$figure-caption-font-size:          $small-font-size;
        $figure-caption-color:              $gray-600;