Bootstrapの使い方(グリッド編)

Tag:

CSSフレームワークであるBootstarpのグリッドシステムを使うと、レスポンシブWebデザインを実現できます。

グリッドシステムの使用例

下記に使用例を示します。ブラウザーウィンドウの幅を狭めると部品配置が変化します。

サンプルソース
<div class="container">

  <div class="row">
    <div class="col-sm-4">
      <div style="width=100%;height:20px;background-color:#F3C0AB;">部品1-1 オレンジ</div>
    </div>
    <div class="col-sm-8">
      <div style="width=100%;height:20px;background-color:#A6E39D;">部品1-2 グリーン</div>
    </div>
  </div>


  <div class="row">
    <div class="col-sm-12 col-md-6" style="height:20px;">
      <div style="width=100%;height:20px;background-color:#F3C0AB;">部品2-1 オレンジ</div>
    </div>
    <div class="col-sm-6 col-md-3" style="height:20px;">
      <div style="width=100%;height:20px;background-color:#A6E39D;">部品2-2 グリーン</div>
    </div>
    <div class="col-sm-6 col-md-3" style="height:20px;">
      <div style="width=100%;height:20px;background-color:#97D3E3;">部品2-3 ブルー</div>
    </div>
  </div>

</div>
結果
部品1-1 オレンジ

部品1-2 グリーン

部品2-1 オレンジ

部品2-2 グリーン

部品2-3 ブルー

グリッドシステムのルール

グリッドシステムでは、「class=”row”」の中に表示したい部品を入れていきます。
各部品の幅比率をどのくらいにするのかは、「class=”col-{prefix}-{数値}”」という指定方法で設定します。
{数値}は、「class=”row”」の範囲内で合計値が12になるように指定します。
左右に余白を入れたい場合は、「class=”container”」で全体を囲み、containerに対してmarginやpaddingプロパティを適用します。

「col-{prefix}-{数値}」のprefixの指定により、対応するウインドウサイズが決まります。

prefix
col-xs-{数値} col-sm-{数値} col-md-{数値} col-lg-{数値}
extra small small medium large
767px以下
(モバイル)
768px以上
(タブレット縦)
992px以上
(パソコン、タブレット横)
1200px以上
(パソコン)

スポンサーリンク