読者です 読者をやめる 読者になる 読者になる

Challenge!

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-*