bootstrap ～グリッドシステム

昨日に引き継ぎ、bootstrapについてまとめていきます。
今日はグリッドシステムについてです。

bootstrapのグリッドシステム

サイトの横幅を均等に分けるガイドラインをグリッドと呼びます。Bootstrapでは12本のグリッドが存在します。

このグリッドを活用してレイアウトを組む方法をグリッドシステムといい、グリッドに沿ってコンテンツを配置することで、複雑なレイアウトでも簡単にレスポンシブデザインを組むことができます。

colの幅設定

colの幅は「グリッド何個分か」を指定することで設定できます。
もちろん、CSSでwidthを記述することもできますが、この設定方法に慣れておくとレスポンシブ対応がぐんと楽になります。

設定方法は、col-グリッド数と記載すればOKです。

# グリッド数9のcol
<div class="row">
  <div class="col-9">col-9</div>
</div>

# グリッド数4のcolで画面を3等分してみる
<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

# 真ん中のcolだけグリッド数を指定すると両側は自動調整される
<div class="row">
  <div class="col">col</div>
  <div class="col-5">col-5</div>
  <div class="col">col</div>
</div>

ビューはこんな感じになります。（わかりやすいようCSSで別途色等を設定）

画面幅を縮めてみるとこう。横の比率を保ったまま縮んでます。

レスポンシブデザインへの応用

colのグリッド数に加えて、ブレイクポイントを指定してあげることでレスポンシブデザインが簡単に実装できます。この続きはまた明日以降！