BootstrapのGrid system | grooving-earth

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

Bootstrap.cssとは

http://getbootstrap.com

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-でカラムを設定する

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

</div>

</div>

カラム

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

1col

8col

4col

6col

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

</div>

</div>

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

/* 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) { ... }

/* 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を使う

@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) { ... }

@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

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