数字

Bootstrap の Figure コンポーネントを使用して関連する画像とテキストを表示するためのドキュメントと例。

このページでは

オプションのキャプション付きの画像など、コンテンツを表示する必要がある場合はいつでも、<figure>.

含まれているおよびクラスを使用して.figure、.figure-imgHTML5および要素.figure-captionのベースラインスタイルを提供します。図の画像には明示的なサイズがないため、必ずクラスをに追加してレスポンシブにします。<figure><figcaption>.img-fluid<img>

上の画像のキャプション。

html

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

テキストユーティリティを使用すると、図のキャプションを簡単に揃えることができます。

上の画像のキャプション。

html

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