数字

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

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

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

Figure の角が丸い一般的な正方形のプレースホルダーイメージ。 — 上の画像のキャプション。

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

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

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