Source

數字

在 Bootstrap 中使用圖形組件顯示相關圖像和文本的文檔和示例。

任何時候您需要顯示一段內容（例如帶有可選標題的圖像），請考慮使用<figure>.

使用包含.figure的.figure-img和.figure-caption類為 HTML5<figure>和<figcaption>元素提供一些基線樣式。圖中的圖像沒有明確的大小，因此請務必將.img-fluid類添加到您的類中<img>以使其具有響應性。

400x300
上圖的標題。 
<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>

使用我們的文本實用程序可以輕鬆對齊圖形的標題。

400x300
上圖的標題。 
<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>