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>