輪廓（Figures）
通過 Bootstrap 的輪廓（figure）組件來顯示相關聯的圖片和文本。本文檔包含了輪廓（figure）組件的說明和示例。
On this page
輪廓
任何時候需要顯示一段內容（例如帶有可選標題的圖片），請使用 <figure>標簽。
使用內置的.figure、.figure-img和.figure-caption類別，可提供HTML5 <figure>和<figcaption>標簽一些基本樣式設定。圖片沒有明確尺寸，請務必在<img>標簽加上 .img-fluid類別設定為響應式圖片。
事實上，輪廓組件不僅用于圖片，在前一節文字排版部分，引用來源部分就已經使用了輪廓組件。
<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> 所包含的標題。
<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;