図形

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

このページの内容

画像とオプションのキャプションなど、コンテンツを表示する必要がある場合は、<figure>の使用を検討してください。

付属の.figure、.figure-img、.figure-captionクラスを使用して、HTML5の<figure>要素と<figcaption>要素の基本スタイルを提供します。図形内の画像には明示的なサイズがないため、<img>に.img-fluidクラスを追加してレスポンシブにするようにしてください。

上記の画像のキャプションです。

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>

CSS

Sass変数

scss/_variables.scss

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);