Bootstrap画像

Bootstrap 框架提供了画像（figure）组件，通过 Bootstrap 的画像组件来显示相关联的图片和文本。本教程包含了画像组件的说明和相关示例。

一、显示图片标题

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

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

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

二、文本对齐

通过使用 Bootstrap 提供的文本工具类可以轻松对齐 <figure> 所包含的标题。

<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>