Skip to main content Skip to docs navigation

在Bootstrap中使用figure组件显示相关图像和文本的文档和示例。

On this page

任何时候你需要显示一段内容——比如一张带有可选标题的图片,都可以考虑使用<figure>

使用包含的.figure.figure-img.figure-caption类为HTML5 <figure><figcaption>元素提供一些基础样式。 图中的图像没有明确的大小,所以一定要将.img-fluid类添加到<img>中,使其具有响应性。

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

使用我们的文本工具集可以很容易地对齐图的标题。

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

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);