Figures

使用 Bootstrap 的 figure 元件顯示相關圖片和文字的文件與範例。

本頁內容

當您需要顯示一段內容——例如帶有可選標題的圖片時，請考慮使用 <figure>。

使用包含的 .figure、.figure-img 和 .figure-caption 類別為 HTML5 的 <figure> 和 <figcaption> 元素提供一些基準樣式。figure 中的圖片沒有明確的尺寸，因此請務必為您的 <img> 加入 .img-fluid 類別以使其具有響應性。

A caption for the above image.

html

<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 的標題。

A caption for the above image.

html

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

CSS

Sass 變數（Sass variables）

scss/_variables.scss

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);