1、HTML5 文檔類型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>2、移動設備優先
爲了確保適當的繪製和觸屏縮放，需要在 之中添加 viewport 元數據標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">在移動設備瀏覽器上，通過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 可以禁用其縮放（zooming）功能。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">3、佈局容器
.container 和.container-fluid
4、.container 類用於固定寬度並支持響應式佈局的容器。
| “” | 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) |
|---|---|---|---|---|
| .container 最大寬度 | None （自動） | 750px | 970px | 1170px |
| 柵格系統行爲 | 總是水平排列 | |||
| 類前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}根絕屏幕大小自定設置固定寬度，然後通過margin實現居中
5、.container-fluid
可以將固定寬度的柵格佈局轉換爲 100% 寬度的佈局
需要配合.row-fluid使用，如果使用了.row每一行都會左右超出container15px
6、.row
margin：-15px
.row {
margin-right: -15px;
margin-left: -15px;
}7、.row-fluid
取消 margin：-15px
8、列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器爲當前元素增加了左側的邊距（margin）。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>9、列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>col-md-push-3向右移動3列
col-md-pull-9向左移動9列
10、列
padding：15px
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;