ブートストラップのレイアウト方法

ブートストラップを使用してウェブサイトをレイアウトするには、ページをコンテナ、行、列に分割するグリッドシステムが必要です。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップレイアウトガイダンス

レイアウトにブートストラップを使用する方法は？

Bootstrapは、応答性の高いモバイルファーストWebサイトとアプリケーションを迅速に発展させるためのCSSフレームワークです。 Webサイトレイアウトを簡単に作成するための、事前に構築されたクラスとコンポーネントの範囲を提供します。

ブートストラップレイアウト構造

Bootstrapは、ページを水平列と垂直列に分割するグリッドシステムを使用してコンテンツを整理します。基本的なメッシュ構造は次のとおりです。

• コンテナ：ページコンテンツ全体が含まれています。
• 行：列を含む水平行を定義します。
• 列：行のコンテンツの幅を指定します。

レイアウトを作成する手順

1. コンテナを追加： <div class="container">を使用してコンテナを作成します。<li> <strong>行を追加：</strong> <code><div class="row">を使用して、コンテナに行を作成します。<li> <strong>列を追加：</strong>列を連続して追加し、 <code><div class="col-*">を使用して、列幅を指定し<code>* （たとえば、 col-6 6/12幅を連続して説明する列を表します）。
2. コンテンツの設定：列にコンテンツを追加します。

ブートストラップレスポンシブレイアウト

Bootstrapのレスポンシブレイアウト機能により、Webサイトはブラウザまたはデバイスサイズに基づいて自動的に調整できます。 Bootstrapはブレークポイントを使用して画面サイズの範囲を定義し、各ブレークポイントのレイアウトを調整します。ブレークポイントは次のとおりです。

ブレークポイント	画面幅
xs	≤575px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px

ブートストラップレスポンシブクラスの使用例

中画面および大きな画面に3つの列に配置されたコンテナと、小さな画面に単一の列を作成します。

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-lg-4">列1</div> <div class="col-md-4 col-lg-4">列2</div> <div class="col-md-4 col-lg-4">列3</div> </div> </div></code>