View on GitHub

圖片區 (Figures)

使用 Bootstrap 顯示相關圖檔以及圖片說明的文件和範例。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

當需要顯示一段內容，例如包含可選擇標題的圖檔時，可以考慮使用 <figure>。

使用內建的 .figure、 figure-img 和 .figure-caption 類別，可提供 HTML5 <figure> 和 <figcaption> 標籤一些基本樣式設定。圖片沒有明確尺寸，請務必在 <img> 標籤加上 .img-fluid 類別設定為響應式圖片。

A caption for the above image.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

使用我們的 text utilities 可以很容易地對齊圖片標題。

A caption for the above image.

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

Sass

Variables

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;