图片说明

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

本页目录

每当你需要显示一段内容——比如带可选说明的图片时，考虑使用 <figure>。

使用随附的 .figure, .figure-img 和 .figure-caption 为 HTML5 提供一些基础样式的类 <figure> 和 <figcaption> 元素。图中的图像没有明确的大小，因此请确保添加 .img-fluid 到你的类 <img> 使其具有响应性。

上图的说明文字。

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>

使用我们的文本工具，对图表说明进行对齐很容易。

上图的说明文字。

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

scss/_variables.scss

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