Bootstrapの使い方 | 基本編

Bootstrapとは

BootstrapはTwitter社が開発したCSSの「フレームワーク」

Bootstrapを使うメリット

僕が思うBootstrapを使うメリットは、レスポンシブWebデザインに対応しているという点 今回はレスポンシブルを中心に解説

グリッドシステムの使い方

グリッドシステムは、以下ルールで使用

1.class="container"の中に
2.class="row"の中に
3.class="col-｛prefix｝-｛columns｝"
4.｛columns｝は合計値が12になるように数値を指定

サンプルコード

#hoge.html.slim

.container
  .row
    .col-sm-4 hoge
    .col-sm-4 hoge
    .col-sm-4 hoge

画面サイズ	｛prefix｝の意味	{prefix｝の指定方法(*は数値)
モバイル（768px以下）	エクストラスモール=xs	col-xs-*
タブレット（768px以上、992px未満）	スモール=sm	col-sm-*
デスクトップ（992px以上、1200px未満）	ミディアム=md	col-md-*
デスクトップ（1200px以上）	ラージ=lg	col-lg-*