轮廓（Figures）
通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。本文档包含了轮廓（figure）组件的说明和示例。
On this page
轮廓
任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure>标签。
使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5 <figure>和<figcaption>标签一些基本样式设定。图片没有明确尺寸，请务必在<img>标签加上 .img-fluid类别设定为响应式图片。
事实上，轮廓组件不仅用于图片，在前一节文字排版部分，引用来源部分就已经使用了轮廓组件。
<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> 所包含的标题。
<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;