Figures

Documentation and examples for displaying related images and text with the figure component in Bootstrap.

任何时候需要显示一段内容（如带有可选标题的图像），请使用 <figure> 标签。

.figure、.figure-img 和 .figure-caption 类为 HTML5 的 <figure> 和 <figcaption> 元素提供了一些基本样式。<figure> 标签中的图像如果没有设置明确的尺寸，请务必为 <img> 添加 .img-fluid 类，使其支持响应式布局。

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>

Aligning the figure’s caption is easy with our text utilities.

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>