フィギュア Figures

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

On this page

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

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

A caption for the above image.

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>

figureのキャプションの配置は、テキストユーティリティで簡単に行えます。

A caption for the above image.

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