図形

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

図形

Figureコンポーネントを使用して関連する画像とテキストを表示します。

結果

読み込み中...

ライブエディター

import Figure from 'react-bootstrap/Figure'; function FigureExample() { return ( <Figure> <Figure.Image width={171} height={180} alt="171x180" src="holder.js/171x180" /> <Figure.Caption> Nulla vitae elit libero, a pharetra augue mollis interdum. </Figure.Caption> </Figure> ); } export default FigureExample;

import Figure from 'react-bootstrap/Figure';

function FigureExample() {
  return (
    <Figure>
      <Figure.Image
        width={171}
        height={180}
        alt="171x180"
        src="holder.js/171x180"
      />
      <Figure.Caption>
        Nulla vitae elit libero, a pharetra augue mollis interdum.
      </Figure.Caption>
    </Figure>
  );
}

export default FigureExample;

API

図形

FigureImage

FigureCaption