轮廓(Figures)

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

On this page

轮廓

任何时候需要显示一段内容(例如带有可选标题的图片),请使用 <figure>标签。

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

事实上,轮廓组件不仅用于图片,在前一节文字排版部分,引用来源部分就已经使用了轮廓组件。

Placeholder 400x300
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> 所包含的标题。

Placeholder 400x300
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;
返回顶部