图文区 - Figures

展示图片及其说明

如果需要显示带有标题的图像,请考虑使用<figure>(一种全新的玩法)。

使用包含的 .figure.figure-img.figure-caption 类为HTML5 <figure><figcaption> 元素提供一些基本样式。 <figure> 中的图像没有明确的大小,因此请务必将 .img-fluid 类添加到 <img> 以使其成为响应式设计的图像。

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

使用文本工具可以轻松对齐 figure 中标题。

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>