Bootstrap 簡介
目標
Bootstrap是最流行的前端框架,目前已經發布了它的第三個版本(v3.0.0)。 本教程將帶您開始學習Bootstrap 3。
您還將看到如何使用自定義與眾不同的框架的框特徵,比如使用網格創建佈局,通過nav 創建導航,使用carousal 創建下拉框,添加社交插件和Google Map 等第三方插件。
什麼是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-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-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 的項目。 但是我們只是接觸了表層,後面的章節將會進行更詳細的講解。