## 起步
### Bootstrap 概述
2010 年 6 月，Twitter 內部的工程師為了解決前端開發任務中的協作統一問題。經歷各種方案后，Bootstrap 最終被確定下來，并于 2011 年 8 月發布。經過很長時間的迭代升級，由最初的 CSS 驅動項目發展成為內置很多 JavaScript 插件和圖標的多功能 Web 前端的開源框架。
Bootstrap 最為重要的部分就是它的響應式布局，通過這種布局可以兼容 PC 端、PAD以及手機移動端的頁面訪問。
### 下載
國內文檔翻譯官網：http://www.bootcss.com
進入以上官網中Bootstrap3頁面，下載：
下載完成后解壓文件夾，得到一下原始項目結構：
主要分為三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。
1. css 目錄中有四個 css 后綴的文件，其中包含 min 字樣的，是壓縮版本，一般使用這個；不包含的屬于沒有壓縮的，可以學習了解 css 代碼的文件；而 map 后綴的文件則是 css 源碼映射表，在一些特定的瀏覽器工具中使用。
2. js 目錄包含兩個文件，是未壓縮和壓縮的 js 文件。
3. fonts 目錄包含了不同后綴的字體文件。
### 創建第一個頁面
我們創建一個 HTML5 的頁面，并且將 Bootstrap 的核心文件引入，然后測試是否正常顯示。
~~~html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
~~~
### HTML5 文檔類型
Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。
~~~html
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
~~~
### 移動設備優先
Bootstrap 3 重寫了整個框架，使其一開始就是對移動設備友好的，Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每個角落，而不是增加一個額外的文件。
為了確保適當的繪制和觸屏縮放，需要在` <head>` 之中添加 viewport 元數據標簽。
~~~html
<meta name="viewport" content="width=device-width, initial-scale=1">
~~~
在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。
~~~html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
~~~
> 這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式并不推薦所有網站使用，還是要看你自己的情況而定。
### Normalize.css
為了增強跨瀏覽器表現的一致性，我們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。
### 布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 `.container `容器。我們提供了兩個作此用處的類。注意，由于 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
`.container` 類用于固定寬度并支持響應式布局的容器。
~~~html
<div class="container">
...
</div>
~~~
`.container-fluid `類用于 100% 寬度，占據全部視口（viewport）的容器。
~~~html
<div class="container-fluid">
...
</div>
~~~
