Bootstrap-v5-页面内容（画像）

一、画像

通过 Bootstrap 的画像（figure）组件来显示相关联的图片和文本。.figure、.figure-img 和 .figure-caption 类为 HTML5 的 <figure> 和 <figcaption> 元素提供了一些基本样式。<figure> 标签内所包含的图片如果没有明确地设置尺寸的话，请务必为 <img>标签添加 .img-fluid 类，使其支持响应式布局。任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure> 标签。

 

二、实例

<figure class="figure">
  <img src="https://img4.51tietu.net/pic/2016-072501/20160725010538cxjz3mittxf.jpg" class="figure-img img-fluid rounded" >
  <figcaption class="figure-caption">这是一个画像</figcaption>
</figure>

<figure class="figure">
  <img src="https://img4.51tietu.net/pic/2016-072501/20160725010538cxjz3mittxf.jpg" class="figure-img img-fluid rounded" >
  <figcaption class="figure-caption text-end">这也是一个画像</figcaption>
</figure>