React Bootstrap を使用してグリッド レイアウトを実装する

1. React Bootstrap - グリッドシステム
2. React Bootstrap <Container> コンポーネント
3. React Bootstrap <Row> コンポーネント
4. React Bootstrap <Col> コンポーネント

React は、ユーザー インターフェイスを構築するための最も人気のあるフロントエンド ライブラリの 1つです。 再利用可能なコンポーネントの概念を使用して、高速で美しいアプリケーションを短時間で構築します。

それでも、カスタム コンポーネントの構築には時間がかかる場合があります。

他の人が作成したコンポーネントを再利用することで、プロセスを高速化できます。 一部のライブラリには、最新の Web アプリケーションを構築するための入力、ボタン、およびその他の一般的な要素のコンポーネントが含まれています。

React Bootstrap - グリッドシステム

この記事では、React Bootstrap で利用可能なグリッド レイアウト システムについて説明します。 通常の Bootstrap の Grid システムに精通している場合は、React Bootstrap で簡単に理解できるはずです。

開発者は、コンテナー、行、および列のカスタム コンポーネントを含めることができます。 これを使用して、ページ上のコンテンツ レイアウトを簡単に整理できます。

内部的には、React Bootstrap はこれを行うために Flexbox に依存しています。

React Bootstrap <Container> コンポーネント

<Container> カスタム コンポーネントは、コンテンツの中央揃えとパディングに役立ちます。 React Bootstrap API を使用すると、コンテナーの幅を指定できます。

<Container> コンポーネントにラップされた Web サイト コンテンツの例を次に示します。

import Container from 'react-bootstrap/Container';

export default function App() {
  return (
    <Container fluid>
      <h1>Container Sample</h1>
    </Container>
  );
}

fluid 属性は、画面サイズに関係なく 100% の幅を維持できます。

fluid 属性の値を設定するために、ブレークポイント (sm、md、lg、xl、xxl) の 1つを指定することもできます。 設定されている場合、ユーザーの画面サイズがこのブレークポイントに達するまでコンテナーは流動的なままになります。

<Container> コンポーネントはスタンドアロンとして役立ちます。 パディングを提供し、コンテンツを中央に配置するために使用できます。

ただし、<Row> および <Col> カスタム コンポーネントと組み合わせると、より便利です。

React Bootstrap <Row> コンポーネント

このコンポーネントを使用すると、コンテンツを水平方向に編成できます。 通常、各 <Row> コンポーネントには複数の列が含まれます。

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col>Second Column</Col>
        </Row>
      </Container>
    </div>
  );
}

React Bootstrap <Col> コンポーネント

最後に、<Col> カスタム コンポーネントを使用して行を水平に分割できます。 <Row> コンポーネントに属性のない 2つの <Col> が含まれている場合、これら 2つのコンポーネントはそれらの間のすべての空き領域を占有します。

xs 属性を使用して、列の 1つの幅を指定できます。 例を見てみましょう。

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col xs={6}>Second Column</Col>
          <Col>Third Column</Col>
        </Row>
      </Container>
    </div>
  );
}

この場合、2 番目の列は他の 2つの列よりも幅が広くなり、残りの空き領域が 2 番目の列で分割されます。