頁面必須設置為html5文檔類型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 適應移動設備 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scal ...
頁面必須設置為html5文檔類型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
適應移動設備
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
排版/鏈接
scaffolding.less：
body{background-color:#fff／@font-family-base/@font-size-base/@line-height-base}
a(@link-color/@link-hover-color)
Normalize.css
柵格系統
容器：
.container(固定寬度響應式)/.container-fluid(百分比自適應)
不能互相嵌套（有padding的原因）
行：
.row
必須包含在容器.container或.container-fluid中
行內可以且只可以創建列(column)
列：
.col-*-*
內容放在列中
列與列之間的間隔有.col-*-*中的padding屬性設置
第一個＊為xs、sm、md和lg，第二個＊為1-12
列數大於12，多餘的列另起一行(本質上是浮動引起的換行)
媒體查詢
超小屏幕(小於768)
無媒體查詢代碼——移動優先原則
容器寬度.container為自動
小屏幕(大於768)
@media (min-width:@screen-sm-width:768){}
容器寬度.container為720
中等屏幕(大於992)
@media(min- width:@screen-md-width:992){}
容器寬度.container為970
大屏幕(大於1200)
@media(min-width:@screen-lg-width:1200){}
容器寬度.container為1170
大屏幕媒體查詢類覆蓋小屏幕設備類
實例
1、根據媒體查詢，相應寬度的屏幕展示相應的類(堆疊／水平排列)
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
2、.col數大於12，包含多餘列的元素另起一行
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
3、col-**-offset-*列偏移(通過margin-left設置偏移)
4、col-**-push-*(通過left值改變位置)和col-**-pull-*(通過right值改變位置)改變列排序
