Bootstrap5 图表(Figures)

半兽人 发表于: 2020-07-27   最后更新时间: 2020-07-27  

当你需要显示内容(例如带有可选标题的图片)时,可以考虑使用<figure>

使用包含的.fig.fig-img.fig-caption为HTML5<figure><figcaption>元素提供一些基本样式。图表中的图片没有明确的大小,所以请确保在你的<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>

在线运行

使用我们的文本实用工具。可以很容易地对齐图表里的说明。

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

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 表格(Tables)
下一条: Bootstrap5 格子(Checks)