ざっくり入門 - 2
グリッドシステム
カラム(column : 列)とガター(gutter : 溝)
Bootstrapではページの幅を12列に分割したグリッドシステムを採用しています。
12列に分割されたグリッドの列をカラムと言い、各カラム間の余白をガターと言います。
コンテナ(container : 箱)
グリッドシステムを使用してレイアウトする際、最初に使用するのがコンテナです。
コンテナは、コンテンツを入れる箱で、ページの水平中央にコンテンツを配置する役割を持っています。
コンテナには、固定幅コンテナと可変幅コンテナの2種類があります。
<div class="container">
<!-- ここにコンテンツを入れる -->
</div>
<div class="container-fluid">
<!-- ここにコンテンツを入れる -->
</div>
rowクラス(行)
コンテナ(箱)の中には、rowクラス(行)を入れます。
rowクラスは、一連のカラムを正しくレイアウトするために使用するクラスで、この中にカラムをまとめます。
複数行にしたいときは、containerの中にrowクラスを指定した要素を追加します。
<div class="container">
<div class="row"><!-- 1行目 -->
<!-- ここにカラムを入れる -->
</div>
<div class="row"><!-- 2行目 -->
<!-- ここにカラムを入れる -->
</div>
</div>
グリッドシステムの使い方
グリッドシステムは、一連のコンテナ(containerクラスまたはcontainer-fluidクラス)、行(rowクラス)、カラム(colクラス)を使用してコンテンツをレイアウトします。
基本構造は、コンテナ(containerクラスまたはcontainer-fluidクラス) > 行(rowクラス) > カラム(colクラス)となっています。
<div class="container">
<div class="row"><!-- row : 行 -->
<div class="col">1列目</div><!-- col : カラム -->
<div class="col">2列目</div><!-- col : カラム -->
<div class="col">2列目</div><!-- col : カラム -->
</div>
</div>
インデックス
Bootstrapざっくり入門
Bootstrapざっくり入門 - 3
あとがき
随時更新していきます!
Author And Source
この問題について(ざっくり入門 - 2), 我々は、より多くの情報をここで見つけました https://qiita.com/white_tiger/items/b394eed6c8de47e1661a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .