目次
ブートストラップ 5 グリッド システム
ブートストラップ グリッドは、モバイル ファーストのレイアウトを構築するための強力なシステムです。多数のオプションを備えた非常に広範なツールです。以下に、基本的な知識を紹介します。これは、最も一般的に使用される例の簡単な概要です。
Bootstrap のグリッド システムでは、ページ全体で最大 12 列を使用できます。12 列すべてを個別に使用したくない場合は、列をグループ化して幅の広い列を作成できます。
Bootstrap のグリッド システムはレスポンシブで、画面サイズに応じて列が再配置されます。大画面では、コンテンツが 3 つの列に編成された方が見栄えがよい場合があります。
グリッド クラス
Bootstrap グリッド システムには 4 つのクラスがあります。
- xs (スマートフォン用 - 幅 768 ピクセル未満の画面)
- sm (タブレット用 - 幅 768px 以上の画面)
- md (小型ラップトップ用 - 幅 992 ピクセル以上の画面)
- lg (ラップトップおよびデスクトップの場合 - 幅が 1200px 以上の画面)
グリッドシステムのルール
いくつかの Bootstrap グリッド システム ルール:
- 適切な配置とパディングのために、行は .container (固定幅) または .container-fluid (全幅) 内に配置する必要があります
- 行を使用して列の水平グループを作成する
- コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます
- .row や .col-sm-4 などの事前定義されたクラスを使用して、グリッド レイアウトをすばやく作成できます
- 列は、パディングによってガター (列のコンテンツ間のギャップ) を作成します。そのパディングは、.rows の負のマージンを介して、最初と最後の列の行でオフセットされます
- グリッド列は、スパンする使用可能な 12 列の数を指定することによって作成されます。たとえば、3 つの等しい列は 3 つの .col-sm-4 を使用します。
- 列幅はパーセンテージであるため、親要素に対して常に流動的でサイズが大きくなります
ブートストラップ グリッドの基本構造
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
したがって、必要なレイアウトを作成するには、コンテナー (<div class="container">) を作成します。次に、行を作成します (<div class="row">)。次に、必要な数の列 (適切な .col-*-* クラスのタグ) を追加します。 .col-*-* の数値は、常に各行の合計が 12 になることに注意してください。
Bootstrap を使って楽しみましょう..