Bootstrap 簡介

目標

Bootstrap是最流行的前端框架，目前已經發佈了它的第三個版本（v3.0.0）。本教學將帶您開始學習 Bootstrap 3。

您還將看到如何使用自定義與眾不同的框架的框特徵，比如使用網格創建佈局，通過 nav 創建導航，使用 carousal 創建下拉框，添加社交插件和 Google Map 等第三方插件。

screenshot of the demo


什麼是 Bootstrap

Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。

在現代 Web 開發中，有幾個幾乎所有的 Web 專案中都需要的組件。

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

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

有了這些，你可以搭建一個 Web 專案，並讓它運行地更快速更輕鬆。

此外，由於整個框架是基於模組的，您可以通過您自己的 CSS 位，甚至是專案開始後的一個大整改，來進行自定義。

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

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

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

為什麼要在專案中使用 Bootstrap？


下載並理解檔結構

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

解壓縮後，您會發現，在根檔夾 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 進行開發，這些檔將會很有用。

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

除了從給定的鏈接進行下載，您還可以使用下麵的命令編譯所有的 CSS、JS 檔 - 

$ bower install bootstrap

您可以複製 Bootstrap 的 Git 報告 

git clone git://github.com/twbs/bootstrap.git

本教程中，我們僅僅下載了 Zip 檔，並不對它進行使用。

一旦您學習了本教學，我們鼓勵您通過 bower 安裝框架來瞭解它是如何工作的。

NetDNA 支持編譯和簡化版的 Bootstrap CSS、Js 和其他主題 css。您可以通過以下語句對它們進行引用

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

通過 Bootstrap v3.0.0 進行開發

基本的 HTML

以下是將用於我們專案的基本的 HTML 結構

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap V3 template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
  </body>
</html>

請注意，範本中添加的 html5shiv.js 和 respond.min.js 是用於獲得 IE8 支持。在 Bootstrap 版本 3 中已經添加了這些檔。

我們在 Web 伺服器的根檔夾內的 twitter-bootstrap 檔夾內，已經放置了 bootstrap-3.0.0 檔夾。我們創建的所有 HTML 檔將會放置在 twitter-bootstrap 內。之所以說明這點，是為了簡化我們的開發過程。

定制

我們將定制與眾不同的 CSS 框樣式。所以，在不破壞原始的 CSS 檔的基礎上（位於 bootstrap-3.0.0 的 dist 檔夾內），在相同的檔夾下，我們將創建一個獨立的 CSS 檔，名為 custom.css。然後我們在 HTML 檔中，緊接在原始的 CSS 檔後面，引用這個 CSS 檔。這樣，我們就能覆蓋我們想要改變的默認的樣式，但是，如果 Bootstrap 升級，原始的 CSS 檔也會在不破壞我們的定制的基礎上隨之更新。我們建議您在開發過程中也按照這種方法。

創建導航

如需創建導航，請在 HTML 檔中，緊跟著 body 的開始標籤之後，添加下麵的代碼。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <ul class="nav navbar-nav">
  <li><a href="new.html" class="navbar-brand">
<img src="logo.png"></a></li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="price.html">Price</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
          <li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
          <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
       </ul>
      </li>
  </ul>
</nav>

對於導航，Bootstrap 在容器層級中使用 'navbar' class。所以，它會分配給持有整個導航的 nav 元素。

我們已經使用了 'navbar-inverse' class 來改變導航欄的默認顏色，使用深色代替之前默認的淺色。'navbar-fixed-top' class 確保了當我們向下滾動 HTML 頁面時，導航欄固定在頂部位置。

在 Bootstrap V3.0.0 中，當創建導航的時候使用 role="navigation" 是新增的。Bootstrap 推薦這麼使用，以便於導航欄易於訪問。

在這一點上，我們在 custom.css 檔中向 body 增加了 'padding-top: 80px;'。您添加到 body 中作為頂部填充的像素可能會有所不同，但除非你這樣做，導航欄之後的內容的頂端部分，將會被隱藏。

在容器 nav 內，我們有一個 class 為 'nav' 和 'navbar-nav' 的無序列表。在這個無序列表內，每個列表項都包含導航中的一個鏈接。

'navbar-brand' class 用於呈現品牌名稱。我們已經使用了一個圖像。由於圖像的高度大於導航欄基線高度，在這裏我們做一些自定義。把 '.navbar-nav>li>a' 的 'line-height' 屬性從原來默認的 20px 增加到 50px，改變字體大小為 16px。

最右邊的鏈接，我們已經增加了下拉框。對於添加到相關 li 中的 'dropdown' class，緊跟其後，添加一個帶有 'dropdown-toggle' 和 'caret' 兩個 class 的錨。這個錨實際上包含了我們專案中的錨文本 social。這個 li 則包含了一個無序列表，嵌套在列表中的每個列表項都包含了顯示在下列框中的鏈接。

在下拉框中我們已經添加了 social 插件。第一個 li 包含了 Google Plus 標記，第二個 li 包含了 Facebook 標記，第三個 li 包含了顯示 Twitter 按鈕的標記和一些 js 腳本。

此外，您必須在 body 的開始標籤後，添加下麵的標記和腳本，以使 Facebook 按鈕工作

<div id="fb-root"></div>


(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

為了讓 Twitter 按鈕工作，我們在 body 的結束標籤前，增加下麵的腳本

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

我們使用下麵的樣式來添加一些額外的樣式到 'socials' class 的 social 按鈕。

.socials {
padding: 10px;
}

這樣就完成了我們的導航。

通過 carousal 創建幻燈片

為了在專案的首頁的導航欄下，創建一個幻燈片，我們將使用下麵的標記

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="computer.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Large Desktops are everywhere</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
    <div class="item">
      <img src="mobile.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Mobiles are outnumbering desktops</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
<div class="item">
      <img src="cloud1.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Enterprises are adopting Cloud computing fast</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

在 Carousal 中有四個部分。主容器使用一個帶有 'carousel slide' class 的 div 標籤定義。

然後是一個帶有 'carousel-indicators' class 的有序列表。ol 中的每個列表項代表一個幻燈。當頁面加載時，默認加載的幻燈帶有 'active' class。當渲染時，您會在標題下麵的小圓圈看到它們。

然後，每個幻燈（圖像）被放置在一個帶有 'item' class 的 div 標籤中。每個項被嵌套在一個帶有 'carousel-caption' class 的 div 中。carousel-caption 包含一些與圖像一起顯示為標題的標記。段落中包含一個 h1 和一個按鈕，您也可以包含其他自己的標記。

最後一部分是用於控制下一個幻燈/上一個幻燈片。這是使用 'left' 和 'carousel-control' class 定義上一個，使用 'right' 和 'carousel-control' class 定義下一個。

'icon-prev' 和 'icon-next' class 用於下一個和上一個圖示。

我們已經在默認的 carousal 中做了一些定制。我們希望字幕，指標和下一個/上一個圖示被渲染成在默認位置之上的幾個像素。

為了做到這點，我們在 custom.css 檔中添加下麵的樣式

.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}

我們還定制了 h1，給它添加了一個 30 像素的底部邊距。

h1 {
  margin-bottom: 30px
  }

回應圖像

您可能已經注意到，在幻燈片中的每個圖像，我們已經使用了 'img-responsive' class。這是一個 Bootstrap v3.0.0 中的新功能。通過在 img 標籤中使用 'img-responsive' class，Bootstrap 讓圖像回應。

創建網格

在幻燈片下麵，我們使用網格放置內容。通過一個帶有 'container' class 的 div 開始一個網格。請注意，我們將要開發一個反應靈敏的網站，而不是之前版本的 Bootstrap，在這裏，容器有一個單一的 class，默認是 responsive。

容器 div 嵌套了若干個帶有 'row' class 的 div（第一行中有三個，第二行中有六個），用來創建 Bootstrap 網格的行。

每個行都有一個帶有 'col-x-y' class 的 div，用來創建列。x 的值可以是：用於移動設備的 xs、用於平板電腦的 sm、用於筆記本電腦和更小的桌面螢幕的 md，用於大的桌面螢幕的 lg。這是第一種方法。y 的值可以是任何正整數，但網格中列的總數必須不超過 12 個。在我們的專案中，為簡單起見我們已經使用了 lg，但既然我們已經這樣做了，您可能拿一個手機或平板電腦觀看專案站點，以進行比較。

在後面的教學中，我們將有一個 Bootstrap 網格系統的完整教程，來探討它迷人的回應特性。

在這個實例中，我們想讓第一行的三個列寬度相等，所以我們對所有的列使用 'col-lg-4'。在第二行中，我們想讓六個列寬度相等，所以我們對所有的列使用 'col-lg-2'。

下麵是包含兩個行的網格的標記，第一行有三列，第二行有六列。

<div class="row barone">
<div class="col-lg-2">
<p><

我們通過一個 hr 和一個帶有下列標記的頁腳結束網格


<hr>
<p>Copyright@2013-14 by ToDo App.</p>



使用表


在我們專案的 price.html 頁面中，我們使用了表格來呈現一個價格表，標記如下所示


<table class="table table-bordered">
          <thead>
            <tr>
              <th>Features</th>
              <th>Individual</th>
              <th>Small Team</th>
              <th>Medium Team</th>
              <th>Enterprise</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><h3>No. Of users</h3></td>
              <td><span class="badge">One</span></td>
              <td><span class="badge">Five</span></td>
              <td><span class="badge">Fifteen</span></td>
              <td><span class="badge">Unlimited</span></td>
           </tr>
            <tr>
              <td><h3>Pro training</h3></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
            <tr>
              <td><h3>Forum Support</h3></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
    <tr>
              <td><h3>In person support</h3></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
       <tr>
              <td><h3>Weekly webinars</h3></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
     <tr>
              <td><h3>Price</h3></td>
              <td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
              <td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
              <td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
              <td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
           </tr>
        <tr>
              <td></td>
              <td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
              <td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
              <td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
              <td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
           </tr>
          </tbody>
        </table>



使用 Bootstrap 原始 CSS 檔中的 'table' 和 'table-bordered' 兩個 class。但是我們已經通過在 customize.css 檔中添加下麵的 CSS 進行一些自定義來讓表格看起來不一樣


th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}



使用徽章


我們使用 'badge' class 來在表格中顯示一些文本。我們有帶有下麵 CSS 的自定義的 badge class


.badge {
background-color: #428bca;
color: #fff;
font-size: 22px;
}



對於該頁面和 contact.html 頁面，我們在 customize.css 中添加了另一個 CSS 規則


.container > h1 {
text-align: center;
}



這讓 h1 居中對齊。


使用表單


在 contact.html 檔中，我們創建了三個列，在第一列中，我們嵌入一個表單。表單使用默認樣式。


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="email" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-lg-2 control-label">Name</label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="name" placeholder="Name">
    </div>
  </div>
   <div class="form-group">
    <label for="country" class="col-lg-2 control-label">Country</label>
    <div class="col-lg-10">
      <select>
      <option>USA</option>
      <option>India</option>
      <option>UK</option>
      <option>Autralia</option>
      </select>
    </div>
  </div>
<div class="form-group">
    <label for="desc" class="col-lg-2 control-label">Message</label>
    <div class="col-lg-10">
      <textarea rows="5" cols="50"></textarea>
    </div>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>



'form-horizontal' class 讓表單保持水準對齊。請注意，為了易於訪問，添加 role="form"。這是版本 3.0.0 中的新特性。


為了定位每個表單控件，Bootstrap 3.0.0 使用了一個新的 'form-group' class。 


在該頁面中，網格的第二列，我們只是簡單地放置了一些文本。


添加 Google 地圖


在 contact.html 頁面中，網格的第三列，我們添加了 Google Map（穀歌地圖）。為了做到這一點，我們使用了下麵的標記


<div id="map_canvas"></div>
  </div>



下麵的 js 添加到 HTML 檔頭部的頁眉內


function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(23.244066, 87.861276),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);



在之前說的 js 之前，您必須添加下麵的腳本標記


<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>



為了讓地圖正確呈現，您必須在 custom.css 中添加下麵的樣式


#map_canvas {
        width: 400px;
        height: 400px;
}



這就是如何創建一個簡單的基於 Bootstrap V3.0.0 的專案。但是我們只是接觸了表層，後面的章節將會進行更詳細的講解。