圖片區 (Figures)

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

六角學院 六角學院

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

立即上課去

需要顯示一段內容,如可選標題的圖檔時,可使用 <figure> 標籤。

使用內建的 .figurefigure-img.figure-caption 類別,設定 HTML5 <figure><figcaption> 的底線樣式。 圖檔沒有明確指定尺寸,因此請務必在 <img> 標籤加入 .img-fluid 設定圖片為響應式。

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

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

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>