Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置爲 HTML5 文檔類型。
頭部內容
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--移動設備優先，爲了確保適當的繪製和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標籤。!-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap3中默認定義頁面爲12個邏輯列，我們需要通過定義元素佔據的列的數量來定義頁面佈局效果
所有佈局列定義必須放入.row定義元素，並且.row定義元素必須定義到.container或者.container-fluid元素中，如下：
<div class="container">
<!-- 定義的佈局必須添加到class定義row中 //-->
<div class="row">
<!-- 這裏定義具體的頁面佈局 //-->
</div>
</div>
佈局柵格化
xs：extra small 特別窄屏幕，默認指瀏覽器像素寬度小於768px
sm：small 窄屏幕，默認指瀏覽器像素寬度大於等於768px
md：middle 中等寬度屏幕，默認值指瀏覽器像素寬度大於等於992px
lg：large 大屏幕，默認值指瀏覽器像素寬度大於等於1200px
通過定義以上不同的設備的CSS，我們可以針對不同設備定義不同類型的佈局，如下：
<div class="row">
<div class="col-sm-3 col-xs-12 grey box">目錄</div>
<div class="col-sm-1 col-xs-12"></div>
<div class="col-sm-8 col-xs-12 orange box">內容</div>
- xs設備中三個元素分別佔據完整頁面寬度
- sm設備中三個元素分別佔據3個列，1個列和8個列寬度
</div>
在處理不同像素寬度的時候，大寬度的適配優先於窄寬度（即ls>md>sm>xs）。
柵格偏移
offset：左外邊距（margin-left）；
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 col-xs-offset-4"></div>
</div>
pull：右位移（right）；
push：左位移（left）
push和pull主要用來調整列順序的，比如視圖情況需要內容區域在右邊，側邊欄在左邊，但源代碼則必須內容在左邊，側邊欄在右邊，內容的代碼在前面
<div class="row">
<div class="col-md-9 col-md-push-3">
源代碼左邊，但視圖在右邊
</div>
<div class="col-md-3 col-md-pull-9">
源代碼右邊，但視圖在右邊
</div>
</div>