Latest web development tutorials

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.ziphttps://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-xy' 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><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>

我們通過一個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-horizo​​ntal" 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-horizo​​ntal' 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 的項目。 但是我們只是接觸了表層,後面的章節將會進行更詳細的講解。