Bootstrap 的網格系統是基於媒體查詢（media query）實現的，即根據當前設備的尺寸等信息控制具體採用哪種 css樣式。
一、@media 媒體查詢
（一）、基礎
語法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}1、mediatype
取值：all（所有設備）|print（打印設備）|screen（顯示設備如電腦屏幕、平板電腦、智能手機等）|speech（屏幕閱讀器等發聲設備）|其它幾個廢棄的媒體類型。可選。
2、and|not|only
連接 mediatype與media feature 的邏輯值。
3、media feature
大概的取值：
device-aspect-ratio：屏幕可見寬度與高度的比率）；
device-height：屏幕可見高度；
device-width：屏幕可見寬度；
height：頁面可見區域高度（注意是html 頁面）；
width：頁面可見區域寬度（同上）；
resolution：設備的分辨率；
max-上面的屬性：上面屬性的最大值（如 max-width:800px 匹配寬度不超過800px 的設備）；
min-上面的屬性：同理（min-width:800px 匹配寬度至少爲800px 的設備）。
示例：
<!DOCTYPE html>
<html>
<head>
<title>學習Bootstrap 柵格</title>
<style type="text/css">
div{
background-color: pink;
}
@media screen and (max-width: 1370px) {
/*電腦屏幕分辨率爲1366*768，所以該html 中div背景會顯示爲淺藍色*/
div {
background-color:lightblue;
}
}
</style>
</head>
<body>
<div>我是什麼顏色的</div>
</body>
</html>（二）、使用媒體查詢的方式
1、在<style> 標籤中
<style type="text/css">
.container{width:90%}
@media (min-width:790px){
.container{width:100%;}
}
@media (min-width:1370px){
.container{width:80%;}
}
</style>2、在<link>標籤中使用media 引入不同css
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">二、Boostrap 網格系統
（一）、基礎認識
Bootstrap 將一行（row）等分成12列，一個盒子（<div>）可以用類指定佔用幾列，一行的高度由該行中包含列的最大高度決定。行可以嵌套在列中。
基礎使用示例：
1、CDN 方式引入Bootstrap 與jQuery：
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入）
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>2、基礎示例：
body部分：
<body>
<div class="container">
<div class="row">
<div class=" col-sm-4">
<div class="col-xs-4 contentCenter"><button>按鈕</button></div>
<div class="col-xs-8">8列</div>
</div>
<div class=" col-sm-8">我佔6列</div>
</div>
<div class="row">新的一行</div>
</div>
</body>效果：
（二）、樣式類說明
1、Bootstrap 定義的類都有特定的樣式，如上面的container 默認左右都有一定的padding。如果要去除某些特定樣式，在style 中覆蓋即可。如：
<style type="text/css">
.container{padding:0;margin:0;}
</style>2、幾個基礎網格類嵌套順序爲：container、row、col-*-*。當然單獨使用col-*-*類也會有效果（不建議）。
3、列類說明：
col-xs-n：對超小設備（寬度<768px），佔n列；
col-sm-n：對較小設備（>=768px），佔n列；
col-md-n：對中型設備（>=992），佔n列；
col-lg-n：對大型設備（>=1200px），佔n列。
記憶：xs（exceed small），sm（small），md（middle），lg（large）
說明：如果只指定一種設備的類型，則不管在什麼設備上，都會採用該類型。如第一個例子中col-sm-*與col-xs-*還是產生作用了。
（三）、列重置
未指定類型的@media 媒體查詢是用於html 文檔，Bootstrap 定義的樣式也必然只是運用於html 文檔。可以查看部分bootstrap 的less 代碼：
.container {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}可見，未指定媒體類型，因此container 等類是用於當前html 文檔的。
既然如此，那麼當對瀏覽器窗口進行縮放，也就是對html 頁面寬度進行調整時，爲了限制最小寬度，普通 css可以通過float 實現，當縮小瀏覽器寬度時，右側的元素被自動擠到下一行。
但Bootstrap 是通過以行作爲單位的，如果只指定一個col-*-*類型，無論怎麼縮小寬度，右側的列並不會被擠到下一行，這時可通過定義多個不同列類型（col-*-*）實現與元素浮動時相似的效果。如：
<div class="row">
<div class="col-md-6 col-lg-3">內容1</div>
<div class="col-md-6 col-lg-3">內容2</div>
<div class="col-md-6 col-lg-3">內容3</div>
<div class="col-md-6 col-lg-3">內容4</div>
</div>col-lg-*是對寬度>=1200px 的頁面定義的類；col-md-*是對寬度992px<=width<1200px定義的類。
瀏覽器窗口（寬度1366px）不縮放時的效果：
縮放到一定寬度（小於1200px）時的效果：
若還定義了col-xs-*與col-sm-*類，那麼繼續縮小寬度，將採用sm的樣式或xs的樣式。
可見，用 bootstrap 製作響應式佈局還是很方便的。
詳細參考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html
三、Bootstrap 圖標
Bootstrap 中提供了一些免費圖標，感覺非常有用，使用方式也簡單，在此記錄下。
如（圖標下方的爲該圖標的類）：
使用規則：
不能與其它boostrap 組件類共同存在，需用單獨的空的span 包裹，如使用上面第2行第3個圖標：
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>刪除
</button>效果：
此處對按鈕使用了bootstrap 的樣式。
Bootstrap 圖標及其它組件地址：http://v3.bootcss.com/components/
這些圖標實際來源於
http://glyphicons.com/，對bootstrap 中的使用是免費的，所以得感謝他們的共享！