Source

数字

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

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

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

400x300
上图的标题。 
<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>

使用我们的文本实用程序可以轻松对齐图形的标题。

400x300
上图的标题。 
<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>