基本介紹
 

Boostrap 是一套RWD的framework，使用前只需要載入Bootstrap的css與js。

Bootstrap的網站：http://getbootstrap.com
　　　 中文網站：http://www.bootcss.com/
 
資料結構：
1  
 
使用時只需要載入　bootstrap.min.css　／　bootstrap.min.js 即可開始使用bootstrap的功能
 
Bootstrap的Grid概念
 
Bootstrap的各尺寸對應的選擇器名稱
 
.col-xs-格數 .col-sm-格數 .col-md-格數 .col-lg-格數
<768px >=768px >=992px >=1200px
 
各尺寸對應的選擇器的權重比：主要依照最小尺寸(手機優先)為主，未填寫時會以滿格(即12格)為主。
範例：
2  
大螢幕(桌機)呈現
3  
 小螢幕(平版、手機)呈現
4  
 
 
練習題：
尺寸／目次 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
 
6  
 
lg(>=1200px)
5-lg  
md(>=992px)
5-md  
sm(>=768px)
5-sm  
xs(>=768px)
5-xs  
arrow
arrow
    全站熱搜

    chlntng129 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄