@fukutechの技術ブログ

はじめに

要点

グリッドシステムとは

Bootstrapのレイアウト方法には、ページの幅を12列に分割したグリッドシステムが採用されています。この機能は、ページを2段組みや3段組みにしたり、コンポーネントを横に並べて配置したりする場合などに活用できます。

カラムとガター

  • カラム:12列に分割されたグリッドの列
  • ガター:各カラム間の余白
  • 各カラムの左右には15pxのガターが設定されている

コンテナ

  • コンテナ:コンテンツを入れる箱で、ページの水平中央にコンテンツを配置する役割を持つ
  • コンテナには、固定幅コンテナと可変幅コンテナの2 種類がある
    • 固定幅コンテナ:画面サイズによってコンテンツの最大幅( max-width)を切り替えられる
    • 全幅コンテナ:画面サイズ全幅に渡る流動的なコンテンツ幅を持たせることが可能

rowクラス

  • rowクラス:一連のカラムを正しくレイアウトするために使用するクラス
  • 複数行にしたいときは、containerの中にrowクラスを指定した要素の数だけ追加

  • rowクラスの左右にはマイナスマージン(-15 px)が設定されており、行内にまとめられた一連のカラムの左右端のガターサイズ(15px)を相殺し、一連のコンテンツが正しく整列される

グリッドシステムの基本構造

  • Bootstrapのグリッドシステムは、一連のコンテナ(containerクラスまたはcontainer-fluidクラス)、行(rowクラス)、およびカラム(colクラス)を使用してコンテンツをレイアウト
  • コンテナ(containerクラスまたはcontainer-fluidクラス)> 行(rowクラス)> カラム(colクラス) が基本構造


このログへのコメント

コメントはありません