上一篇：Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦下一篇：Bootstrap 3 CSS 概覽

Bootstrap 簡介

目標(biāo)

Bootstrap是最流行的前端框架，目前已經(jīng)發(fā)布了它的第三個(gè)版本（v3.0.0）。本教程將帶您開始學(xué)習(xí) Bootstrap 3。

您還將看到如何使用自定義與眾不同的框架的框特征，比如使用網(wǎng)格創(chuàng)建布局，通過 nav 創(chuàng)建導(dǎo)航，使用 carousal 創(chuàng)建下拉框，添加社交插件和 Google Map 等第三方插件。

screenshot of the demo

什么是 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í)。

雖然，也有批評，所有通過 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 絕對是值得嘗試的。

為什么要在項(xiàng)目中使用 Bootstrap？

下載并理解文件結(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è)。

此外，我們提供下載的代碼包含了一個(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)文件，這些可能對快速原型設(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。

除了從給定的鏈接進(jìn)行下載，您還可以使用下面的命令編譯所有的 CSS、JS 文件 -

$ bower install bootstrap

您可以復(fù)制 Bootstrap 的 Git 報(bào)告

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

本教程中，我們僅僅下載了 Zip 文件，并不對它進(jìn)行使用。

一旦您學(xué)習(xí)了本教程，我們鼓勵(lì)您通過 bower 安裝框架來了解它是如何工作的。

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" >

<!-- Optional theme -->
<link rel="stylesheet" >

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

通過 Bootstrap v3.0.0 進(jìn)行開發(fā)

基本的 HTML

以下是將用于我們項(xiàng)目的基本的 HTML 結(jié)構(gòu)

<!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="http://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 中已經(jīng)添加了這些文件。

我們在 Web 服務(wù)器的根文件夾內(nèi)的 twitter-bootstrap 文件夾內(nèi)，已經(jīng)放置了 bootstrap-3.0.0 文件夾。我們創(chuàng)建的所有 HTML 文件將會(huì)放置在 twitter-bootstrap 內(nèi)。之所以說明這點(diǎn)，是為了簡化我們的開發(fā)過程。

定制

我們將定制與眾不同的 CSS 框樣式。所以，在不破壞原始的 CSS 文件的基礎(chǔ)上（位于 bootstrap-3.0.0 的 dist 文件夾內(nèi)），在相同的文件夾下，我們將創(chuàng)建一個(gè)獨(dú)立的 CSS 文件，名為 custom.css。然后我們在 HTML 文件中，緊接在原始的 CSS 文件后面，引用這個(gè) CSS 文件。這樣，我們就能覆蓋我們想要改變的默認(rèn)的樣式，但是，如果 Bootstrap 升級，原始的 CSS 文件也會(huì)在不破壞我們的定制的基礎(chǔ)上隨之更新。我們建議您在開發(fā)過程中也按照這種方法。

創(chuàng)建導(dǎo)航

如需創(chuàng)建導(dǎo)航，請?jiān)?HTML 文件中，緊跟著 body 的開始標(biāo)簽之后，添加下面的代碼。

<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- 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  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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
       </ul>
      </li>
  </ul>
</nav>

對于導(dǎo)航，Bootstrap 在容器層級中使用 'navbar' class。所以，它會(huì)分配給持有整個(gè)導(dǎo)航的 nav 元素。

我們已經(jīng)使用了 'navbar-inverse' class 來改變導(dǎo)航欄的默認(rèn)顏色，使用深色代替之前默認(rèn)的淺色。'navbar-fixed-top' class 確保了當(dāng)我們向下滾動(dòng) HTML 頁面時(shí)，導(dǎo)航欄固定在頂部位置。

在 Bootstrap V3.0.0 中，當(dāng)創(chuàng)建導(dǎo)航的時(shí)候使用 role="navigation" 是新增的。Bootstrap 推薦這么使用，以便于導(dǎo)航欄易于訪問。

在這一點(diǎn)上，我們在 custom.css 文件中向 body 增加了 'padding-top: 80px;'。您添加到 body 中作為頂部填充的像素可能會(huì)有所不同，但除非你這樣做，導(dǎo)航欄之后的內(nèi)容的頂端部分，將會(huì)被隱藏。

在容器 nav 內(nèi)，我們有一個(gè) class 為 'nav' 和 'navbar-nav' 的無序列表。在這個(gè)無序列表內(nèi)，每個(gè)列表項(xiàng)都包含導(dǎo)航中的一個(gè)鏈接。

'navbar-brand' class 用于呈現(xiàn)品牌名稱。我們已經(jīng)使用了一個(gè)圖像。由于圖像的高度大于導(dǎo)航欄基線高度，在這里我們做一些自定義。把 '.navbar-nav>li>a' 的 'line-height' 屬性從原來默認(rèn)的 20px 增加到 50px，改變字體大小為 16px。

最右邊的鏈接，我們已經(jīng)增加了下拉框。對于添加到相關(guān) li 中的 'dropdown' class，緊跟其后，添加一個(gè)帶有 'dropdown-toggle' 和 'caret' 兩個(gè) class 的錨。這個(gè)錨實(shí)際上包含了我們項(xiàng)目中的錨文本 social。這個(gè) li 則包含了一個(gè)無序列表，嵌套在列表中的每個(gè)列表項(xiàng)都包含了顯示在下列框中的鏈接。

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

此外，您必須在 body 的開始標(biāo)簽后，添加下面的標(biāo)記和腳本，以使 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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

為了讓 Twitter 按鈕工作，我們在 body 的結(jié)束標(biāo)簽前，增加下面的腳本

(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;
}

這樣就完成了我們的導(dǎo)航。

通過 carousal 創(chuàng)建幻燈片

為了在項(xiàng)目的首頁的導(dǎo)航欄下，創(chuàng)建一個(gè)幻燈片，我們將使用下面的標(biāo)記

<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 中有四個(gè)部分。主容器使用一個(gè)帶有 'carousel slide' class 的 div 標(biāo)簽定義。

然后是一個(gè)帶有 'carousel-indicators' class 的有序列表。ol 中的每個(gè)列表項(xiàng)代表一個(gè)幻燈。當(dāng)頁面加載時(shí)，默認(rèn)加載的幻燈帶有 'active' class。當(dāng)渲染時(shí)，您會(huì)在標(biāo)題下面的小圓圈看到它們。

然后，每個(gè)幻燈（圖像）被放置在一個(gè)帶有 'item' class 的 div 標(biāo)簽中。每個(gè)項(xiàng)被嵌套在一個(gè)帶有 'carousel-caption' class 的 div 中。carousel-caption 包含一些與圖像一起顯示為標(biāo)題的標(biāo)記。段落中包含一個(gè) h1 和一個(gè)按鈕，您也可以包含其他自己的標(biāo)記。

最后一部分是用于控制下一個(gè)幻燈/上一個(gè)幻燈片。這是使用 'left' 和 'carousel-control' class 定義上一個(gè)，使用 'right' 和 'carousel-control' class 定義下一個(gè)。

'icon-prev' 和 'icon-next' class 用于下一個(gè)和上一個(gè)圖標(biāo)。

我們已經(jīng)在默認(rèn)的 carousal 中做了一些定制。我們希望字幕，指標(biāo)和下一個(gè)/上一個(gè)圖標(biāo)被渲染成在默認(rèn)位置之上的幾個(gè)像素。

為了做到這點(diǎn)，我們在 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，給它添加了一個(gè) 30 像素的底部邊距。

h1 {
  margin-bottom: 30px
  }

響應(yīng)圖像

您可能已經(jīng)注意到，在幻燈片中的每個(gè)圖像，我們已經(jīng)使用了 'img-responsive' class。這是一個(gè) Bootstrap v3.0.0 中的新功能。通過在 img 標(biāo)簽中使用 'img-responsive' class，Bootstrap 讓圖像響應(yīng)。

創(chuàng)建網(wǎng)格

在幻燈片下面，我們使用網(wǎng)格放置內(nèi)容。通過一個(gè)帶有 'container' class 的 div 開始一個(gè)網(wǎng)格。請注意，我們將要開發(fā)一個(gè)反應(yīng)靈敏的網(wǎng)站，而不是之前版本的 Bootstrap，在這里，容器有一個(gè)單一的 class，默認(rèn)是 responsive。

容器 div 嵌套了若干個(gè)帶有 'row' class 的 div（第一行中有三個(gè)，第二行中有六個(gè)），用來創(chuàng)建 Bootstrap 網(wǎng)格的行。

每個(gè)行都有一個(gè)帶有 'col-x-y' class 的 div，用來創(chuàng)建列。x 的值可以是：用于移動(dòng)設(shè)備的 xs、用于平板電腦的 sm、用于筆記本電腦和更小的桌面屏幕的 md，用于大的桌面屏幕的 lg。這是第一種方法。y 的值可以是任何正整數(shù)，但網(wǎng)格中列的總數(shù)必須不超過 12 個(gè)。在我們的項(xiàng)目中，為簡單起見我們已經(jīng)使用了 lg，但既然我們已經(jīng)這樣做了，您可能拿一個(gè)手機(jī)或平板電腦觀看項(xiàng)目站點(diǎn)，以進(jìn)行比較。

在后面的教程中，我們將有一個(gè) Bootstrap 網(wǎng)格系統(tǒng)的完整教程，來探討它迷人的響應(yīng)特性。

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

下面是包含兩個(gè)行的網(wǎng)格的標(biāo)記，第一行有三列，第二行有六列。

<div class="row barone">
<div class="col-lg-2">
<p><img src="/wp-content/uploads/2013/10/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="/wp-content/uploads/2013/10/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="/wp-content/uploads/2013/10/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="/wp-content/uploads/2013/10/java.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="/wp-content/uploads/2013/10/postgresql.png"></p>
</div>
</div>

我們通過一個(gè) hr 和一個(gè)帶有下列標(biāo)記的頁腳結(jié)束網(wǎng)格

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

使用表

在我們項(xiàng)目的 price.html 頁面中，我們使用了表格來呈現(xiàn)一個(gè)價(jià)格表，標(biāo)記如下所示

<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' 兩個(gè) class。但是我們已經(jīng)通過在 customize.css 文件中添加下面的 CSS 進(jìn)行一些自定義來讓表格看起來不一樣

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 中添加了另一個(gè) CSS 規(guī)則

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

這讓 h1 居中對齊。

使用表單

在 contact.html 文件中，我們創(chuàng)建了三個(gè)列，在第一列中，我們嵌入一個(gè)表單。表單使用默認(rèn)樣式。

<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 中的新特性。

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

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

添加 Google 地圖

在 contact.html 頁面中，網(wǎng)格的第三列，我們添加了 Google Map（谷歌地圖）。為了做到這一點(diǎn)，我們使用了下面的標(biāo)記

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

下面的 js 添加到 HTML 文件頭部的頁眉內(nèi)

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 之前，您必須添加下面的腳本標(biāo)記

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

為了讓地圖正確呈現(xiàn)，您必須在 custom.css 中添加下面的樣式

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

這就是如何創(chuàng)建一個(gè)簡單的基于 Bootstrap V3.0.0 的項(xiàng)目。但是我們只是接觸了表層，后面的章節(jié)將會(huì)進(jìn)行更詳細(xì)的講解。

其他擴(kuò)展