Bootstrapの固定幅レスポンシブデザインのメモ : CSS
Bootstrapで固定幅のレスポンシブデザインを行うメモ。
参考にしたテンプレート
Get started > Examples > Basic marketing siteを参考にする。
- bootstrap-responsive.cssを追加で読み込む
- rowクラスとspan1～12クラスでレイアウトする。
span1～12クラスは最大でも足して12にする。
<div class="row">
<div class="span1">span1</div>
<div class="span11">span11</div>
</div>
レスポンシブデザインは端末のサイズにより5段階で調整される。
| 種類 | ブラウザサイズ1 | 固定幅2 | span1横幅 | span1のgutter幅(margin-left) |
|---|---|---|---|---|
| Large display | 1200px and up | 1170px | 70px | 30px |
| Default | 980px and up | 940px | 60px | 20px |
| Portrait tablets | 768px and above | 724px | 42px | 20px |
| Phones to tablets | 767px and below | ブラウザサイズ-403 | なりゆき4 | なし |
| Phones | 480px and below | ブラウザサイズ-40 | なりゆき | なし |
Scaffolding > Responsive desgin > Supported devices
span1～12の幅
| ブラウザサイズ | span | サイズ |
|---|---|---|
| Large display | span2 | span1の幅 × 2 + span1のgutter × 1 = 170 |
| Large display | span3 | span1の幅 × 3 + span1のgutter × 2 = 270 |
| Large display | span4 | span1の幅 × 4 + span1のgutter × 3 = 370 |
| Large display | span5 | 470 |
| Large display | span6 | 570 |
| Large display | span7 | 670 |
| Large display | span8 | 770 |
| Large display | span9 | 870 |
| Large display | span10 | 970 |
| Large display | span11 | 1070 |
| Large display | span12 | 1170 |
» Demo
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。