新規作成日 2017-01-12
最終更新日
Bootstrapの図形コンポーネントを使用して、関連するイメージとテキストを表示するためのドキュメントと例。
あなたが、コンテンツの一部を表示する必要がある時はいつでも、キャプションを付けた画像のように、<figure>の使用を検討してください。
HTML5<figure>と<figcaption>要素のために、いくつかの基準スタイルを提供するために、含まれる.figure、.figure-imgと.figure-captionクラスを使用します。図形の画像は、明示的な大きさを持っていません。それをレスポンシブで作成するために、確実に、あなたの<img>に、.img-fluidクラスを追加して下さい。
<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>