【Bootstrap】グリッドシステム

Bootstrapとはは、別の記事に簡単にまとめていますのでご参照ください。

Bootstrapの簡単な説明

Bootstrapとは ブートストラップとは、とても簡単に無料でCSSを使うことができるものです。 スマホ、タブレットといった、パソコンとは画面の大きさが違うものに対応するページを作るレスポンシブデザインに対応しているフレームワーク1になっ...

mapletc.net

グリッドシステムとは

サイトの横幅を均等に分けるラインをグリッドと呼び、Bootstrapは12本のグリッドが設定されています。

こちらをもとに、コンテンツの配置を決めることで、スマホで見た場合やタブレットで見た場合に崩れることなく仕上げることができます。

３つのクラス

ここで使用するのが、「.container」「.row」「.col」 この３つのクラスです。

「.container」

「.row」「.col」を囲むコンテナになります。

「.container」の大きさは、パソコン、スマホ、タブレットで異なる大きさになります。

Extra small (xs)　Small (sm)　Medium (md)　Large (lg)　Extra large (xl)　Extra extra large (xxl)

「.container-fluid」

「.container-fluid」は、画面いっぱいに広がっているコンテナを、広げたり狭めたりすると、「.container-fluid」の幅も広がったり、狭まったりするものです。

「.row」ロー

「.container」に対して垂直に分割。中にはカラムが入ります。

「.col」カラム

列を表すクラス。左から右に並びます。書き方は下記のとおりです。

.col-画面幅-グリッド数

書き方

<!--例-->
<div class="container">
    <div class="row">
       <!--col-画面幅-グリッド数-->
　　　　<div class="col-md-6"></div>
       <div class="col-md-6"></div>
　　</div>
</div>

画面幅は、(xs)　、スマホサイズ (sm)　、タブレット (md)　 、パソコンサイズ(lg)　、大型ディスプレイ (xl)　 (xxl)　で表します。

グリッド数は、1～12

画像上の表し方は、画面幅は sm（540px）で、グリッド数は6なので

<div class="col-sm-6"></div>
<div class="col-sm-6"></div>

画像下の表し方は、画面幅は sm（540px）で、グリッド数は4なので

<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>

画面幅は sm（540px）で、グリッド数が４と８の場合は、

<div class="col-sm-4"></div>
<div class="col-sm-8"></div>

ブレイクポイントを２つにしてどの画面でも見やすくする

この場合は、md(768px)よりも大きいときはグリッド数6で、lg(992px)よりも大きいときはグリッド数を3にするというデザインになっています。

モバイルからスタイルを定義していくので、この画面幅より大きい場合はこのスタイルというように書いていきます。

<div class=”col-md-6 col-lg-3“>

<div class="container">
    <div class="row">
　　　　<div class="col-md-6 col-lg-3">
　　</div>
</div>

この場合は、lg(992px)よりも大きいときは、グリッド数4が３つ、
xs(576px)よりも大きい場合は、グリッド数6が2つ、12を超えると下の行に行くので、12が1つとなります。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-lg-4"></div>
        <div class="col-xs-6 col-lg-4"></div>
        <div class="col-xs-12 col-lg-4"></div>
    </div>
</div>

サイドバーをつけたいとき

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <div class="col-lg-4"></div>
    </div>
</div>

ブレイクポイントを指定しない

<div class="col-6">

上記のような表現だと、画面幅にかかわらずすべて横並びになります。（スマホ表示でも）

カラムの余白

デフォルトで、左右のpaddingが15pxとなっています。

余白をなくしたい場合は、「px-0」と記入します。