Skip to main content Skip to docs navigation
View on GitHub

画像(Figure)

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

On this page

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

.figure.figure-img.figure-caption 类为 HTML5 的 <figure><figcaption> 元素提供了一些基本样式。<figure> 标签内所包含的图片如果没有明确地设置尺寸的话,请务必为 <img>标签添加 .img-fluid 类,使其支持响应式布局。

Placeholder400x300
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> 所包含的标题。

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