本文參考來自bootstrap柵格化系統實現
http://getbootstrap.com/css/#grid
Bootstrap柵格化系統
Bootstrap 的柵格化系統采用將頁面布局分為12列，再根據頁面寬度采用預定義類控制模塊占用寬度比例的思想，實現響應式布局。此方法論下的實現可以兼容較多種比例的頁面布局，命名比較規范，多列布局頁面開發值得借鑒；
柵格化系統的工作規范
（1）.container(.container-fluid)>.row>.column;采用容器內行(row)列(column)布局方式，.column必須包含在.row中，.row必須包含在.container中；.container可以包含多個.row，.row可以包含多個.column;
（2）展示的內容應當放置于.column類中，并且只有.column可以作為.row的子元素;
(3)使用類似于.row .col-xs-4等預定義類，快速創建柵格化布局；
（4）柵格類適用于屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格化類，比如.col-md-*在.container-fludid寬度≥992px時生效；
媒介分類
Bootstrap將屏幕大小分為4類
/* 屏幕大小小于768px*/
@media (max-width: 767px) { ... }
/*屏幕最小寬度為768px*/
@media (min-width: 768px) { ... }
/*屏幕最小寬度為992px*/
@media (min-width: 992px) { ... }
/*屏幕最小寬度為1200px*/
@media (min-width: 1200px) { ... }
代表屏幕大小的幾個縮寫形式：
xs：extra small 特別窄屏幕，默認指瀏覽器像素寬度小于768px；
sm：small 窄屏幕，默認指瀏覽器像素寬度大于等于768px，通常是平板寬度；
md：middle 中等寬度屏幕，默認值指瀏覽器像素寬度大于等于992px，通常是桌面顯示器，略縮小的情況；
lg：large 大屏幕，默認值指瀏覽器像素寬度大于等于1200px。
實例1：列寬比例展示展示
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" >
<style type="text/css">
.row {
margin-bottom: 20px;
}
.row div {
min-height: 50px;
text-align: center;
line-height: 50px;
}
.row1 div {
border: 1px solid #ff0000;
}
.row2 div {
border: 1px solid #00ff00;
}
.row3 div {
border: 1px solid #0000ff;
}
.row3 div {
border: 1px solid #ccad00;
}
.row4 div {
border: 1px solid #ffaf00;
}
</style>
</head>
<body>
<div class="row row1">
<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 row2">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row row3">
<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 row4">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</body>
</html>
預期結果：
.col--1樣式在控制范圍內會使其控制塊寬度為父容器的1/12;
.col--8樣式在控制范圍內會使其控制塊寬度為父容器的8/12;
.col--4樣式在控制范圍內會使其控制塊寬度為父容器的4/12;
.col--6樣式在控制范圍內會使其控制塊寬度為父容器的6/12;
實際運行結果：
實例1：列寬比例展示展示
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" >
<style type="text/css">
.row {
margin-bottom: 20px;
}
.row div {
min-height: 150px;
text-align: center;
line-height: 40px;
}
.row1 div {
border: 1px solid #df24b1;
}
#doc-width-info {
color: #ffaf00;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="doc-width-info"></div>
<div class="container-fluid">
<div class="row row1">
<div class="col-sm-2 col-md-3 col-lg-1">.col-sm-2 .col-md-3 .col-lg-1 </div>
<div class="col-sm-4 col-md-3 col-lg-2">.col-sm-4 .col-md-3 .col-lg-2 </div>
<div class="col-sm-4 col-md-3 col-lg-8">.col-sm-4 .col-md-3 .col-lg-8 </div>
<div class="col-sm-2 col-md-3 col-lg-1">.col-sm-2 .col-md-3 .col-lg-1 </div>
</div>
</div>
</body>
<script>
var divDocWith = document.getElementById("doc-width-info");
var showDocWidth = function () {
divDocWith.innerHTML = "文檔寬度:" + document.body.scrollWidth + 'px';
}
window.onload = function () {
showDocWidth();
}
window.onresize = function () {
showDocWidth();
}
</script>
</html>
預期結果：
（1）container≥1200px(lg):4列布局1：2：8：1；
（2）container≥992px && container＜1200px(md)：3:3:3:3
（3）container≥768px && container＜991px(sm)：2:4:4:2
（3）container＜768px(xs)：div 默認display:block
實際運行結果：
總結
代碼可copy來運行，從運行結果可看出與預期一致，bootstrap有一套比較規范的布局流，使整個頁面的布局行為保持一致，前端同學在實際開發中可以借鑒；
