一，柵格系統簡介
1，響應式設計
響應式設計是就一個網站能夠兼容多個終端，而不是爲每個終端特定一個版本
2，柵格實現原理
- “行（row）”必須包含在 .container 中
- 通過“行（row）”在水平方向創建一組“列（column）”。
- 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作爲行（row）”的直接子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移動設備優先-->
<title>demo02</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{border: 1px #333333 solid;}
</style>
</head>
<body>
<div class="container">
<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-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
</div>
</div>
</body>
</html>注意：<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
可以在中等屏幕和小屏幕分別以不同的百分比排列
3，媒體查詢
修改樣式代碼爲
<style type="text/css">
div{border: 1px #333333 solid;}
@media (max-width: 767px) {
div{background: #F0AD4E;}
}
</style>定義小於超小屏幕的樣式
二，柵格佈局基本用法
1，佈局容器
<body>
<div class="container">
<h1>container</h1>
</div>
<div class="container-fluid">
<h1>container-fluid</h1>
</div>
</body>對比效果container-fluid可以寬度100%顯示，container有限制
具體參見源碼
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}2，列組合
<div class="container">
<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-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>注意：大小向上兼容，也就是col-xs-6適用所有屏幕，col-md-4適用中屏幕及更大屏幕
3，列偏移
<div class="row">
<div class="col-xs-3 col-xs-offset-3">col-xs-3</div>
<div class="col-xs-2 col-xs-offset-2">col-xs-2</div>
</div>col-xs-offset-3 向右偏移三格
4，列嵌套
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
<div class="col-md-4">4</div>
</div>5，列排序
<div class="row">
<div class="col-md-3 col-md-push-5">col-md-3</div>
<div class="col-md-2 col-md-pull-2">col-md-2</div>
</div>col-md-push-5 向右5格， col-md-pull-2 向左2格
三，柵格參數
1，跨設備組合定義
<div class="row">
<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
</div>注意：<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
可以在中等屏幕和小屏幕分別以不同的百分比排列
2，清除浮動
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 1
<br />ssssssssssssss
</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 2</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 4</div>
</div><div class="clearfix visible-xs"></div>只在xs分辨率時清除浮動當一行不能放下所有列，浮動到下一行顯示
四，禁止響應佈局
1，刪除viewport的meta
2，爲.container設固定寬度
3，對導航移除摺疊和展開行爲
