jQuery插件+AJAX+Bootstrap+HTML5+CSS3兩周學(xué)習(xí)總結(jié)

三四周學(xué)習(xí)總結(jié)馬巧巧學(xué)習(xí)內(nèi)容：jQuery插件AJAXBootstrapHTML5CSS3總結(jié)jQuery插件的開(kāi)發(fā)包括兩種：一種是類級(jí)別的插件開(kāi)發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。（jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)。）例：jQuery.extend({

jQuery.foo

=

function()

{

alert('This

is

a

test.

This

is

only

a

test.');

};

jQuery.bar

=

function(param)

{

alert('This

function

takes

a

parameter,

which

is

"'

+

param

+

'".');

};

});調(diào)用時(shí):

jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');jQuery插件的開(kāi)發(fā)包括兩種：2.另一種是對(duì)象級(jí)別的插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法例：形式1：

(function($){

$.fn.extend({

pluginName:function(opt,callback){

//代碼；

}

})

})(jQuery);

形式2：

(function($){

$.fn.pluginName=function(){ //代碼；

};

})(jQuery);析：上面定義了一個(gè)jQuery函數(shù),形參是$，函數(shù)定義完成之后,把jQuery這個(gè)實(shí)參傳遞進(jìn)去.立即調(diào)用執(zhí)行。這樣的好處是,我們?cè)趯?xiě)jQuery插件時(shí),也可以使用$這個(gè)別名,而不會(huì)與prototype引起沖突.其他與插件相關(guān)內(nèi)容：（不詳細(xì)介紹）匿名函數(shù)將函數(shù)轉(zhuǎn)換為表達(dá)式的方法： 分組操作符()，void操作符，~操作符，！操作符... 例：(function($){ //dosomething; })(jQuery);給插件默認(rèn)參數(shù)，實(shí)現(xiàn)插件的功能注：當(dāng)使用returnjQuery對(duì)象時(shí)，才能使用鏈?zhǔn)秸{(diào)用暴露公共方法，給別人擴(kuò)展你的插件（如果有需求的話）插件私有方法返回首頁(yè)AJAX（異步交互的方式）：概述：通過(guò)HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。jQuery底層AJAX實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)用$.get,$.post等。$.ajax()返回其創(chuàng)建的XMLHttpRequest對(duì)象。大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性。最簡(jiǎn)單的情況下，$.ajax()可以不帶任何參數(shù)直接使用。注：所有的選項(xiàng)都可以通過(guò)$.ajaxSetup()函數(shù)來(lái)全局設(shè)置。語(yǔ)法： jQuery.ajax(url,[settings]) 返回值:XMLHttpRequest析：url:一個(gè)用來(lái)包含發(fā)送請(qǐng)求的URL字符串。 settings:AJAX請(qǐng)求設(shè)置。所有選項(xiàng)都是可選的。AJAX（異步交互的方式）：setting選項(xiàng)：（只介紹個(gè)別常用的）async—(默認(rèn):true)默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。cache—(默認(rèn):true,dataType為script和jsonp時(shí)默認(rèn)為false)jQuery1.2新功能，設(shè)置為false將不緩存此頁(yè)面。type—(默認(rèn):"GET")請(qǐng)求方式("POST"或"GET")url—(默認(rèn):當(dāng)前頁(yè)地址)發(fā)送請(qǐng)求的地址。data—發(fā)送到服務(wù)器的數(shù)據(jù)dataType—預(yù)期服務(wù)器返回的數(shù)據(jù)類型error—(默認(rèn):自動(dòng)判斷(xml或html))請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。有以下三個(gè)參數(shù)：XMLHttpRequest對(duì)象、錯(cuò)誤信息、（可選）捕獲的異常對(duì)象。如果發(fā)生了錯(cuò)誤，錯(cuò)誤信息（第二個(gè)參數(shù)）除了得到null之外，還可能是"timeout","error","notmodified"和"parsererror"。processData—(默認(rèn):true)默認(rèn)情況下，通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù)，如果是一個(gè)對(duì)象(技術(shù)上講只要不是字符串)，都會(huì)處理轉(zhuǎn)化成一個(gè)查詢字符串，以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。success(data,textStatus,jqXHR)—請(qǐng)求成功后的回調(diào)函數(shù)。不詳細(xì)介紹以下：acceptsbeforeSend(XHR)complete(XHR,TS)contentscontentTypecontextconverterscrossDomaindataFilterglobalheadersifModifiedisLocaljsonpjsonpCallbackmimeTypepasswordscriptCharsetstatusCodetraditionaltimeoutusernamexhrxhrFieldsAJAX（異步交互的方式）：回調(diào)函數(shù)：如果要處理$.ajax()得到的數(shù)據(jù)，則需要使用回調(diào)函數(shù)。beforeSend、error、dataFilter、success、complete。beforeSend在發(fā)送請(qǐng)求之前調(diào)用，并且傳入一個(gè)XMLHttpRequest作為參數(shù)。error在請(qǐng)求出錯(cuò)時(shí)調(diào)用。傳入XMLHttpRequest對(duì)象，描述錯(cuò)誤類型的字符串以及一個(gè)異常對(duì)象（如果有的話）dataFilter在請(qǐng)求成功之后調(diào)用。傳入返回的數(shù)據(jù)以及"dataType"參數(shù)的值。并且必須返回新的數(shù)據(jù)（可能是處理過(guò)的）傳遞給success回調(diào)函數(shù)。success當(dāng)請(qǐng)求之后調(diào)用。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串。complete當(dāng)請(qǐng)求完成之后調(diào)用這個(gè)函數(shù)，無(wú)論成功或失敗。傳入XMLHttpRequest對(duì)象，以及一個(gè)包含成功或錯(cuò)誤代碼的字符串。AJAX（異步交互的方式）：兩個(gè)常用示例：返回首頁(yè)Bootstrap：Bootstrap簡(jiǎn)介和優(yōu)勢(shì)BootstrapcssBootstrap布局組件Bootstrap插件 注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.htmlBootstrap簡(jiǎn)介和優(yōu)勢(shì)：簡(jiǎn)介：

Bootstrap，來(lái)自Twitter，是目前最受歡迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它簡(jiǎn)潔靈活，使得Web開(kāi)發(fā)更加快捷。優(yōu)勢(shì)：移動(dòng)設(shè)備優(yōu)先：自Bootstrap3起，框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。瀏覽器支持：所有的主流瀏覽器都支持Bootstrap。InternetExplorer、Firefox、Opera、GoogleChrome、Safari容易上手：只要您具備HTML和CSS的基礎(chǔ)知識(shí)，您就可以開(kāi)始學(xué)習(xí)Bootstrap。響應(yīng)式設(shè)計(jì)：Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)。更多有關(guān)響應(yīng)式設(shè)計(jì)的內(nèi)容詳見(jiàn)Bootstrap響應(yīng)式設(shè)計(jì)。它為開(kāi)發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案。它包含了功能強(qiáng)大的內(nèi)置組件，易于定制。它還提供了基于Web的定制。它是開(kāi)源的。Bootstrapcss包括以下內(nèi)容：Bootstrap網(wǎng)格系統(tǒng)Bootstrap排版Bootstrap代碼Bootstrap表格Bootstrap表單Bootstrap按鈕Bootstrap圖像Bootstrap幫助器類Bootstrap網(wǎng)格系統(tǒng)定義：Bootstrap包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到12列。它包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類，也包含了用于生成更多語(yǔ)義布局的功能強(qiáng)大的混合類。基本網(wǎng)格結(jié)構(gòu)：

<divclass="container"> <divclass="row"> <divclass="col-*-*"></div> <divclass="col-*-*"></div> </div> <divclass="row">...</div> </div> <divclass="container">....多設(shè)備工作圖：Bootstrap排版定義：Bootstrap使用HelveticaNeue、Helvetica、Arial和sans-serif作為其默認(rèn)的字體棧。使用Bootstrap的排版特性，您可以創(chuàng)建標(biāo)題、段落、列表及其他內(nèi)聯(lián)元素。標(biāo)題—（h1到h6）及內(nèi)聯(lián)子標(biāo)題<small>強(qiáng)調(diào)—默認(rèn)強(qiáng)調(diào)標(biāo)簽<small>（設(shè)置文本為父文本大小的85%）、<strong>（設(shè)置文本為更粗的文本）、<em>（設(shè)置文本為斜體）?？s寫(xiě)—Bootstrap定義<abbr>元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為<abbr>title屬性添加了文本）地址—使用<address>標(biāo)簽，您可以在網(wǎng)頁(yè)上顯示聯(lián)系信息。由于<address>默認(rèn)為display:block;，您需要使用標(biāo)簽來(lái)為封閉的地址文本添加換行。引用—您可以在任意的HTML文本旁使用默認(rèn)的<blockquote>。其他選項(xiàng)包括，添加一個(gè)<small>標(biāo)簽來(lái)標(biāo)識(shí)引用的來(lái)源，使用class.pull-right向右對(duì)齊引用。列表—Bootstrap支持有序列表、無(wú)序列表和定義列表。Bootstrap代碼Bootstrap允許您以兩種方式顯示代碼：第一種是<code>標(biāo)簽。如果您想要內(nèi)聯(lián)顯示代碼，那么您應(yīng)該使用<code>標(biāo)簽。第二種是<pre>標(biāo)簽。如果代碼需要被顯示為一個(gè)獨(dú)立的塊元素或者代碼有多行，那么您應(yīng)該使用<pre>標(biāo)簽。 示例如圖所示：注：請(qǐng)確保當(dāng)您使用<pre>和<code>標(biāo)簽時(shí)，開(kāi)始和結(jié)束標(biāo)簽使用了unicode變體：<和>。Bootstrap表格定義：Bootstrap提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了Bootstrap支持的一些表格元素： 如圖所示：可選的表格類：條紋表格：通過(guò)添加.table-stripedclass，您將在<tbody>內(nèi)的行上看到條紋邊框表格：通過(guò)添加.table-borderedclass，您將看到每個(gè)元素周圍都有邊框，且占整個(gè)表格是圓角的懸停表格：通過(guò)添加.table-hoverclass，當(dāng)指針懸停在行上時(shí)會(huì)出現(xiàn)淺灰色背景精簡(jiǎn)表格：通過(guò)添加.table-condensedclass，行內(nèi)邊距（padding）被切為兩半，以便讓表看起來(lái)更緊湊響應(yīng)式表格：通過(guò)把任意的.table包在.table-responsiveclass內(nèi)，您可以讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備（小于768px）。當(dāng)在大于768px寬的大型設(shè)備上查看時(shí)，您將看不到任何的差別。注：具體樣式請(qǐng)參照http://www.w3cschool.cc/bootstrap/bootstrap-tables.htmlBootstrap表單定義： Bootstrap通過(guò)一些簡(jiǎn)單的HTML標(biāo)記和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。類型：垂直表單（默認(rèn)）內(nèi)聯(lián)表單水平表單支持的表單控件： Bootstrap支持最常見(jiàn)的表單控件，主要是input、textarea、checkbox、radio和select。靜態(tài)控件： 當(dāng)您需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí)，請(qǐng)?jiān)?lt;p>上使用class.form-control-static。表單控件大?。?您可以分別使用class.input-lg和.col-lg-*來(lái)設(shè)置表單的高度和寬度。 Bootstrap表單控件可以在輸入框input上有一個(gè)塊級(jí)幫助文本。為了添加一個(gè)占用整個(gè)寬度的內(nèi)容塊，請(qǐng)?jiān)?lt;input>后使用.help-block。Bootstrap表單表單控件狀態(tài)定義：

除了focus狀態(tài)（即，用戶點(diǎn)擊input或使用tab鍵聚焦到input上），Bootstrap還為禁用的輸入框定義了樣式，并提供了表單驗(yàn)證的class。輸入框焦點(diǎn)： 當(dāng)輸入框input接收到:focus時(shí)，輸入框的輪廓會(huì)被移除，同時(shí)應(yīng)用box-shadow。禁用的輸入框input： 如果您想要禁用一個(gè)輸入框input，只需要簡(jiǎn)單地添加disabled屬性，這不僅會(huì)禁用輸入框，還會(huì)改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式。禁用的字段集fieldset： 對(duì)<fieldset>添加disabled屬性來(lái)禁用<fieldset>內(nèi)的所有控件。驗(yàn)證狀態(tài)： Bootstrap包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)腸lass（.has-warning、.has-error或.has-success）即可使用驗(yàn)證狀態(tài)。注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-forms.htmlBootstrap按鈕定義： 任何帶有class.btn的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀。但是Bootstrap提供了一些選項(xiàng)來(lái)定義按鈕的樣式，具體如下表所示：按鈕大小: 列出了獲得各種大小按鈕的class按鈕狀態(tài):

Bootstrap提供了激活、禁用等按鈕狀態(tài)的class按鈕標(biāo)簽:

您可以在<a>、<button>或<input>元素上使用按鈕class。但是建議您在<button>元素上使用按鈕class，避免跨瀏覽器的不一致性問(wèn)題。注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-buttons.htmlBootstrap圖像定義： Bootstrap提供了三個(gè)可對(duì)圖像應(yīng)用簡(jiǎn)單樣式的class： 1、.img-rounded：添加border-radius:6px來(lái)獲得圖像圓角。 2、.img-circle：添加border-radius:500px來(lái)讓整個(gè)圖像變成圓形。 3、.img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。 如下圖所示：Bootstrap幫助器類關(guān)閉圖標(biāo)

使用通用的關(guān)閉圖標(biāo)來(lái)關(guān)閉模態(tài)框和警告框。使用classclose得到關(guān)閉圖標(biāo)。插入符

使用插入符表示下拉功能和方向。使用帶有classcaret的<span>元素得到該功能。快速浮動(dòng)

您可以分別使用classpull-left或pull-right來(lái)把元素向左或向右浮動(dòng)。下面的實(shí)例演示了這點(diǎn)。居中內(nèi)容塊

使用classcenter-block來(lái)居中元素。清除浮動(dòng)

如需清除元素的浮動(dòng)，請(qǐng)使用.clearfixclass。顯示和隱藏內(nèi)容

您可以通過(guò)使用class.show和.hidden來(lái)強(qiáng)行設(shè)置元素顯示或隱藏（包括屏幕閱讀器）。屏幕閱讀器

您可以通過(guò)使用class.sr-only來(lái)把元素對(duì)所有設(shè)備隱藏，除了屏幕閱讀器。注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-helper-classes.htmlBootstrap布局組件包括以下內(nèi)容：Bootstrap字形圖標(biāo)Bootstrap下拉菜單Bootstrap按鈕組Bootstrap按鈕下拉菜單Bootstrap輸入框組Bootstrap導(dǎo)航元素Bootstrap導(dǎo)航欄Bootstrap面包屑導(dǎo)航Bootstrap分頁(yè)十、Bootstrap標(biāo)簽和徽章十一、Bootstrap縮略圖十二、Bootstrap進(jìn)度條Bootstrap字形圖標(biāo)定義：

字形圖標(biāo)（Glyphicons）是在Web項(xiàng)目中使用的圖標(biāo)字體。用法：

如需使用圖標(biāo)，只需要簡(jiǎn)單地使用下面的代碼即可。請(qǐng)?jiān)趫D標(biāo)和文本之間保留適當(dāng)?shù)目臻g。 例：<spanclass="glyphiconglyphicon-search"></span> 帶有導(dǎo)航欄的字形圖標(biāo)（Glyphicons） 定制字形圖標(biāo)（Glyphicons）：定制字體尺寸、顏色、文本陰影效果如圖所示： 注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-glyphicons.htmlBootstrap下拉菜單定義：

下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。這可以通過(guò)與下拉菜單（Dropdown）JavaScript插件的互動(dòng)來(lái)實(shí)現(xiàn)。如需使用下列菜單，只需要在class.dropdown內(nèi)加上下拉菜單即可。選項(xiàng)：

對(duì)齊：通過(guò)向.dropdown-menu添加class.pull-right來(lái)向右對(duì)齊下拉菜單。 標(biāo)題：您可以使用classdropdown-header向下拉菜單的標(biāo)簽區(qū)域添加標(biāo)題。效果如圖所示：注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-dropdowns.htmlBootstrap按鈕組定義：

按鈕組允許多個(gè)按鈕被堆疊在同一行上。當(dāng)你想要把按鈕對(duì)齊在一起時(shí)，這就顯得非常有用。您可以通過(guò)Bootstrap按鈕（Button）插件添加可選的JavaScript單選框和復(fù)選框樣式行為。 如下表所示：效果如圖所示： 注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-button-groups.htmlBootstrap按鈕下拉菜單定義：

如需向按鈕添加下拉菜單，只需要簡(jiǎn)單地在在一個(gè).btn-group中放置按鈕和下拉菜單即可。您也可以使用<spanclass="caret"></span>來(lái)指示按鈕作為下拉菜單。分割的按鈕下拉菜單

分割的按鈕下拉菜單使用與下拉菜單按鈕大致相同的樣式，但是對(duì)下拉菜單添加了原始的功能。分割按鈕的左邊是原始的功能，右邊是顯示下拉菜單的切換。按鈕下拉菜單的大小

您可以使用帶有各種大小按鈕的下拉菜單：.btn-large、.btn-sm或.btn-xs。按鈕上拉菜單

菜單也可以往上拉伸的，只需要簡(jiǎn)單地向父.btn-group容器添加.dropup即可。效果如圖所示： 注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-button-dropdowns.htmlBootstrap輸入框組定義：

輸入框組擴(kuò)展自表單控件。使用輸入框組，您可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。通過(guò)向輸入域添加前綴和后綴的內(nèi)容，您可以向用戶輸入添加公共的元素。例如，您可以添加美元符號(hào)，或者在Twitter用戶名前添加@，或者應(yīng)用程序接口所需要的其他公共的元素。 步驟如下：

把前綴后后綴元素放在一個(gè)帶有class.input-group的<div>中。

接著，在相同的<div>內(nèi)，在class為.input-group-addon的<span>內(nèi)放置額外的內(nèi)容。

把該<span>放置在<input>元素的前面或者后面。輸入框組的大小

您可以通過(guò)向.input-group添加相對(duì)表單大小的class（比如.input-group-lg、input-group-sm、input-group-xs）來(lái)改變輸入框組的大小。輸入框中的內(nèi)容會(huì)自動(dòng)調(diào)整大小。復(fù)選框和單選插件

您可以把復(fù)選框和單選插件作為輸入框組的前綴或者后綴元素按鈕插件

您也可以把按鈕作為輸入框組的前綴或者后綴元素，這個(gè)時(shí)候您就不是添加.input-group-addonclass，您需要使用class.input-group-btn來(lái)包裹按鈕。這是必需的，因?yàn)槟J(rèn)的瀏覽器樣式不會(huì)被重寫(xiě)。帶有下拉菜單的按鈕

在輸入框組中添加帶有下拉菜單的按鈕，只需要簡(jiǎn)單地在一個(gè).input-group-btnclass中包裹按鈕和下拉菜單即可分割的下拉菜單按鈕

在輸入框組中添加帶有下拉菜單的分割按鈕，使用與下拉菜單按鈕大致相同的樣式，但是對(duì)下拉菜單添加了主要的功能效果如圖所示： 注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-input-groups.htmlBootstrap導(dǎo)航元素定義：

它們使用相同的標(biāo)記和基類.nav。Bootstrap也提供了一個(gè)用于共享標(biāo)記和狀態(tài)的幫助器類。改變修飾的class，可以在不同的樣式間進(jìn)行切換。表格導(dǎo)航或標(biāo)簽：

創(chuàng)建一個(gè)標(biāo)簽式的導(dǎo)航菜單：以一個(gè)帶有class.nav的無(wú)序列表開(kāi)始。添加class.nav-tabs。膠囊式的導(dǎo)航菜單：

基本的膠囊式導(dǎo)航菜單：

如果需要把標(biāo)簽改成膠囊的樣式，只需要使用class.nav-pills代替.nav-tabs即可，其他的步驟與上面相同。

垂直的膠囊式導(dǎo)航菜單：

您可以在使用class.nav、.nav-pills的同時(shí)使用class.nav-stacked，讓膠囊垂直堆疊。兩端對(duì)齊的導(dǎo)航：

您可以在屏幕寬度大于768px時(shí)，通過(guò)在分別使用.nav、.nav-tabs或.nav、.nav-pills的同時(shí)使用class.nav-justified，讓標(biāo)簽式或膠囊式導(dǎo)航菜單與父元素等寬。在更小的屏幕上，導(dǎo)航鏈接會(huì)堆疊。禁用鏈接

對(duì)每個(gè).navclass，如果添加了.disabledclass，則會(huì)創(chuàng)建一個(gè)灰色的鏈接，同時(shí)禁用了該鏈接的:hover狀態(tài)，下拉菜單：

導(dǎo)航菜單與下拉菜單使用相似的語(yǔ)法。默認(rèn)情況下，列表項(xiàng)的錨與一些數(shù)據(jù)屬性協(xié)同合作來(lái)觸發(fā)帶有.dropdown-menuclass的無(wú)序列表。帶有下拉菜單的標(biāo)簽：

向標(biāo)簽添加下拉菜單的步驟如下：以一個(gè)帶有class.nav的無(wú)序列表開(kāi)始。添加class.nav-tabs。添加帶有.dropdown-menuclass的無(wú)序列表。效果如圖所示： 注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-navigation-elements.htmlBootstrap導(dǎo)航欄定義：

導(dǎo)航欄是一個(gè)很好的功能，是Bootstrap網(wǎng)站的一個(gè)突出特點(diǎn)。導(dǎo)航欄是響應(yīng)式元組件就，作為應(yīng)用程序或網(wǎng)站的導(dǎo)航標(biāo)題。導(dǎo)航欄在移動(dòng)設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會(huì)水平展開(kāi)。在Bootstrap導(dǎo)航欄的核心中，導(dǎo)航欄包括了為站點(diǎn)名稱和基本的導(dǎo)航定義樣式。默認(rèn)的導(dǎo)航欄：

創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下： 1、向<nav>標(biāo)簽添加class.navbar、.navbar-default。 2、向上面的元素添加role="navigation"，有助于增加可訪問(wèn)性。 3、向<div>元素添加一個(gè)標(biāo)題class.navbar-header，內(nèi)部包含了帶有classnavbar-brand的<a>元素。這會(huì)讓文本看起來(lái)更大一號(hào)。

為了向?qū)Ш綑谔砑渔溄?，只需要?jiǎn)單地添加帶有class.nav、.navbar-nav的無(wú)序列表即可。響應(yīng)式的導(dǎo)航欄

為了給導(dǎo)航欄添加響應(yīng)式特性，您要折疊的內(nèi)容必須包裹在帶有classes.collapse、.navbar-collapse的<div>中。折疊起來(lái)的導(dǎo)航欄實(shí)際上是一個(gè)帶有class.navbar-toggle及兩個(gè)data-元素的按鈕。第一個(gè)是data-toggle，用于告訴JavaScript需要對(duì)按鈕做什么，第二個(gè)是data-target，指示要切換到哪一個(gè)元素。三個(gè)帶有class.icon-bar的<span>創(chuàng)建所謂的漢堡按鈕。這些會(huì)切換為.nav-collapse<div>中的元素。為了實(shí)現(xiàn)以上這些功能，您必須包含Bootstrap折疊（Collapse）插件。導(dǎo)航欄中的表單

導(dǎo)航欄中的表單不是使用Bootstrap表單章節(jié)中所講到的默認(rèn)的class，它是使用.navbar-formclass。這確保了表單適當(dāng)?shù)拇怪睂?duì)齊和在較窄的視口中折疊的行為。使用對(duì)齊方式選項(xiàng)（這將在組件對(duì)齊方式部分進(jìn)行詳細(xì)講解）來(lái)決定導(dǎo)航欄中的內(nèi)容放置在哪里。您可以使用class.navbar-btn向不在<form>中導(dǎo)航欄中的文本

如果需要在導(dǎo)航中包含文本字符串，請(qǐng)使用class.navbar-text。這通常與<p>標(biāo)簽一起使用，確保適當(dāng)?shù)那皩?dǎo)和顏色。的<button>元素添加按鈕，按鈕在導(dǎo)航欄上垂直居中。.navbar-btn可被使用在<a>和<input>元素上。Bootstrap導(dǎo)航欄非導(dǎo)航鏈接：

如果您不想在常規(guī)的導(dǎo)航欄導(dǎo)航組件內(nèi)使用標(biāo)準(zhǔn)的鏈接，那么請(qǐng)使用classnavbar-link來(lái)為默認(rèn)的和倒轉(zhuǎn)的導(dǎo)航欄選項(xiàng)添加適當(dāng)?shù)念伾M件對(duì)齊方式：

您可以使用實(shí)用工具class.navbar-left或.navbar-right向左或向右對(duì)齊導(dǎo)航欄中的導(dǎo)航鏈接、表單、按鈕或文本這些組件。這兩個(gè)class都會(huì)在指定的方向上添加CSS浮動(dòng)。固定到頂部：

Bootstrap導(dǎo)航欄可以動(dòng)態(tài)定位。默認(rèn)情況下，它是塊級(jí)元素，它是基于在HTML中放置的位置定位的。通過(guò)一些幫助器類，您可以把它放置在頁(yè)面的頂部或者底部，或者您可以讓它成為隨著頁(yè)面一起滾動(dòng)的靜態(tài)導(dǎo)航欄。

如果您想要讓導(dǎo)航欄固定在頁(yè)面的頂部，請(qǐng)向.navbarclass添加class.navbar-fixed-top。固定到底部：

如果您想要讓導(dǎo)航欄固定在頁(yè)面的底部，請(qǐng)向.navbarclass添加class.navbar-fixed-bottom。靜態(tài)的頂部：

如需創(chuàng)建能隨著頁(yè)面一起滾動(dòng)的導(dǎo)航欄，請(qǐng)?zhí)砑?navbar-static-topclass。該class不要求向<body>添加內(nèi)邊距（padding）。倒置的導(dǎo)航欄

為了創(chuàng)建一個(gè)帶有黑色背景白色文本的倒置的導(dǎo)航欄，只需要簡(jiǎn)單地向.navbarclass添加.navbar-inverseclass即可效果如圖所示：注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-navbar.htmlBootstrap面包屑導(dǎo)航定義：面包屑導(dǎo)航（Breadcrumbs）是一種基于網(wǎng)站層次信息的顯示方式。以博客為例，面包屑導(dǎo)航可以顯示發(fā)布日期、類別或標(biāo)簽。它們表示當(dāng)前頁(yè)面在導(dǎo)航層次結(jié)構(gòu)內(nèi)的位置。Bootstrap中的面包屑導(dǎo)航（Breadcrumbs）是一個(gè)簡(jiǎn)單的帶有.breadcrumbclass的無(wú)序列表。 如圖所示：Bootstrap分頁(yè)定義：分頁(yè)（Pagination），是一種無(wú)序列表，Bootstrap像處理其他界面元素一樣處理分頁(yè)。 如下表所示：注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-pagination.htmlBootstrap標(biāo)簽和徽章定義：1、標(biāo)簽可用于計(jì)數(shù)、提示或頁(yè)面上其他的標(biāo)記顯示。使用class.label來(lái)顯示標(biāo)簽，可以使用修飾的classlabel-default、label-primary、label-success、label-info、label-warning、label-danger來(lái)改變標(biāo)簽的外觀2、徽章與標(biāo)簽相似，主要的區(qū)別在于徽章的邊角更加圓滑。 徽章（Badges）主要用于突出顯示新的或未讀的項(xiàng)。如需使用徽章，只需要把<spanclass="badge">添加到鏈接、Bootstrap導(dǎo)航等這些元素上即可。 激活導(dǎo)航狀態(tài)： 您可以在激活狀態(tài)的膠囊式導(dǎo)航和列表導(dǎo)航中放置徽章。通過(guò)使用<spanclass="badge">來(lái)激活鏈接效果如圖所示：注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-labels.htmlhttp://www.w3cschool.cc/bootstrap/bootstrap-badges.htmlBootstrap縮略圖定義：

大多數(shù)站點(diǎn)都需要在網(wǎng)格中布局圖像、視頻、文本等。Bootstrap通過(guò)縮略圖為此提供了一種簡(jiǎn)便的方式。使用Bootstrap創(chuàng)建縮略圖的步驟如下：在圖像周圍添加帶有class.thumbnail的<a>標(biāo)簽。這會(huì)添加四個(gè)像素的內(nèi)邊距（padding）和一個(gè)灰色的邊框。當(dāng)鼠標(biāo)懸停在圖像上時(shí)，會(huì)動(dòng)畫(huà)顯示出圖像的輪廓。添加自定義的內(nèi)容：

現(xiàn)在我們有了一個(gè)基本的縮略圖，我們可以向縮略圖添加各種HTML內(nèi)容，比如標(biāo)題、段落或按鈕。具體步驟如下：把帶有class.thumbnail的<a>標(biāo)簽改為<div>。在該<div>內(nèi)，您可以添加任何您想要添加的東西。由于這是一個(gè)<div>，我們可以使用默認(rèn)的基于span的命名規(guī)則來(lái)調(diào)整大小。如果您想要給多個(gè)圖像進(jìn)行分組，請(qǐng)把它們放置在一個(gè)無(wú)序列表中，且每個(gè)列表項(xiàng)向左浮動(dòng)。注：詳細(xì)樣式請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-thumbnails.htmlBootstrap進(jìn)度條默認(rèn)的進(jìn)度條：

創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下： 1、添加一個(gè)帶有g(shù)ress的<div>。 2、接著，在上面的<div>內(nèi)，添加一個(gè)帶有g(shù)ress-bar的空的<div>。 3、添加一個(gè)帶有百分比表示的寬度的style屬性，例如style="60%";表示進(jìn)度條在60%的位置。交替的進(jìn)度條： 1、創(chuàng)建不同樣式的進(jìn)度條的步驟如下： 2、添加一個(gè)帶有g(shù)ress的<div>。 3、接著，在上面的<div>內(nèi)，添加一個(gè)帶有g(shù)ress-bar和classprogress-bar-*的空的<div>。其中，*可以是success、info、warning、danger。 4、添加一個(gè)帶有百分比表示的寬度的style屬性，例如style="60%";表示進(jìn)度條在60%的位置。條紋的進(jìn)度條： 1、創(chuàng)建一個(gè)條紋的進(jìn)度條的步驟如下： 2、添加一個(gè)帶有g(shù)ress和.progress-striped的<div>。 3、接著，在上面的<div>內(nèi)，添加一個(gè)帶有g(shù)ress-bar和classprogress-bar-*的空的<div>。其中，*可以是success、info、warning、danger。 4、添加一個(gè)帶有百分比表示的寬度的style屬性，例如style="60%";表示進(jìn)度條在60%的位置。動(dòng)畫(huà)的進(jìn)度條： 1、創(chuàng)建一個(gè)動(dòng)畫(huà)的進(jìn)度條的步驟如下： 2、添加一個(gè)帶有g(shù)ress和.progress-striped的<div>。同時(shí)添加class.active。 3、接著，在上面的<div>內(nèi)，添加一個(gè)帶有g(shù)ress-bar的空的<div>。 4、添加一個(gè)帶有百分比表示的寬度的style屬性，例如style="60%";表示進(jìn)度條在60%的位置。 5、這將會(huì)使條紋具有從右向左的運(yùn)動(dòng)感。堆疊的進(jìn)度條：

您甚至可以堆疊多個(gè)進(jìn)度條。把多個(gè)進(jìn)度條放在相同的.progress中即可實(shí)現(xiàn)堆疊 注:詳情請(qǐng)參考：http://www.w3cschool.cc/bootstrap/bootstrap-progress-bars.htmlBootstrap插件包括以下內(nèi)容：Bootstrap模態(tài)框Bootstrap滾動(dòng)監(jiān)聽(tīng)Bootstrap標(biāo)簽頁(yè)Bootstrap工具提示Bootstrap彈出框Bootstrap折疊Bootstrap輪播Bootstrap插件定義：

Bootstrap自帶12種jQuery插件，擴(kuò)展了功能，可以給站點(diǎn)添加更多的互動(dòng)。即使您不是一名高級(jí)的JavaScript開(kāi)發(fā)人員，您也可以著手學(xué)習(xí)Bootstrap的JavaScript插件。利用Bootstrap數(shù)據(jù)API（BootstrapDataAPI），大部分的插件可以在不編寫(xiě)任何代碼的情況被觸發(fā)。站點(diǎn)引用Bootstrap插件的方式有兩種：?jiǎn)为?dú)引用：使用Bootstrap的個(gè)別的*.js文件。一些插件和CSS組件依賴于其他插件。如果您單獨(dú)引用插件，請(qǐng)先確保弄請(qǐng)這些插件之間的依賴關(guān)系。編譯（同時(shí)）引用：使用bootstrap.js或壓縮版的bootstrap.min.js。注：

不要嘗試同時(shí)引用這兩個(gè)文件，因?yàn)閎ootstrap.js和bootstrap.min.js都包含了所有的插件。

所有的插件依賴于jQuery。所以必須在插件文件之前引用jQuery。Bootstrap模態(tài)框定義：

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來(lái)自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開(kāi)父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用modal.js?；蛘撸鏐ootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：

您可以切換模態(tài)框（Modal）插件的隱藏內(nèi)容： 1、通過(guò)data屬性：在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性data-toggle="modal"，同時(shí)設(shè)置data-target="#identifier"或href="#identifier"來(lái)指定要切換的特定的模態(tài)框（帶有id="identifier"）。 2、通過(guò)JavaScript：使用這種技術(shù)，您可以通過(guò)簡(jiǎn)單的一行JavaScript來(lái)調(diào)用帶有id="identifier"的模態(tài)框：

$('#identifier').modal(options)效果如圖所示： 注：具體的選項(xiàng)、方法、事件請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-modal-plugin.htmlBootstrap滾動(dòng)監(jiān)聽(tīng)定義：

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?activeclass。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用scrollspy.js?；蛘?，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：

您可以向頂部導(dǎo)航添加滾動(dòng)監(jiān)聽(tīng)行為： 1、通過(guò)data屬性：向您想要監(jiān)聽(tīng)的元素（通常是body）添加data-spy="scroll"。然后添加帶有Bootstrap.nav組件的父元素的ID或class的屬性data-target。為了它能正常工作，您必須確保頁(yè)面主體中有匹配您所要監(jiān)聽(tīng)鏈接的ID的元素存在。

<bodydata-spy="scroll"data-target=".navbar-example">

...

<divclass="navbar-example">

<ulclass="navnav-tabs">

...

</ul>

</div>

...

</body> 2、通過(guò)JavaScript：您可以通過(guò)JavaScript調(diào)用滾動(dòng)監(jiān)聽(tīng)，選取要監(jiān)聽(tīng)的元素，然后調(diào)用.scrollspy()函數(shù)：

$('body').scrollspy({target:'.navbar-example'})效果如圖所示： 注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-scrollspy-plugin.htmlBootstrap標(biāo)簽頁(yè)定義：

標(biāo)簽頁(yè)（Tab）在Bootstrap導(dǎo)航元素一章中介紹過(guò)。通過(guò)結(jié)合一些data屬性，您可以輕松地創(chuàng)建一個(gè)標(biāo)簽頁(yè)界面。通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用tab.js。或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：

您可以通過(guò)以下兩種方式啟用標(biāo)簽頁(yè)： 1、通過(guò)data屬性：您需要添加data-toggle="tab"或data-toggle="pill"到錨文本鏈接中。

添加nav和nav-tabs類到ul中，將會(huì)應(yīng)用Bootstrap標(biāo)簽樣式，添加nav和nav-pills類到ul中，將會(huì)應(yīng)用Bootstrap膠囊式樣式。

<ulclass="navnav-tabs">

<li><ahref="#identifier"data-toggle="tab">Home</a></li>

...

</ul> 2、通過(guò)JavaScript：您可以使用Javscript來(lái)啟用標(biāo)簽頁(yè)，如下所示：

$('#myTaba').click(function(e){

e.preventDefault()

$(this).tab('show')

})如圖所示：

注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-tab-plugin.htmlBootstrap工具提示定義：

當(dāng)您想要描述一個(gè)鏈接的時(shí)候，工具提示（Tooltip）就顯得非常有用。工具提示（Tooltip）插件是受JasonFrame寫(xiě)的jQuery.tipsy的啟發(fā)。工具提示（Tooltip）插件做了很多改進(jìn)，例如不需要依賴圖像，而是改用CSS實(shí)現(xiàn)動(dòng)畫(huà)效果，用data屬性存儲(chǔ)標(biāo)題信息。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用tooltip.js。或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：

工具提示（Tooltip）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把工具提示（tooltip）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加工具提示（tooltip）： 1、通過(guò)data屬性：如需添加一個(gè)工具提示（tooltip），只需向一個(gè)錨標(biāo)簽添加data-toggle="tooltip"即可。錨的title即為工具提示（tooltip）的文本。默認(rèn)情況下，插件把工具提示（tooltip）設(shè)置在頂部。

<ahref="#"data-toggle="tooltip"title="Exampletooltip">請(qǐng)懸停在我的上面</a> 2、通過(guò)JavaScript：通過(guò)JavaScript觸發(fā)工具提示（tooltip）：

$('#identifier').tooltip(options)如圖所示：注：

工具提示（Tooltip）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純CSS插件。如需使用該插件，您必須使用jquery激活它（讀取javascript）。使用下面的腳本來(lái)啟用頁(yè)面中的所有的工具提示（tooltip）：

$(function(){$("[data-toggle='tooltip']").tooltip();}); 詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-tooltip-plugin.htmlBootstrap彈出框定義：

彈出框（Popover）與工具提示（Tooltip）類似，提供了一個(gè)擴(kuò)展的視圖。如需激活彈出框，用戶只需把鼠標(biāo)懸停在元素上即可。彈出框的內(nèi)容完全可使用Bootstrap數(shù)據(jù)API（BootstrapDataAPI）來(lái)填充。該方法依賴于工具提示（tooltip）。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用popover.js，它依賴于工具提示（Tooltip）插件。或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：

彈出框（Popover）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把彈出框（popover）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加彈出框（popover）： 1、通過(guò)data屬性：如需添加一個(gè)彈出框（popover），只需向一個(gè)錨/按鈕標(biāo)簽添加data-toggle="popover"即可。錨的title即為彈出框（popover）的文本。默認(rèn)情況下，插件把彈出框（popover）設(shè)置在頂部。

<ahref="#"data-toggle="popover"title="Examplepopover">請(qǐng)懸停在我的上面</a> 2、通過(guò)JavaScript：通過(guò)JavaScript啟用彈出框（popover）：

$('#identifier').popover(options)如圖所示：注：

彈出框（Popover）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純CSS插件。如需使用該插件，您必須使用jquery激活它（讀取javascript）。使用下面的腳本來(lái)啟用頁(yè)面中的所有的彈出框（popover）：

$(function(){$("[data-toggle='popover']").popover();});

詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-popover-plugin.htmlBootstrap折疊定義：

折疊（Collapse）插件可以很容易地讓頁(yè)面區(qū)域折疊起來(lái)。無(wú)論您用它來(lái)創(chuàng)建折疊導(dǎo)航還是內(nèi)容面板，它都允許很多內(nèi)容選項(xiàng)。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用collapse.js。同時(shí)，也需要在您的Bootstrap版本中引用Transition（過(guò)渡）插件?；蛘撸鏐ootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。您可以使用折疊（Collapse）插件：1、創(chuàng)建可折疊的分組或折疊面板（accordion）

data-toggle="collapse"添加到您想要展開(kāi)或折疊的組件的鏈接上。

href或data-target屬性添加到父組件，它的值是子組件的id。

data-parent屬性把折疊面板（accordion）的id添加到要展開(kāi)或折疊的組件的鏈接上。2、創(chuàng)建不帶accordion標(biāo)記的簡(jiǎn)單的可折疊組件（collapsible）效果如圖所示：Bootstrap折疊用法：

下表列出了折疊（Collapse）插件用于處理繁重的伸縮的class：

Class描述：

.collapse

隱藏內(nèi)容。

.collapse.in

顯示內(nèi)容。

.collapsing

當(dāng)過(guò)渡效果開(kāi)始時(shí)被添加，當(dāng)過(guò)渡效果完成時(shí)被移除。

您可以通過(guò)以下兩種方式使用折疊（Collapse）插件： 1、通過(guò)data屬性：向元素添加data-toggle="collapse"和data-target，自動(dòng)分配可折疊元素的控制。data-target屬性接受一個(gè)CSS選擇器，并會(huì)對(duì)其應(yīng)用折疊效果。請(qǐng)確保向可折疊元素添加class.collapse。如果您希望它默認(rèn)情況下是打開(kāi)的，請(qǐng)?zhí)砑宇~外的class.in。

為了向可折疊控件添加類似折疊面板的分組管理，請(qǐng)?zhí)砑觗ata屬性data-parent="#selector"。 2、通過(guò)JavaScript：可通過(guò)JavaScript激活collapse方法，如下所示：

$('.collapse').collapse() 注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-collapse-plugin.htmlBootstrap輪播定義：

Bootstrap輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用carousel.js?；蛘撸鏐ootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：1、通過(guò)data屬性：使用data屬性可以很容易控制輪播（Carousel）的位置。

屬性data-slide接受關(guān)鍵字prev或next，用來(lái)改變幻燈片相對(duì)于當(dāng)前位置的位置。

使用data-slide-to來(lái)向輪播床底一個(gè)原始滑動(dòng)索引，data-slide-to="2"將把滑塊移動(dòng)到一個(gè)特定的索引，索引從0開(kāi)始計(jì)數(shù)。

data-ride="carousel"屬性用于標(biāo)記輪播在頁(yè)面加載時(shí)就開(kāi)始動(dòng)畫(huà)播放。2、通過(guò)JavaScript：輪播（Carousel）可通過(guò)JavaScript手動(dòng)調(diào)用，如下所示：

$('.carousel').carousel()效果圖顯示：注：詳情請(qǐng)參考http://www.w3cschool.cc/bootstrap/bootstrap-carousel-plugin.html返回首頁(yè)HTML5HTML5簡(jiǎn)介HTML5視頻HTML5音頻HTML5拖放HTML5畫(huà)布HTML5SVGHTML5地理定位HTML5Web存儲(chǔ)HTML5應(yīng)用緩存HTML5表單類型HTML5表單元素HTML5表單屬性HTML5簡(jiǎn)介新特性：用于繪畫(huà)的canvas元素用于媒介回放的video和audio元素對(duì)本地離線存儲(chǔ)的更好的支持新的特殊內(nèi)容元素，比如article、footer、header、nav、section新的表單控件，比如calendar、date、time、email、url、search瀏覽器支持：

最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9將支持某些HTML5特性。HTML5視頻視頻格式以及瀏覽器兼容性：如圖所示...語(yǔ)法例：1、<videosrc="movie.ogg"width="320"height="240"controls="controls">

Yourbrowserdoesnotsupportthevideotag.

</video>2、<videowidth="320"height="240"controls="controls">

<sourcesrc="movie.ogg"type="video/ogg">

<sourcesrc="movie.mp4"type="video/mp4">

Yourbrowserdoesnotsupportthevideotag.

</video> 析：control屬性供添加播放、暫停和音量控件。 注：更多屬性詳情請(qǐng)參考/html5/html_5_video.aspHTML5音頻音頻格式以及瀏覽器兼容性：如圖所示...語(yǔ)法（類似視頻）例：1、<audiosrc="song.ogg"controls="controls">

Yourbrowserdoesnotsupporttheaudiotag.

</audio>2、<audiocontrols="controls">

<sourcesrc="song.ogg"type="audio/ogg">

<sourcesrc="song.mp3"type="audio/mpeg">

Yourbrowserdoesnotsupporttheaudiotag.

</audio> 析：control屬性供添加播放、暫停和音量控件。 注：更多屬性詳情請(qǐng)參考/html5/html_5_audio.aspHTML5拖放定義：拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。瀏覽器支持：InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放。操作步驟：設(shè)置元素為可拖放：把draggable屬性設(shè)置為true拖動(dòng)什么-ondragstart和setData()放到何處-ondragover進(jìn)行放置-ondrop示例如圖所示：注：詳情請(qǐng)參考/html5/html_5_draganddrop.aspHTML5畫(huà)布定義：canvas元素用于在網(wǎng)頁(yè)上繪制圖形。畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。注：canvas元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成：例： <scripttype="text/javascript"> varc=document.getElementById("myCanvas");/*JavaScript使 用id來(lái)尋找canvas元素*/ varcxt=c.getContext("2d");//創(chuàng)建context對(duì)象 cxt.fillStyle="#FF0000";//繪制一個(gè)紅色的矩形 cxt.fillRect(0,0,150,75); </script>析：getContext("2d")對(duì)象是內(nèi)建的HTML5對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法 fillStyle方法將其染成紅色，fillRect方法規(guī)定了形狀、位置和尺寸。 可用于繪制如上效果圖：線條、圓、漸變 注：詳情請(qǐng)參考/html5/html_5_canvas.aspHTML5SVG定義：SVG指可伸縮矢量圖形(ScalableVectorGraphics)SVG用于定義用于網(wǎng)絡(luò)的基于矢量的圖形SVG使用XML格式定義圖形SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失SVG是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)優(yōu)勢(shì)：SVG圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改SVG圖像可被搜索、索引、腳本化或壓縮SVG是可伸縮的SVG圖像可在任何的分辨率下被高質(zhì)量地打印SVG可在圖像質(zhì)量不下降的情況下被放大瀏覽器支持：

InternetExplorer9、Firefox、Opera、Chrome以及Safari支持內(nèi)聯(lián)SVG。語(yǔ)法及效果如圖所示：注：詳情請(qǐng)參考/html5/html_5_svg.aspHTML5地理定位定義：

HTML5GeolocationAPI用于獲得用戶的地理位置。瀏覽器支持：

InternetExplorer9、Firefox、Chrome、Safari以及Opera支持地理定位。

注釋：對(duì)于擁有GPS的設(shè)備，比如iPhone，地理定位更加精確。使用地理定位：

使用getCurrentPosition()方法來(lái)獲得用戶的位置。 使用getCurrentPosition()方法的第二個(gè)參數(shù)用于處理錯(cuò)誤。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)。

注：

鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。 更多操作更多屬性、方法請(qǐng)參考/html5/html_5_geolocation.aspHTML5web存儲(chǔ)定義：

在客戶端存儲(chǔ)數(shù)據(jù)新方法：1、localStorage-沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)例：2、sessionStorage-針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)，當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。例：注：詳情請(qǐng)參考/html5/html_5_webstorage.aspHTML5應(yīng)用緩存定義：

通過(guò)創(chuàng)建cachemanifest文件，可以輕松地創(chuàng)建web應(yīng)用的離線版本。優(yōu)勢(shì)：離線瀏覽-用戶可在應(yīng)用離線時(shí)使用它們速度-已緩存資源加載得更快減少服務(wù)器負(fù)載-瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。瀏覽器支持

所有主流瀏覽器均支持應(yīng)用程序緩存，除了InternetExplorer。語(yǔ)法以及mainfest文件結(jié)構(gòu)示例圖：注：詳情請(qǐng)參考/html5/html_5_app_cache.aspHTML5表單類型定義：

HTML5擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。新的輸入類型：email—用于應(yīng)該包含e-mail地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email域的值。url—用于應(yīng)該包含URL地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url域的值。number—用于應(yīng)該包含數(shù)值的輸入域。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。range—用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型顯示為滑動(dòng)條。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。Datepickers(date,month,week,time,datetime,datetime-local)—HTML5擁有多個(gè)可供選取日期和時(shí)間的新輸入類型：date-選取日、月、年month-選取月、年week-選取周和年time-選取時(shí)間（小時(shí)和分鐘）datetime-選取時(shí)間、日、月、年（UTC時(shí)間）datetime-local-選取時(shí)間、日、月、年（本地時(shí)間）6. search—search類型用于搜索域，比如站點(diǎn)搜索或Google搜索。search域顯示為常規(guī)的文本域。HTML5表單類型瀏覽器支持：注：效果、內(nèi)容詳情請(qǐng)參考/html5/html_5_form_input_types.aspHTML5表單元素新的表單元素：datalist—規(guī)定輸入域的選項(xiàng)列表。列表是通過(guò)datalist內(nèi)的option元素創(chuàng)建的。如需把datalist綁定到輸入域，請(qǐng)用輸入域的list屬性引用datalist的id。keygen—作用是提供一種驗(yàn)證用戶的可靠方法。keygen元素是密鑰對(duì)生成器（key-pairgenerator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。私鑰（privatekey）存儲(chǔ)于客戶端，公鑰（publickey）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書(shū)（clientcertificate）。output—output元素用于不同類型的輸出，比如計(jì)算或腳本輸出瀏覽器支持：注：詳情請(qǐng)參考/html5/html_5_form_elements.aspHTML5表單屬性新的表單屬性：1、新的form屬性、新的input屬性：autocomplete—規(guī)定form或input域應(yīng)該擁有自動(dòng)完成功能。當(dāng)用戶在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)autofocus—規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。form—規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。必須引用所屬表單的idformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)—表單重寫(xiě)屬性height和width—height和width屬性規(guī)定用于image類型的input標(biāo)簽的圖像高度和寬度。list—規(guī)定輸入域的datalist。datalist是輸入域的選項(xiàng)列表。min,max和step—用于為包含數(shù)字或日期的input類型規(guī)定限定（約束）。multiple—規(guī)定輸入域中可選擇多個(gè)值。pattern(regexp)—規(guī)定用于驗(yàn)證input域的模式（pattern）。模式（pattern）是正則表達(dá)式。placeholder—提供一種提示（hint），描述輸入域所期待的值。提示（hint）會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，會(huì)在輸入域獲得焦點(diǎn)時(shí)消失required—規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）。HTML5表單屬性瀏覽器支持： 注：更多條件，跟多語(yǔ)法示例請(qǐng)參考/html5/html_5_form_attributes.asp返回首頁(yè)CSS3CSS3邊框CSS3背景CSS3文本效果CSS3字體CSS32D轉(zhuǎn)換CSS33D轉(zhuǎn)換CSS3過(guò)渡CSS3動(dòng)畫(huà)CSS3多列CSS3用戶界面CSS3邊框定義：

通過(guò)CSS3，您能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來(lái)繪制邊框邊框?qū)傩裕?/p>

border-radius—圓角邊框 box-shadow—邊框陰影 border-image—邊框圖片瀏覽器支持：注：更多示例及效果圖請(qǐng)參考/css3/css3_border.