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

三四周學習總結(jié)馬巧巧學習內(nèi)容：jQuery插件AJAXBootstrapHTML5CSS3總結(jié)jQuery插件的開發(fā)包括兩種：一種是類級別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當于給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)用時:

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

(function($){

$.fn.extend({

pluginName:function(opt,callback){

//代碼；

}

})

})(jQuery);

形式2：

(function($){

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

};

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

Bootstrap，來自Twitter，是目前最受歡迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發(fā)更加快捷。優(yōu)勢：移動設(shè)備優(yōu)先：自Bootstrap3起，框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。瀏覽器支持：所有的主流瀏覽器都支持Bootstrap。InternetExplorer、Firefox、Opera、GoogleChrome、Safari容易上手：只要您具備HTML和CSS的基礎(chǔ)知識，您就可以開始學習Bootstrap。響應式設(shè)計：Bootstrap的響應式CSS能夠自適應于臺式機、平板電腦和手機。更多有關(guān)響應式設(shè)計的內(nèi)容詳見Bootstrap響應式設(shè)計。它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。它包含了功能強大的內(nèi)置組件，易于定制。它還提供了基于Web的定制。它是開源的。Bootstrapcss包括以下內(nèi)容：Bootstrap網(wǎng)格系統(tǒng)Bootstrap排版Bootstrap代碼Bootstrap表格Bootstrap表單Bootstrap按鈕Bootstrap圖像Bootstrap幫助器類Bootstrap網(wǎng)格系統(tǒng)定義：Bootstrap包含了一個響應式的、移動設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當?shù)財U展到12列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。基本網(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作為其默認的字體棧。使用Bootstrap的排版特性，您可以創(chuàng)建標題、段落、列表及其他內(nèi)聯(lián)元素。標題—（h1到h6）及內(nèi)聯(lián)子標題<small>強調(diào)—默認強調(diào)標簽<small>（設(shè)置文本為父文本大小的85%）、<strong>（設(shè)置文本為更粗的文本）、<em>（設(shè)置文本為斜體）?？s寫—Bootstrap定義<abbr>元素的樣式為顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您為<abbr>title屬性添加了文本）地址—使用<address>標簽，您可以在網(wǎng)頁上顯示聯(lián)系信息。由于<address>默認為display:block;，您需要使用標簽來為封閉的地址文本添加換行。引用—您可以在任意的HTML文本旁使用默認的<blockquote>。其他選項包括，添加一個<small>標簽來標識引用的來源，使用class.pull-right向右對齊引用。列表—Bootstrap支持有序列表、無序列表和定義列表。Bootstrap代碼Bootstrap允許您以兩種方式顯示代碼：第一種是<code>標簽。如果您想要內(nèi)聯(lián)顯示代碼，那么您應該使用<code>標簽。第二種是<pre>標簽。如果代碼需要被顯示為一個獨立的塊元素或者代碼有多行，那么您應該使用<pre>標簽。 示例如圖所示：注：請確保當您使用<pre>和<code>標簽時，開始和結(jié)束標簽使用了unicode變體：<和>。Bootstrap表格定義：Bootstrap提供了一個清晰的創(chuàng)建表格的布局。下表列出了Bootstrap支持的一些表格元素： 如圖所示：可選的表格類：條紋表格：通過添加.table-stripedclass，您將在<tbody>內(nèi)的行上看到條紋邊框表格：通過添加.table-borderedclass，您將看到每個元素周圍都有邊框，且占整個表格是圓角的懸停表格：通過添加.table-hoverclass，當指針懸停在行上時會出現(xiàn)淺灰色背景精簡表格：通過添加.table-condensedclass，行內(nèi)邊距（padding）被切為兩半，以便讓表看起來更緊湊響應式表格：通過把任意的.table包在.table-responsiveclass內(nèi)，您可以讓表格水平滾動以適應小型設(shè)備（小于768px）。當在大于768px寬的大型設(shè)備上查看時，您將看不到任何的差別。注：具體樣式請參照http://www.w3cschool.cc/bootstrap/bootstrap-tables.htmlBootstrap表單定義： Bootstrap通過一些簡單的HTML標記和擴展的類即可創(chuàng)建出不同樣式的表單。類型：垂直表單（默認）內(nèi)聯(lián)表單水平表單支持的表單控件： Bootstrap支持最常見的表單控件，主要是input、textarea、checkbox、radio和select。靜態(tài)控件： 當您需要在一個水平表單內(nèi)的表單標簽后放置純文本時，請在<p>上使用class.form-control-static。表單控件大小： 您可以分別使用class.input-lg和.col-lg-*來設(shè)置表單的高度和寬度。 Bootstrap表單控件可以在輸入框input上有一個塊級幫助文本。為了添加一個占用整個寬度的內(nèi)容塊，請在<input>后使用.help-block。Bootstrap表單表單控件狀態(tài)定義：

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

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

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

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

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

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

使用classcenter-block來居中元素。清除浮動

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

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

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

字形圖標（Glyphicons）是在Web項目中使用的圖標字體。用法：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您也可以把按鈕作為輸入框組的前綴或者后綴元素，這個時候您就不是添加.input-group-addonclass，您需要使用class.input-group-btn來包裹按鈕。這是必需的，因為默認的瀏覽器樣式不會被重寫。帶有下拉菜單的按鈕

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

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

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

創(chuàng)建一個標簽式的導航菜單：以一個帶有class.nav的無序列表開始。添加class.nav-tabs。膠囊式的導航菜單：

基本的膠囊式導航菜單：

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

垂直的膠囊式導航菜單：

您可以在使用class.nav、.nav-pills的同時使用class.nav-stacked，讓膠囊垂直堆疊。兩端對齊的導航：

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

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

導航菜單與下拉菜單使用相似的語法。默認情況下，列表項的錨與一些數(shù)據(jù)屬性協(xié)同合作來觸發(fā)帶有.dropdown-menuclass的無序列表。帶有下拉菜單的標簽：

向標簽添加下拉菜單的步驟如下：以一個帶有class.nav的無序列表開始。添加class.nav-tabs。添加帶有.dropdown-menuclass的無序列表。效果如圖所示： 注：詳細樣式請參考http://www.w3cschool.cc/bootstrap/bootstrap-navigation-elements.htmlBootstrap導航欄定義：

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

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

為了向?qū)Ш綑谔砑渔溄?，只需要簡單地添加帶有class.nav、.navbar-nav的無序列表即可。響應式的導航欄

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

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

如果需要在導航中包含文本字符串，請使用class.navbar-text。這通常與<p>標簽一起使用，確保適當?shù)那皩Ш皖伾５?lt;button>元素添加按鈕，按鈕在導航欄上垂直居中。.navbar-btn可被使用在<a>和<input>元素上。Bootstrap導航欄非導航鏈接：

如果您不想在常規(guī)的導航欄導航組件內(nèi)使用標準的鏈接，那么請使用classnavbar-link來為默認的和倒轉(zhuǎn)的導航欄選項添加適當?shù)念伾M件對齊方式：

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

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

如果您想要讓導航欄固定在頁面的頂部，請向.navbarclass添加class.navbar-fixed-top。固定到底部：

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

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

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

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

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

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

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

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

不要嘗試同時引用這兩個文件，因為bootstrap.js和bootstrap.min.js都包含了所有的插件。

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

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

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

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

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

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

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

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

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

...

<divclass="navbar-example">

<ulclass="navnav-tabs">

...

</ul>

</div>

...

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

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

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

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

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

添加nav和nav-tabs類到ul中，將會應用Bootstrap標簽樣式，添加nav和nav-pills類到ul中，將會應用Bootstrap膠囊式樣式。

<ulclass="navnav-tabs">

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

...

</ul> 2、通過JavaScript：您可以使用Javscript來啟用標簽頁，如下所示：

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

e.preventDefault()

$(this).tab('show')

})如圖所示：

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

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

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

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

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

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

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

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

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

如果您想要單獨引用該插件的功能，那么您需要引用popover.js，它依賴于工具提示（Tooltip）插件?；蛘撸鏐ootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：

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

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

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

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

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

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

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

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

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

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

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

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

Class描述：

.collapse

隱藏內(nèi)容。

.collapse.in

顯示內(nèi)容。

.collapsing

當過渡效果開始時被添加，當過渡效果完成時被移除。

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

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

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

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

如果您想要單獨引用該插件的功能，那么您需要引用carousel.js。或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。用法：1、通過data屬性：使用data屬性可以很容易控制輪播（Carousel）的位置。

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

使用data-slide-to來向輪播床底一個原始滑動索引，data-slide-to="2"將把滑塊移動到一個特定的索引，索引從0開始計數(shù)。

data-ride="carousel"屬性用于標記輪播在頁面加載時就開始動畫播放。2、通過JavaScript：輪播（Carousel）可通過JavaScript手動調(diào)用，如下所示：

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

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

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

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

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

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

使用getCurrentPosition()方法來獲得用戶的位置。 使用getCurrentPosition()方法的第二個參數(shù)用于處理錯誤。它規(guī)定當獲取用戶位置失敗時運行的函數(shù)。

注：

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

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

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

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

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

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

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