in English
數字
在 Bootstrap 中使用圖形組件顯示相關圖像和文本的文檔和示例。
在本頁面
任何時候您需要顯示一段內容(例如帶有可選標題的圖像),請考慮使用<figure>
.
使用包含.figure
的.figure-img
和.figure-caption
類為 HTML5<figure>
和<figcaption>
元素提供一些基線樣式。圖中的圖像沒有明確的大小,因此請務必將.img-fluid
類添加到您的類中<img>
以使其具有響應性。
<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 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>
薩斯
變量
$figure-caption-font-size: $small-font-size;
$figure-caption-color: $gray-600;