使用Bootstrap中的Figure组件显示相关图像和文本的文档和示例。
每当您需要显示内容（例如带有可选标题的图像）时,请考虑使用 <figure>.
使用随附的 .figure,.figure-img and .figure-caption 类为HTML5提供一些基线样式 <figure> and <figcaption> 元素。 图片中的图片没有明确的尺寸,因此请务必添加 .img-fluid 给你上课 <img> 使它响应。
<figure class="figure">
<svg aria-label="Placeholder: 400x300" class="bd-placeholder-img figure-img img-fluid rounded" focusable="false" height="300" preserveaspectratio="xMidYMid slice" role="img" width="400" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 400x300 </text></svg>
<figcaption class="figure-caption"> 上图的标题。 </figcaption>
</figure>我们可以轻松地将人物的标题对齐 文字工具 .
<figure class="figure">
<svg aria-label="Placeholder: 400x300" class="bd-placeholder-img figure-img img-fluid rounded" focusable="false" height="300" preserveaspectratio="xMidYMid slice" role="img" width="400" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 400x300 </text></svg>
<figcaption class="figure-caption text-right"> 上图的标题。 </figcaption>
</figure>