詳解Bootstrap實現基本布局的方法
看到了一篇 20 分鐘打造 Bootstrap 站點的文章，內容有點老，重新使用 Bootstrap3 實現一下，將涉及的內容也盡可能詳細說明。
1. 創建基本的頁面
我們先創建一個基本的 HTML 模板頁面，使用 sublime + emmet 可以直接創建這個頁面。
1.1 新建一個文件， Ctrl + N
1.2 保存到頁面文件中，Ctrl + S，命名為 index.html
1.3 在這個空白頁面中，輸入 html:5，然後直接按制表鍵 Tab，就應該可以看到一個基本的 HTML5 模板頁面了。
1.4 再次保存，按 Ctrl + S.
頁面內容應該如下：
|
1 2 3 4 5 6 7 8 9 10 |
|
2. 添加 Bootstrap 文件引用
在 index.html 文件所在的文件夾中，創建 css 文件夾，用來保存所有的樣式文件，在 css 子文件夾中創建一個名為 bootstrap 的文件夾，用來保存我們的 bootstrap 文件。
從 bootstrap 官網可以下載到 bootstrap 的包，其中有一個 dist 的文件夾，這個文件夾中包含了三個子文件夾：css, font 和 js。將這三個子文件夾復制到你的 css/bootstrap 文件夾中。
在頁面中會涉及兩部分內容，樣式和腳本。
2.1 添加樣式引用
在 header 中添加 bootstrap 的樣式引用。註意路徑。
|
1 2 |
rel="stylesheet"/>
|
bootstrap.min.css 是 bootstrap 的樣式文件，包含了所有的 bootstrap 樣式定義，bootstrap-theme.min.css 則是主題定義。
2.2 添加腳本引用
由於 bootstrap 使用了 jQuery 的腳本，所以，你還需要下載 jquery 腳本庫。
在你的 index.html 文件所在目錄中，創建一個名為 lib 的子目錄，用來保存以後使用的腳本庫，將下載得到的 jquery.min.js 復制到這個目錄中。
在緊鄰你的 </body> 之間添加 jquery 和 bootstrap 腳本庫引用。
|
1 2 3 |
|
3. 添加 bootstrap 容器
bootstrap的 .container 類是非常有用的，它能在頁面中創建一個居中的區域，然後我們能夠把其他位置的內容放到裏面。container類等價於創建了一個具有靜態寬度並且magin值為auto的一個居中的p框。twitter bootstrap的 container類的優點在於它是響應式的，它會以當前屏幕的寬度為基礎計算出最佳的寬度予以使用。
.container-fluid 則是一個全寬的容器，使用整個寬度。
詳解Bootstrap實現基本布局的方法