可选标题的图像Figures

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

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

使用随附的.figure.figure-img.figure-caption类为HTML5<figure><figcaption>元素提供一些基线样式。 图片中的图片没有明确的尺寸,因此请确保在您的中添加.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>

使用我们的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>