「Bootstrap.cssのGrid system」のサンプル
「Bootstrap.cssのクラス名のサンプル:和訳」の「Grid system」のサンプルページです。
- 「.row」を親要素にする
- 1行の合計を「12」にする。超えたものは2行目。
- 幅は親の幅と同じ(container-fluidを親にする)
ウィンドウ幅を広げたり縮めたりするとGridのトコが横並びになったり縦並びになったりします。
Extra small devices Phones (<768px)
「col-xs-X」を使う。ウィンドウ幅関係無しで常に横並び。
1行2列で50%ずつ。「col-xs-6」「col-xs-6」
.col-xs-6
.col-xs-6
1行2列で25%、75%。「col-xs-3」「col-xs-9」
.col-xs-3
.col-xs-9
実際のソース
<h3>1行2列で50%ずつ。「col-xs-6」「col-xs-6」</h3> <div class="container-fluid"> <div class="row"> <div class="col-xs-6" style="background-color:#ddd">.col-xs-6</div> <div class="col-xs-6" style="background-color:#bbb">.col-xs-6</div> </div> </div> <h3>1行2列で25%、75%。「col-xs-3」「col-xs-9」</h3> <div class="container-fluid"> <div class="row"> <div class="col-xs-3" style="background-color:#ddd">.col-xs-3</div> <div class="col-xs-9" style="background-color:#bbb">.col-xs-9</div> </div> </div>
Small devices Tablets (≥768px)
「col-sm-X」を使う。ウィンドウ幅が768px以上のときのみ横並び。
1行2列で50%ずつ。「col-sm-6」「col-sm-6」
.col-sm-6
.col-sm-6
1行2列で25%、75%。「col-sm-3」「col-sm-9」
.col-sm-3
.col-sm-9
実際のソース
<h3>1行2列で50%ずつ。「col-sm-6」「col-sm-6」</h3> <div class="container-fluid"> <div class="row"> <div class="col-sm-6" style="background-color:#ddd">.col-sm-6</div> <div class="col-sm-6" style="background-color:#bbb">.col-sm-6</div> </div> </div> <h3>1行2列で25%、75%。「col-sm-3」「col-sm-9」</h3> <div class="container-fluid"> <div class="row"> <div class="col-sm-3" style="background-color:#ddd">.col-sm-3</div> <div class="col-sm-9" style="background-color:#bbb">.col-sm-9</div> </div> </div>
Medium devices Desktops (≥992px)
「col-md-X」を使う。ウィンドウ幅が992px以上のときのみ横並び。
1行2列で50%ずつ。「col-md-6」「col-md-6」
.col-md-6
.col-md-6
1行2列で25%、75%。「col-md-3」「col-md-9」
.col-md-3
.col-md-9
実際のソース
<h3>1行2列で50%ずつ。「col-md-6」「col-md-6」</h3> <div class="container-fluid"> <div class="row"> <div class="col-md-6" style="background-color:#ddd">.col-md-6</div> <div class="col-md-6" style="background-color:#bbb">.col-md-6</div> </div> </div> <h3>1行2列で25%、75%。「col-md-3」「col-md-9」</h3> <div class="container-fluid"> <div class="row"> <div class="col-md-3" style="background-color:#ddd">.col-md-3</div> <div class="col-md-9" style="background-color:#bbb">.col-md-9</div> </div> </div>
Large devices Desktops (≥1200px)
「col-lg-X」を使う。ウィンドウ幅が1200px以上のときのみ横並び。
1行2列で50%ずつ。「col-lg-6」「col-lg-6」
.col-lg-6
.col-lg-6
1行2列で25%、75%。「col-lg-3」「col-lg-9」
.col-lg-3
.col-lg-9
実際のソース
<h3>1行2列で50%ずつ。「col-lg-6」「col-lg-6」</h3> <div class="container-fluid"> <div class="row"> <div class="col-lg-6" style="background-color:#ddd">.col-lg-6</div> <div class="col-lg-6" style="background-color:#bbb">.col-lg-6</div> </div> </div> <h3>1行2列で25%、75%。「col-lg-3」「col-lg-9」</h3> <div class="container-fluid"> <div class="row"> <div class="col-lg-3" style="background-color:#ddd">.col-lg-3</div> <div class="col-lg-9" style="background-color:#bbb">.col-lg-9</div> </div> </div>
ウィンドウ幅による組合せ
タブレットとPCで横並びの数を変える
タブレット(ウィンドウ幅が768px以上)のときは2カラムレイアウト、PC(ウィンドウ幅が992px以上)のときは4カラムレイアウト
A:
.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
B:
.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
C:
.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
D:
.col-sm-6 .col-md-3
.col-sm-6 .col-md-3
実際のソース
<h3>タブレットとPCで横並びの数を変える</h3> <p>タブレット(ウィンドウ幅が768px以上)のときは2カラムレイアウト、PC(ウィンドウ幅が992px以上)のときは4カラムレイアウト</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 col-md-3" style="background-color:#d9d">A:<br >.col-sm-6 .col-md-3</div> <div class="col-sm-6 col-md-3" style="background-color:#9bb">B:<br >.col-sm-6 .col-md-3</div> <div class="col-sm-6 col-md-3" style="background-color:#d6d">C:<br >.col-sm-6 .col-md-3</div> <div class="col-sm-6 col-md-3" style="background-color:#6bb">D:<br >.col-sm-6 .col-md-3</div> </div> </div>
左の余白
※「col-xx-offset-□」で左に余白をあける。
A:
.col-sm-6 .col-md-offset-3
.col-sm-6 .col-md-offset-3
B:
.col-sm-8 .col-md-offset-2
.col-sm-8 .col-md-offset-2
C:
.col-sm-4 .col-md-4
.col-sm-4 .col-md-4
D:
.col-sm-6 .col-md-6
.col-sm-6 .col-md-6
E:
.col-sm-2 .col-md-10
.col-sm-2 .col-md-10
実際のソース
<div class="container-fluid"> <div class="row"> <div class="col-sm-6 col-md-offset-3" style="background-color:#d9d">A:<br >.col-sm-6 .col-md-offset-3</div> <div class="col-sm-8 col-md-offset-2" style="background-color:#9bb">B:<br >.col-sm-8 .col-md-offset-2</div> <div class="col-sm-4 col-md-offset-4" style="background-color:#d6d">C:<br >.col-sm-4 .col-md-4</div> <div class="col-sm-6 col-md-offset-6" style="background-color:#d9d">D:<br >.col-sm-6 .col-md-6</div> <div class="col-sm-2 col-md-offset-10" style="background-color:#9bb">E:<br >.col-sm-2 .col-md-10</div> </div> </div>