Skip to main content Skip to docs navigation
View on GitHub

圖片區 (Figures)

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

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

立即上課去
On this page

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

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

Placeholder400x300
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 可以很容易地對齊圖片標題。

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