Bootstrap5 图表(Figures)

半兽人 发表于: 2020-07-27   最后更新时间: 2022-08-23 18:17:51  
{{totalSubscript}} 订阅, 3,148 游览

当你需要显示内容(例如带有可选标题的图片)时,可以考虑使用<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-end">A caption for the above image.</figcaption>
</figure>

在线运行

更新于 2022-08-23

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章