View on GitHub

图片区(Figures)

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

当您需要显示一段内容（如带有可选标题的图像）时，请考虑使用 <figure>。

使用包括 .figure 、 .figure-img 和 .figure-caption 类为HTML5 <figure> 和 <figcaption> 元素提供一些基线样式。图中的图像没有显式大小，因此请确保将 .img-fluid 流体类添加到 <img> 中以使其具有响应性。

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>

使用我们的 文本实用程序很容易对齐图的标题。

Placeholder400x300
A caption for the above image.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>