Bootstrap 是 Twitter 推出的一個開源的用於前端開發的工具包, 該工具包能讓 web 開發更迅速、簡單。
Bootstrap 的口號是 Designed for everyone, everywhere.（適用於任何場景，適用於每一個人）.
主要有以下特色：

  • 支援所有主流瀏覽器
  • 12 列柵格佈局
  • 響應式設計
  • 基本 CSS 樣式：常見的 HTML 元素 — 如排版、程式碼、表格、表單、和按鈕的樣式。還包括 Glyphicons, 一個非常棒的圖示集。
  • 樣式化的檔案以及常用的定製的 jQuery 外掛, 其中包括：模式對話方塊、標籤頁、捲軸、彈出框等。等等
  • Bootstrap 中包含了豐富的 Web 元件，根據這些元件，可以快速的搭建一個漂亮、功能完備的網站。其中包括以下元件：
    下拉選單、按鈕組、按鈕下拉選單、導航、導航條、麵包屑、分頁、排版、縮圖、警告對話方塊、進度條、媒體物件等

Bootstrap 目錄結構

Bootstrap 目錄結構如下圖所示：

從目錄中我們可以看出 bootstrap 提供了 js，css 及圖示檔案，js 與 css 提供了壓縮版 （bootstrap.min.*） 與未壓縮版 （bootstrap.*） 。

Bootstrap 例項

使用了 Bootstrap 後我們無需考慮 CSS 的寫法，只需要注重 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 開發任何網站和應用程式了。
說明：bootstrap 的 js 是基於 jquery 的，所以你在載入 bootstrap.min.js 前必須先載入 jquery.js

Bootstrap 相關資料

目前 Bootstrap 在國內已經慢慢的流行起來，越來越多的人使用了 Bootstrap 進行前端的開發。網上也提供了大量的資料及例項.