Bootstrap

【Bootstrap】グリッドシステムで簡単なブログ記事ページを作成

Bootstrapのグリッドシステムを使って、簡単なブログ記事ページを作成しました。
先日購入した、「HTML/CSSデザインレシピ」を元に実践してみました。
 

 

Bootstrapで作成したブログページ

実際に作成したページはこちら。
 
→992px以上

 
 
→768px以上、991px以下

 
 
→767px以下

 
作成する流れとしては、

  1. HTMLでサイトの形を作る
  2. Bootstrapでグリッドの用意とパーツの配置
  3. Bootstrapで形にしたものをCSSでアレンジ

こんな感じで作成していきます。
 
書籍には、やり方が書いてありますが、自分でBootstrapの公式サイトを見ながら、見本のように実装するにはどうすればいいか?考えながらやってみました。
今回学んだことをまとめておきたいと思います。
 

グリッドのネスト

グリッドシステムは、12列で分割され、そこにパーツを並べていくレイアウトです。
行をrowで囲み、その行を何列分に分解していくかをcol-●●で指定していきます。

<div class="container">
 <div class="row">
<div class="col-sm-3> </div>
<div class="col-sm-3> </div>
<div class="col-sm-3> </div>
<div class="col-sm-3> </div>
 </div>
</div>

例えばこれだと、
3列分の幅を持ったdivが4つ横並びになる形になります。
 
グリッドのブレークポイントについては、公式サイトに記載があり、この通りにマークアップしていきます。

 
そして今回学んだ「グリッドのネスト」とは、入れ子構造のこと。
グリッドシステムの記述を入れ子にすることで、親階層と子階層に分けてグリッドのパーツ幅を変えることができます。
 

これを見ると、親階層と子階層のグリッド内のパーツ幅が違う動きをすることがわかります。

767px以下(col-xs)768px以上(col-sm)992px以上(col-md)
親階層8:48:412
子階層4:4:46:6・1212

 
こんな場合に、グリッドのネストを使い、ブレイクポイントごとにパーツ幅を変えていきます。
 
コードの記述としてはこんな感じです。

<div class="container">
  <div class="row"> <!--親構造のグリッド-->
   <div class="col-sm-8>
    <div class="row"> <!--子構造のグリッド-->
     <div class="col-sm-12 col-md-4> </div>
     <div class="col-sm-6 col-md-4> </div>
     <div class="col-sm-6 col-md-4> </div>
     </div> <!--row--> <!--子構造のグリッド-->
   </div> <!--col-->
   <div class="col-sm-4> </div>
 </div> <!--row--><!--親構造のグリッド-->
</div> <!--container-->

 
もちろんレスポンシブ対応です。レイアウトの柔軟性が上がりますね。