runoops.com

Bootstrap5 画像(Figure)

当您需要显示一段内容(如带有可选标题的图像)时,请考虑使用<figure>

使用包括 .figure.figure-img 和 .figure-caption 类为HTML5<figure> 和 <figcaption>元素提供一些基础样式。 图中的图像没有显式大小,因此请确保将 .img-fluid 类添加到 <img>中以使其具有响应性。

<figure class="figure">
    <img src="https://runoops.com/wp-content/uploads/2022/06/cinqueterre.jpg" 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>

Captcha Code

0 笔记

分享笔记

Inline Feedbacks
View all notes