Bootstrap 簡述

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

什么是 Bootstrap

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

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

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

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

有了這些，你可以搭建一個(gè) Web 項(xiàng)目，并讓它運(yùn)行地更快速更輕松。

此外，由于整個(gè)框架是基于模塊的，您可以通過您自己的 CSS 位，甚至是項(xiàng)目開始后的一個(gè)大整改，來進(jìn)行自定義。

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

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

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

為什么使用 Bootstrap？

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

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

容易上手：只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí)，您就可以開始學(xué)習(xí) Bootstrap。

響應(yīng)式設(shè)計(jì)：Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)。

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

它包含了功能強(qiáng)大的內(nèi)置組件，易于定制。

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

它是開源的。

Bootstrap 包的內(nèi)容

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

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

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

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

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

下載并理解文件結(jié)構(gòu)

您可以從 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。

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

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

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

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

在根文件內(nèi)，有一個(gè)單獨(dú)的 'js' 文件夾，包含了不同文件中的不同的 JavaScript 插件。

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

在相同的文件夾內(nèi)，有一個(gè) 'ico' 文件夾，包含了 favicon 圖標(biāo)和各種移動(dòng)設(shè)備圖標(biāo)。

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

'_includes' 和 '_layouts' 文件夾包含了一些默認(rèn)的布局結(jié)構(gòu)文件，這些可能對(duì)快速原型設(shè)計(jì)很有用。

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

在根文件夾內(nèi)，有一些文件。一些是用于基礎(chǔ)原型設(shè)計(jì)的 HTML 文件，一些是用于基于 Bower 編譯的 bower.json、browserstack.json。除此之外，還有 composer.json 和一個(gè) YAML 文件 _config.yml。

Bootstrap 實(shí)例

<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>