图文
在 Bootstrap 中使用图形组件显示相关图像和文本的文档和示例。
在此页
任何时候你需要显示一段内容——比如带有可选标题的图像,考虑使用<figure>
.
使用包含.figure
的.figure-img
和.figure-caption
类为 HTML5<figure>
和<figcaption>
元素提供一些基线样式。图形中的图像没有明确的大小,因此请务必将.img-fluid
类添加到您的类中<img>
以使其响应。
<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 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
变量
SASS$figure-caption-font-size: $small-font-size;
$figure-caption-color: var(--#{$prefix}secondary-color);