Twitter社が提供しているBootstrap.cssの使い方をメモ。ダウンロードの仕方から導入までの基本的な説明は他のブロガーさんが詳しく説明されているので敢えて触れずに、Grid Systemの具体的な使い方を中心に書いていきます。全くBootstrapを知らない人のために一応さわりだけ触れておきます。
目次
Bootstrap.cssとは
Twitter社が作ったcss。あらかじめ用意されているソースに適用するだけで、素早く見栄えのいいWEBサイトを作ることができるcssのフレームワーク。代表的なのはレスポンシブデザインに対応していることで爆発的な人気を遂げ、多くのサイトで使われるようになった。
その他にも、ドロップダウンメニューやフォームやボタンやテーブルなど、WEBサイトでよく使われるスタイルに対応している。
一言で言うと、「見栄えのいいWEBを短期間で作ることができる便利なcssフレームワーク」
Grid Systemの基本
ルール
- <div class=”container”>ここにコンテンツを入れる</div>(固定枠)の間、もしくは<div class=”container-fluid”>ここにコンテンツを入れる</div>(流動枠)で囲む
- 1で囲んだcontainerの中で、さらに<div class=”row”></div>で囲む
- .col-xs- .col-sm- .col-md- .col-lg-でカラムを設定する
1 2 3 4 5 6 |
<div class="container"> <div class="row"> <div class="col-md-8">col-md-8</div> <div class="col-md-4">col-md-4</div> </div><!-- row --> </div><!-- container --> |
カラム
BootstrapのGrid Sysytemは横幅全体を12カラムとしている。
1col | 1col | 1col | 1col | 1col | 1col | 1col | 1col | 1col | 1col | 1col | 1col |
8col | 4col |
4col | 4col | 4col |
6col | 6col |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> |
オプション
<768px | >768px | ≥992px | ≥1200px | |
---|---|---|---|---|
コンテナ横幅 | None(auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
カラム数 | 12 | 12 | 12 | 12 |
カラム横幅 | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px | 30px | 30px | 30px |
入れ子 | YES | |||
オフセット | YES | |||
列の順序 | YES |
メディアクエリ
bootstrap.cssのデバイスのブレイクポイントは以下
1 2 3 4 5 6 7 8 9 10 11 |
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } |
リミット制限をつけるためにmax-widthを使う
1 2 3 4 |
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } |
モバイル、タブレット、デスクトップの設定
.col-xs-12 .col-sm-6 .col-md-8 | .col-xs-6 .col-md-4 |
1 2 3 4 |
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> |
> <div class=”col-xs-12 col-sm-6 col-md-8″>.col-xs-12 .col-sm-6 .col-md-8</div> スマートフォン(<768px)では1カラム、タブレット(≥768px)では2カラム、デスクトップ(≥992px)では、3/4カラムになる。
> <div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div> スマートフォン(<768px)では1/2の半分、デスクトップ(≥992px)では、1/3カラムになる。
LEAVE A REPLY