:: BootstrapのGrid system

/ , / WEB制作・開発デザイン

Twitter社が提供しているBootstrap.cssの使い方をメモ。ダウンロードの仕方から導入までの基本的な説明は他のブロガーさんが詳しく説明されているので敢えて触れずに、Grid Systemの具体的な使い方を中心に書いていきます。全くBootstrapを知らない人のために一応さわりだけ触れておきます。

 

Bootstrap.cssとは

 

150815_photo001

http://getbootstrap.com

Twitter社が作ったcss。あらかじめ用意されているソースに適用するだけで、素早く見栄えのいいWEBサイトを作ることができるcssのフレームワーク。代表的なのはレスポンシブデザインに対応していることで爆発的な人気を遂げ、多くのサイトで使われるようになった。

その他にも、ドロップダウンメニューやフォームやボタンやテーブルなど、WEBサイトでよく使われるスタイルに対応している。

一言で言うと、「見栄えのいいWEBを短期間で作ることができる便利なcssフレームワーク」

 

 

Grid Systemの基本

 

ルール

  1. <div class=”container”>ここにコンテンツを入れる</div>(固定枠)の間、もしくは<div class=”container-fluid”>ここにコンテンツを入れる</div>(流動枠)で囲む
  2. 1で囲んだcontainerの中で、さらに<div class=”row”></div>で囲む
  3. .col-xs- .col-sm- .col-md- .col-lg-でカラムを設定する

 

 

カラム

BootstrapのGrid Sysytemは横幅全体を12カラムとしている。

1col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1col

 

8col 4col

 

4col 4col 4col

 

6col 6col

 

 

 

オプション

 

<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のデバイスのブレイクポイントは以下

 

リミット制限をつけるためにmax-widthを使う

 

 

 

モバイル、タブレット、デスクトップの設定

 

.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4

 

> <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カラムになる。

SNS SHARE

LEAVE A REPLY