BootStrap

UI框架

• 包含CSS、JS特效插件的工具集，快速開發網頁
• 經典的UI框架：BootStrap、JQueryUI、MeiziUI……

BootStrap

2.1 版本

• 用於生產環境(CSS\JavaScript)
• 源碼(LESS)(LESS是CSS預處理器)
• SASS(SASS也是CSS預處理)
• 中文網網站地址：http://www.bootcss.com/

響應式佈局

3.1 手機屏幕的分辨率

• 如今絕大部分手機視網膜屏幕，有物理分辨率，和渲染分辨率。iphone8物理分辨率爲750*1334渲染分辨率爲375*667
• 手機瀏覽器爲了讓沒有作響應式處理的網頁可以正常顯示，自動進行縮放。視口的大小一般會設置爲980px

3.2 媒體查詢

@media (min-width:) { 選擇器 { } 選擇器 { } } 

媒體特效： min-width min-height max-width max-height width height .........

3.3 視口

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

4 佈局

4.1 格柵系統

.container

<768px 100% 超小屏幕 xs >=768px <992px 750px 小屏幕，範圍在[768,992)時，使用750px sm >=992px <1200px 970px 中等屏幕，範圍在992,1200)時，使用970px md >=1200px 1170px 大屏幕，範圍在[768,992)時，使用1200px lg 

.行和列

行 .row 列 col-xs-* col-sm-* col-md-* col-lg-* 把父元素分紅12份,*指定佔父元素的份數 

4.2 表格

.table table標籤中必須加class=table .table-striped 條紋狀表格 .table-bordered 帶邊框的表格 .table-hover 鼠標懸停 .table-condensed 緊縮表格 .success .info .danger .warning .active 顏色 

4.3 表單

.form-horizontal .form-group .form-control .control-label