図表（Figures） v4.0.0新設

図表の設定

任意のキャプションでイメージのようなコンテンツを表示する必要があるときは、いつでも <figure> の使用を検討すること。

.figure, .figure-img, .figure-caption を使用して、HTML5の <figure> 要素や <figcaption> 要素に基本的なスタイルを提供する。figure内のイメージには明示的なサイズがないので、レスポンシブに対応するには、<img> に .img-fluid を追加すること。

見本

設定例

コピー<figure class="figure">
	<img src="..." alt="一般的な角丸イメージ" class="figure-img img-fluid rounded">
	<figcaption class="figure-caption">上の画像のキャプション</figcaption>
</figure>

キャプションの配置

Figureのキャプションをテキストユーティリティで簡単に整列させることが可能。

見本

設定例

コピー<figure class="figure">
	<img src="..." alt="一般的な角丸イメージ" class="figure-img img-fluid rounded">
	<figcaption class="figure-caption text-right">上の画像のキャプション</figcaption>
</figure>