通过 Bootstrap 的画像(figure)组件来显示相关联的图片和文本。本文档包含了画像(figure)组件的说明和示例。
任何时候需要显示一段内容(例如带有可选标题的图片),请使用 <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">上图的标题</figcaption> </figure>
通过使用我们提供的文本工具类可以轻松对齐 <figure>
所包含的标题。
<figure class="figure"> <img src="..." class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption text-end">上图的标题</figcaption> </figure>