図 Figures

Bootstrapのfigureコンポーネントで関連画像やテキストを表示するためのドキュメントとサンプル。

Overview

任意のキャプションでコンテンツを表示する必要があるときは, Figure コンポーネントの使用を検討してください。

Figure, Img, Figcaption コンポーネントを使用して, HTML5の <figure> , <figcaption> 要素にいくつかのベースラインスタイルを提供します。

figureの画像サイズはサンプルのように fluid 属性を Img に追加して変更します。

400x300
A caption for the above image.
vue
<template>
 <BFigure>
  <BFigureImage
   src="https://dummyimage.com/400x300/787878/ffffff&text=400x300"
   fluid
   rounded
   alt="400x300"
  />
  <BFigureCaption>A caption for the above image.</BFigureCaption>
 </BFigure>
</template>

Alignment

text utilities を利用すると, 位置の変更が簡単にできます。

400x300
A caption for the above image.
vue
<template>
 <BFigure>
  <BFigureImage
   src="https://dummyimage.com/400x300/787878/ffffff&text=400x300"
   fluid
   rounded
   alt="400x300"
  />
  <BFigureCaption text-alignment="end">
   A caption for the above image.
  </BFigureCaption>
 </BFigure>
</template>

See Also