基本介紹
Boostrap 是一套RWD的framework，使用前只需要載入Bootstrap的css與js。
Bootstrap的網站：http://getbootstrap.com
資料結構：
使用時只需要載入 bootstrap.min.css ／ bootstrap.min.js 即可開始使用bootstrap的功能
Bootstrap的Grid概念
Bootstrap的各尺寸對應的選擇器名稱
| .col-xs-格數 | .col-sm-格數 | .col-md-格數 | .col-lg-格數 |
| <768px | >=768px | >=992px | >=1200px |
各尺寸對應的選擇器的權重比：主要依照最小尺寸(手機優先)為主，未填寫時會以滿格(即12格)為主。
範例：
大螢幕(桌機)呈現
小螢幕(平版、手機)呈現
練習題：
| 尺寸／目次 | xs | sm | md | lg |
| a | 10 | 10 | 10 | 5 |
| b | 12 | 8 | 8 | 8 |
| c | 12 | 12 | 3 | 3 |
| d | 4 | 4 | 4 | 4 |
解答：
HTML
lg(>=1200px)
md(>=992px)
sm(>=768px)
xs(>=768px)
文章標籤
全站熱搜
網頁製作 (6)