Bootstrap 簡述

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優(yōu)化而來。

什么是 Bootstrap

Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。

在現(xiàn)代 Web 開發(fā)中，有幾個幾乎所有的 Web 項目中都需要的組件。

Bootstrap 為您提供了所有這些基本的模塊 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。

此外，還有大量其他有用的前端組件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了這些，你可以搭建一個 Web 項目，并讓它運行地更快速更輕松。

此外，由于整個框架是基于模塊的，您可以通過您自己的 CSS 位，甚至是項目開始后的一個大整改，來進行自定義。

它是基于幾種最佳實踐，我們認為這是一個很好的開始學習現(xiàn)代 Web 開發(fā)的時機，一旦您掌握了 HTML 和 JavaScript/jQuery 的基本知識，您就可以在 Web 開發(fā)中運用這些知識。

雖然，也有批評，所有通過 Bootstrap 構建的項目看起來相同，您可以不需要知道太多的 HTML + CSS 知識就可以構建一個網(wǎng)站。但是，我們需要明白，Bootstrap 是一個通用的框架，就像任何其他通用的東西，您需要定制才能讓它具有獨特性。當您要定制時，您需要深入研究，沒有良好的 HTML + CSS 基礎是不可行的。

當然除了 Bootstrap，還有很多其他好的前端框架，使用哪種框架是開發(fā)人員的選擇，但 Bootstrap 絕對是值得嘗試的。

為什么使用 Bootstrap？

移動設備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設備優(yōu)先的樣式。

瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。

容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。

響應式設計：Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。

它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。

它包含了功能強大的內置組件，易于定制。

它還提供了基于 Web 的定制。

它是開源的。

Bootstrap 包的內容

基本結構：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結構。

CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網(wǎng)格系統(tǒng)。

組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導航、警告框、彈出框等等。

JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。

定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

下載并理解文件結構

您可以從 https://github.com/twbs/bootstrap/archive/v3.0.0.zip 或 https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip 上下載 Bootstrap Version 3.0.0。

此外，我們提供下載的代碼包含了一個通過第一個鏈接下載的 bootstrap 代碼文件夾。這里邊也包含了用來定制 Bootstrap 的原始的 css 的 custom.css。

解壓縮后，您會發(fā)現(xiàn)，在根文件夾 bootstrap-3.0.0 內有一些文件和文件夾。

主要的 CSS 文件 - bootstrap.css 以及它的簡化版 bootstrap-min.css，位于根文件夾 bootstrap-3.0.0 下 的 'dist' 文件夾中的 'css' 文件夾中。

在 'dist' 內，有一個 'js' 文件夾，包含了主要的 JavaScript 文件 bootstrap.js 以及它的簡化版。

在根文件內，有一個單獨的 'js' 文件夾，包含了不同文件中的不同的 JavaScript 插件。

在根文件內的 'assets' 內，會找到另一個 'js' 文件夾。這里放置著 HTML5 shim 的 html5shiv.js，用于獲得 IE8 支持。還有一個 respond.min.js 文件，用于支持 IE8 中的多媒體查詢。該文件夾還包含了 Bootstrap 的 js 插件依賴的 jquery.js。

在相同的文件夾內，有一個 'ico' 文件夾，包含了 favicon 圖標和各種移動設備圖標。

在同一路徑中的 'css' 文件夾，包含了文檔的 css 文件。

'_includes' 和 '_layouts' 文件夾包含了一些默認的布局結構文件，這些可能對快速原型設計很有用。

根文件夾內的 'less' 文件夾包含了一些 .less 文件。如果您要基于 LESS 進行開發(fā)，這些文件將會很有用。

在根文件夾內，有一些文件。一些是用于基礎原型設計的 HTML 文件，一些是用于基于 Bower 編譯的 bower.json、browserstack.json。除此之外，還有 composer.json 和一個 YAML 文件 _config.yml。

Bootstrap 實例

<div class="container">
  <p>Create a responsive table with alternating cell background color:</p> 
  
  <div class="table-responsive"> 
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Street</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna Awesome</td>
          <td>Broome Street</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Debbie Dallas</td>
          <td>Houston Street</td>
        </tr>
        <tr>
          <td>3</td>
          <td>John Doe</td>
          <td>Madison Street</td>
        </tr>
      </tbody>
    </table>
  </div>


</div>