Bootstrap V5.3 中文手册

Figures 图文关联的展示

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

每当需要显示一段内容(例如带有可选标题的图像)时,请考虑使用 .<figure>

使用 included 和 classes 为 HTML5 和元素提供一些基线样式。图中的图像没有明确的大小,因此请务必将类添加到 ur 中以使其具有响应性。.figure.figure-img.figure-caption<figure><figcaption>.img-fluid<img>

占 位 符400×300
上图的标题。
[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>

使用我们的文本实用程序可以轻松对齐图形的标题。

占 位 符400×300
上图的标题。
[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 变量

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