1. 下載
下載之前先檢查一下是否准備好了一個代碼編輯器(我們推薦使用 Sublime Text 2) ，你是否已經掌握了足夠的HTML和CSS知識以開展工作。這里我們不詳述源碼文件，但是它們可以隨時被下載。在這里我們只着重介紹使用已經編譯好的Bootstrap文件進行入門講解。
2. 文件結構
在下載的壓縮包中你可以看到如下的文件結構和內容。所有文件按邏輯進行分類存儲，並且提供了編譯和壓縮兩個版本的文件。
將下載的文件解壓縮之后就可以看到如下的文件結構：
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png
這就是Bootstrap的基本結構：編譯后的文件可以快速應用於任何web項目。我們提供了編譯版的CSS和JS文件 (bootstrap.*)，也同時提供了編譯並壓縮之后的CSS和JS文件 (bootstrap.min.*)。圖片文件是使用 ImageOptim 工具進行壓縮的，這個工具是Mac平台上用於壓縮PNG文件的一個app。
請注意，所有的JavaScript插件都依賴jQuery庫。
3. 包含了哪些東西
Bootstrap中的HTML、CSS和JS適用於各類設備, 不過它們可以被概括成幾個類別，請看本文檔頂部的導航條。
文檔章節
腳手架
全局性的樣式文件，用於重置背景、鏈接樣式、柵格系統等，並包含兩個簡單的布局結構。
基本CSS樣式
常見的HTML元素 -- 如排版、代碼、表格、表單、和按鈕的樣式。還包括 Glyphicons, 一個非常棒的圖標集。
組件
常見界面組件 -- 如標簽、pill、導航、警告、頁面標題的基本樣式。
JavaScript插件
和組件類似，這些Javascript插件用來實現提示(tooltip)、彈出框(popover)、模態對話框(modal)等具有交互性的組件。
組件列表
組件庫 和 JavaScript插件集 一同提供了以下組件元素。
- 按鈕組
- 按鈕下拉菜單
- 用於導航的標簽、pill、列表
- 導航條
- Labels
- Badges
- Page headers and hero unit
- 縮略圖
- 警告對話框
- 進度條
- 模態對話框(Modals)
- 下拉菜單(Dropdowns)
- Tooltips
- Popovers
- Accordion
- Carousel
- Typeahead
在后面的文檔中, 我們會挨個詳細的介紹這些組件的細節。在此之前, 先來看看如何使用並定制它們。
4. 基本的HTML模版
為了把注意力完全放到使用Bootstrap上，我們先做一點兒課前准備。為了做到這一點，我們將利用一個基本的HTML模板, 其中包括我們在文件結構一章中提到的所有內容。
現在, 這里展示一個典型的HTML文件：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="http://code.jquery.com/jquery.js"></script>
- </body>
- </html>
為了使其成為一個Bootstrap模板, 需要包含相應的 CSS and JS 文件：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="http://code.jquery.com/jquery.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
- </html>
設置成功! 加入這兩個文件, 你就可以開始用Bootstrap開發任何網站和應用程序了。
5. 案例
希望下面的幾個案例能引導大家在基礎模版的基礎上做發散性思維。我們鼓勵大家參考下面的案例舉一反三，而不要僅僅是機械式的照抄。
最簡模版
一個包含了Bootstrap的所有CSS和JavaScript文件的最簡HTML文檔。
基本的營銷類網站
具有一個主消息板塊和三個輔助性元素。
流式布局
使用新的響應式布局, 流式柵格系統建立的一個流式布局。
精簡版的營銷類網站
適用於小項目或團隊的簡單、輕量級的營銷類模板。
兩端對齊的導航條
帶有等寬的導航鏈接的市場營銷類頁面，導航條在原始樣式的基礎上進行了修改。
登錄框
基本的登錄表單，使用到了自定義的較大的表單組件和靈活的布局。
頁腳固定在底部
將固定高度的頁腳釘在頁面可視區域的最下方。
大屏輪播
一個更具交互、突出輪播的基本營銷類網站。
下一步？
根據文檔頂部的分類查看更多案例、代碼片段, 或定制Bootstrap，為你即將開展的項目做一次徹底改變。