bootstrap基礎知識

Bootstrap是Twitter推出的一款簡潔、直觀、強悍的前端開發框架。

Bootstrap基於 HTML、CSS、JAVASCRIPT。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發,是一個CSS/HTML框架。

~~~引入bootstrap的css和頁面自身的css
~media="screen" //該樣式表適用於屏幕類的設備
<link rel="stylesheet" href="http://www.w3cschool.cc/try/bootstrap/demo-v3/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="http://www.w3cschool.cc/try/bootstrap/demo-v3/custom.css" media="screen" />

~~~設置視口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no" />

~~~讓IE8支持HTML5標籤和媒體查詢
<!--[if lt IE 9]>
<script src="http://www.w3cschool.cc/try/bootstrap/demo-v3/html5shiv.js"></script>
<script src="http://www.w3cschool.cc/try/bootstrap/demo-v3/respond.min.js"></script>
<![endif]-->

~~~導航和下拉列表
~ .navbar.navbar-inverse.navbar-fixed-top > nav.navbar-nav > .active
~ .dropdown > .dropdown-toggle + .dropdown-menu > li
~ .navbar-brand
~ .nav-header
~ .navbar-text

~~~浮動 pull-left pull-right
<nav class="navbar navbar-inverse navbar-fixed-up" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
<li><a>Price</a></li>
<li><a>Contact</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Social</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
</ul>
</nav>

~~~ 輪播
~ .carousel.slide > ( ol.carousel-indicators > li + li.active ) + ( .carousel-inner > (.item.active > img.img-responsive + .carousel-caption) + .item ) + (.left.carousel-control > .icon-prev ) + ( .right.carousel-control > .icon-next ) )

~~~按鈕
~ .btn.btn-success.btn-lg
按鈕基礎類 .btn
按鈕類型： .btn-warning, .btn-success, .btn-error btn-primary btn-info
按鈕大小： .btn-lg, .btn-sm, .btn-xs

~~~圖標
~ .icon-prev, .icon-next
<div id="carousel-example" class="carousel slide">
<ol class="carouse-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.w3cschool.cc/try/bootstrap/demo-v3/computer.jpg" class="img-responsive" alt="..." />
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 days trial now</button></p>
</div>
</div>
<div class="item">
<img src="http://www.w3cschool.cc/try/bootstrap/demo-v3/mobile.jpg" class="img-responsive" alt="..." />
<div class="carousel-caption">
<h1>Mobile are outnumberings desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 days trial now</button></p>
</div>
</div>
<div class="item">
<img src="http://www.w3cschool.cc/try/bootstrap/demo-v3/cloud1.jpg" class="img-responsive" alt="..." />
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud Computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 days trial now</button></p>
</div>
</div>
<a class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
</div>

~~~柵格系統
~ .container.responsive 容器 水平居中
~ .row 行
~ .col-lg-4 .col-md-4, .col-sm-4, .col-xs-4列

在現代 Web 開發中，有幾個幾乎全部的 Web 項目中都須要的組件。

Bootstrap 爲您提供了全部這些基本的模塊 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。

此外，還有大量其餘有用的前端組件，好比 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了這些，你能夠搭建一個 Web 項目，並讓它運行地更快速更輕鬆。

~~~ .table.table-bordered 表格 (.table-bordered:{border:#ddd})
~~~ .badge徽章 文本
~~~ 表單
~ .form-horizontal

>> Bootstrap 3 CSS 概覽
> HTML 5 文檔類型（Doctype）
> 移動設備優先
Bootstrap 3 默認的 CSS 自己就是對移動設備友好的。Bootstrap 3 的設計目標是移動設備優先，而後纔是桌面設備。這其實是一個很是及時的轉變，由於如今愈來愈多的用戶使用移動設備。
爲了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，須要在網頁的 head 之中添加 viewport 元數據標籤，以下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一般狀況下，maximum-scale=1.0 與 user-scalable=no 一塊兒使用。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！
> 響應式圖片
經過添加 img-responsive class 可讓 Bootstrap 3 中的圖片對響應式佈局的支持更友好。讓咱們看看這個 class 包含了哪些 css 屬性。其實質是爲圖片賦予了 max-width: 100%; 和 height: auto; 屬性，可讓圖片按比例縮放，不超過其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
設置 max-width 爲 100% 會重寫任何經過 width 屬性指定的寬度。這讓圖片對響應式佈局的支持更友好。
> 全局顯示、排版和連接
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}

a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

> 避免跨瀏覽器的不一致
Bootstrap 3，就像它以前的版本，使用了 Normalize，以創建跨瀏覽器的一致性。
> Container
Bootstrap 3 的 container class 用於包裹頁面上的內容。讓咱們一塊兒來看看下面這個 class
.container {
margin-right: auto;
margin-left: auto;
}
經過上面的代碼，把 container 的左右邊距交由瀏覽器決定。
.container:before,
.container:after {
display: table;
content: " ";
}
這會產生僞元素。設置 display 爲 table，會建立一個匿名的 table-cell 和一個新的塊格式化上下文。:before 僞元素防止上邊距崩塌，:after 僞元素清除浮動。

若是 conteneditable 屬性出如今 HTML 中，因爲一些 Opera bug，圍繞上述元素建立一個空格。這能夠經過使用 content: " " 來修復。
.container:after {
clear: both;
}
它建立了一個僞元素，並確保了全部的容器包含全部的浮動元素。

Bootstrap 3 CSS 有一個申請響應的媒體查詢，在不一樣的媒體查詢閾值範圍內都爲 container 設置了max-width，用以匹配網格系統。

>> Bootstrap 網格系統
自版本 2.3.2 起，Bootstrap 提供了兩種類型的網格。默認的網格系統是 940px 寬和 12 列( 每格60px寬 margin-left:20px)。您能夠添加響應式的樣式表讓它隨着呈現的視口調整寬度爲 724px 和 1170px。
這裏還設有一個流動網格系統，它是基於百分比的，而不是基於像素的。且可被擴展爲像默認固定網格同樣具備響應性。
~~~流動網格佈局 和 固定網格佈局
Bootstrap 使用 CSS 的 class "row" 來建立水平行，使用 CSS 的 class "spanx"（x 的值從 1 到 12）來建立垂直列。經過這兩個就能夠建立一個三列的網格（每一列包含一些文本內容），HTML 以下所示
<div class="container">
<div class="row">
<div class="span4"></div><div class="span3"></div><div class="span5"></div>
</div>
</div>

> 如何在固定網格中建立行
接下來，在咱們繼續其餘實例以前，先來看看在固定網格中用來建立行和列的 CSS 規則。
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}

> 如何在固定網格中建立列
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
使用單獨的 CSS 規則來設置列寬。具體以下面的表格所示
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
...

> 添加響應性到默認網格
若是您想要給 Bootstrap 的默認網格添加響應性能，只須要在 HTML 文件的原生 CSS 後添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
默認網格系統發揮響應性有兩個條件。當視口（網格渲染的可用空間）大於 1200px 時[經過 @media (min-width: 1200px) 得到]，當視口大於 768px 但小於 979px 時[經過 @media (min-width: 768px) 和 (max-width: 979px) 設置]。

> 偏移列：默認網格
偏移的寬度是在 Bootstrap CSS 中定義的。offset12 的最高左邊距是 980px，offset1 的最低左邊距是 100px。
<div class="row">
<div class="span4 offset4"></div>
</div>

> 嵌套列：默認網格
<div class="container">
<div class="row">
<div class="span7">
<div class="row">
<div class="span3"></div>
<div class="span4"></div>
</div>
</div>
<div class="span5"></div>
</div>
</div>

>> Bootstrap 佈局
~~固定佈局和流動佈局 響應佈局
> 固定佈局
固定佈局的目的是爲網頁或 app 建立一個 940 像素（默認）寬的佈局。
<div class="container">
<div class="row"><div class="span4"></div><div class="span8"></div></div>
</div>

> 流動佈局
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"> sidebar </div>
<div class="span9"> main </div>
</div>
</div>
.container-fluid{
padding-left:20px;
padding-right:20px;
}
.row-fluid{width:100%}
.row-fluid .span3{width: 23.404255317%;}

>> Bootstrap 響應式設計

媒體查詢（Media Queries）會先檢測設備的視口大小，而後加載特定於設備的樣式。

第一個區域以 '@media (max-width: 480px)' 開始，爲最大寬度爲 480 像素的設備設置樣式。

第二個區域以 '@media (max-width: 767px)' 開始，爲最大寬度爲 767像素的設備設置樣式。

第三個區域以 '@media (min-width: 768px) 和 (max-width: 979px)' 開始，爲最大寬度爲 768 像素和最大寬度爲 979 像素的設備設置樣式。

下一個區域是爲最大寬度爲 979 像素的設備設置樣式。因此是以 '@media (max-width: 979px)' 開始。

最後兩個區域分別以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 開始，前一個是爲最小寬度爲 980 像素的設備設置樣式，後一個是爲最小寬度爲 1200 像素的設備設置樣式。

因此，這樣樣式表的基本做用就是，經過使用 'min-width' 和 'max-width' 屬性，來根據設備的最大寬度和最小寬度決定使用的樣式。

Bootstrap 有幾個實用的用於開發對移動設備友好的佈局的類。這些類可在 'responsive.less' 上看到。
.visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop

>> Bootstrap 排版

h1~h6, p, address, strong, small, blockquote, ul li, dl dt dd, ol li
ul.unstyled 無圓點

>> Bootstrap 表格
table.table > thead(tr > th + th ..) + tbody ( tr > td + td)
.table.table-striped ~~斑馬線表格

>> Bootstrap 表單
四種表單佈局 - 垂直(默認).form-vertical 搜索 內聯 水平
.well ~~灰色背景的圓角容器
垂直表單form-vertical label是塊級的, label標籤和文本框各佔一行
<form class="well form-vertical">
<label>label name</label>
<input type="text" class="span3" /><span class="help-inline"> some help text</span>
<label><input type="checkbox"> check me out</label>
<button type="button" class="btn" >Submit</button>
</form>

水平表單form-horizontal label是左浮動固定寬度的，label標籤和文本框同行 位於左側
~~~ .form-horizontal > fieldset( legend + .control-group(.control-label + .controls>input) + .control-group + .form-actions)
~~~ .help-inline 行內幫助文本 ， help-block塊級幫助文本
~~~ .checkbox,.radio{padding-left:18px;}
.checkbox input[type="checkbox"], .radio input[type="radio"]{float:left; margin-left:-18px;}
<form class="form-horizontal">
<fieldset>
<legend>Bootstrap controls</legend>
<div class="control-group">
<label class="control-label" for="input01">input label:</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" />
<p class="help-block">In additional to freeform text</p>
</div>
</div>
<div class="control-group">
<label class="control-label">Checkbox:</label>
<div class="controls">
<label class="checkbox"><input type="checkbox" />Option one</label>
</div>
</div>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save Changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
~~~ <input type="text" readonly="true" /> <input type="text" disabled /> <button class="btn btn-primary" disabled></button> bootstrap已爲禁用或只讀的表單元素設置樣式

~~~表單驗證樣式 在control-group元素加上class(error, warning, success)便可
<form class="form-horizontal">
<fieldset>
<legend>bootstrap controls</legend>
<div class="control-group error">
<label class="control-label">User:</label>
<div class="controls">
<input type="text" class="input-xlarge" />
</div>
</div>
</fieldset>
</form>

搜索表單 form-search
<form class="well form-search">
<input type="text" class="search-query input-medium" /><button type="submit" class="btn" >Submit</button>
</form>
~~input-medium 中等寬度文本框， input-small 小寬度的文本框 ， input-xlarge 特大寬度文本框

內聯表單form-inline label是inline-block的
<form class="well form-inline">
<input type="text" class="input-small" placeholder="email" />
<input type="text" class="input-small" placeholder="password" />
<label><input type="checkbox" />Remember me </label>
<button class="btn" type="submit">Submit</button>
</form>

>> Bootstrap 圖標
> 做爲 CSS Sprite 使用
全部的圖標圖像都捆綁到一塊兒，並經過 background-position CSS 屬性使用。圖像文件是 glyphicons-halflings.png,全部的圖標 class 都以 "icon-" 爲前綴。Bootstrap 2.0 中定義了 120 個圖標 class。
<button type="submit" class="btn"><i class="icon-search"></i> Search</button>
<button type="submit" class="btn"><i class="icon-search icon-white"></i> Search</button> ~~ icon-white獲得白色圖標
icon-user icon-upload icon-download ...
icon-align-left icon-align-right...

~~btn-toolbar > btn-group + btn-group(btn + btn ..)

~~~按鈕調用： <button class="btn btn-primary">primary</button>
按鈕類型： btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
按鈕大小： .btn-lg, .btn-sm, .btn-xs
塊級按鈕 btn-block
.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}

.btn-block + .btn-block {
margin-top: 5px;
}

當前的活動按鈕： active <button class="btn btn-primary active">激活狀態的按鈕</button>
禁用按鈕：<button class="btn btn-info" disabled="disabled">不可用狀態的按鈕</button>
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
禁用A標籤表現的按鈕 <a href="http://www.baidu.com" class="btn btn-primary disabled" role="button">primary</a>

能夠經過 button、a 和 input 元素使用按鈕 class。推薦經過 button 元素來使用
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Input" />

漸變背景
.btn-w3r {
background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); / * Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
background: linear-gradient(to bottom, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
}

>>> Bootstrap 圖像
> img-rounded
.img-rounded {
border-radius: 6px;
}
> img-thumbnail
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
> .img-circle
.img-circle {
border-radius: 50%;
}

> 響應式圖片 .img-responsive
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
這種響應式圖片的侷限是：不管設備屏幕大小都加載一樣大的一張圖；解決方案：HiSRC Jquery 插件

>> Bootstrap 使用清單組組件建立價格表
.list-group > .list-group-item.active + (.list-group-item > .list-group-item-heading + .list-group-item-text)
.list-group {
padding-left: 0;
margin-bottom: 20px;
}

.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}

.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}

.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

> 列表組徽章 badge
.list-group-item > .badge {
float: right;
}

.list-group-item > .badge + .badge {
margin-right: 5px;
}
<div class="container">
<div class="row">
<ul class="list-group col-lg-4">
<li class="list-group-item"><span class="badge">Very important</span>Unlimited Users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">Forum support</li>
<li class="list-group-item">More....</li>
<li class="list-group-item">More.....</li>
</ul>
</div>
</div>

>> Bootstrap 導航
基本的基於標籤和膠囊式標籤的導航、堆疊的或垂直的基於標籤和膠囊式標籤的導航、基於標籤和膠囊式標籤的下拉菜單、使用導航列表建立堆疊導航、使用 JavaScript 建立可點擊導航（不一樣的方向）。
> 標籤式(tabs)的導航
.nav 和 .nav-tabs 用於建立基本的基於標籤的導航。
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

.nav-tabs外包裝一層div.tabbale，並引入bootstrap-tab.js便可實現標籤切換。

> 堆疊的標籤式導航
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

> 膠囊式(pills)的導航
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

> 堆疊的膠囊式導航
<div class="container">
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

> 基於標籤的下拉菜單 上拉菜單
dropdown, .dropdown-toggle, .dropdown-menu, .caret，divider

<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li class="divider"></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li class="divider"></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>

> 膠囊式下拉菜單
把上面的 nav-tabs 換成 nav-pills便可。

> 堆疊導航列表
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</div>

> 帶圖標的堆疊導航列表
<div class="container">
<div class="span6">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#"><i class="icon-user"></i> Profile</a></li>
<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-flag"></i> Help</a></li>
</ul>
</div>
</div>

>> Bootstrap 導航條
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a class="brand" href="#">w3cschool</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web development</a></li>
<li><a href="#">Wordpress Theme development</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
</div>
</div>

>> Bootstrap 內聯標籤和徽章
使用 Bootstrap，您能夠建立內聯標籤（即 Label 和註釋的文本）和徽章（即指標和未讀計數）。
> 標籤
<div class="row">
<div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>

> 徽章
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>

>> Bootstrap 縮略圖
使用 Bootstrap 建立縮略圖，即圖像、錄像、文本的網格。 展現產品圖片的等用途
> .thumbnails .thumbnail

<div class="container">
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="../bootstrap/php-thumb.png" alt="php tutorial" width="260" height="180" />
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="../bootstrap/mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
</a>
</li>
<li class="span5">
<a href="#" class="thumbnail">
<img src="../bootstrap/js-thumb.png" alt="js tutorial" width="380" height="180" >
</a>
</li>
</ul>
<hr>
</div> <!-- /container -->

呈現更多內容的縮略圖
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes1.jpg" alt="product 1">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes2.jpg" alt="product 2">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
</ul>

>> Bootstrap 進度條
> .progress > .bar
.progress.progress-striped > .bar
.progress.progress-striped.active > .bar
<div class="container">
<div class="row">
<div class="span4">
<h3>A basic Progress Bar with vertical gradient</h3>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>A striped Progress Bar, uses gradient to create a striped effect</h3>
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>An animated Progress Bar</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 50%;"></div>
</div>
</div>
</div>

其餘顏色的進度條
.progress-info .progress-success .progress-danger .progress-warning
<div class="row">
<div class="span4">
<h3>Progress bars may also have additional colors</h3>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
</div>

<hr>
</div>

>> Bootstrap 麪包屑導航
.breadcrumb > li(a + .divider) + li.active
<div class="container">
<div class="row">
<div class="span6">
<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider">></span>
</li>
<li>
<a href="#">Tutorials</a> <span class="divider">></span>
</li>
<li class="active">HTML5</li>
</ul>
</div>
</div>
</div>

>> Bootstrap 分頁
.pagination
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>

只帶有先後翻頁的頁碼導航
.pager > li +li
<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>

左右浮動的先後翻頁
.pager > li.previous + li.next
<ul class="pager">
<li class="previous">
<a href="#">&larr; Older</a>
</li>
<li class="next">
<a href="#">Newer &rarr;</a>
</li>
</ul>

>> Bootstrap 警告和錯誤
.alert > .close
.alert-block , .alert-heading
<div class="row">
<div class="span4">
<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</div>

<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning!</h4>
What are you doing?! this will delete all files!!
</div>

提示類型: alert-error, alert-success, alert-info
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<strong>Error!</strong>This is a fatal error.
</div>
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success!</strong>You have successfully done it.
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<strong>Info!</strong>Watch this, but you may forget.
</div>

>> Bootstrap LESS
Less 是一個 CSS 預處理器，讓 CSS 具備動態性。您能夠在 CSS 中使用 Bootstrap 的 Less 變量、mixins（混合）和 nesting（嵌套）。

>> Bootstrap 多媒體對象
咱們能夠在組件中使用圖文混排，圖片能夠左對齊或者右對齊。媒體對象能夠用更少的代碼來實現多媒體對象與文字的混排。

你能夠在HTML標籤中添加如下兩種形式來設置媒體對象：
.media: 該類容許將媒體對象裏的多媒體（圖像，視頻）浮動到內容區塊的左邊或者右邊。
.media-list: 若是你須要一個列表，各項內容是無序列表的一部分，可使用該類。可用於評論列表與文章列表。

.media組件能夠嵌套 ~~~實現圖文左右2列布局
.media > a.pull-left( img.media-object ) + .media-body( media-heading)
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/bootstrap/images/64.jpg"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>

ul.media-list > li.media + li.media

>> Bootstrap面板

獲取基礎面板你只須要在<div>元素中添加 .panel 和 .panel-default 類便可。
使用.panel-heading類能夠很簡單的在你的面板中添加一個標題容器
使用 <h1> - <h6>元素並使用 .panel-title類到你的加一個預樣式標題中。

<div class="panel panel-default">
<div class="panel-heading">
Panel heading without title
</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel With title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>

面板腳註
<div class="panel panel-default">
<div class="panel-body">
This is a Basic panel
</div>
<div class="panel-footer">Panel footer</div>
</div>

帶警告色彩的面板
可使用panel-primary, panel-success, panel-info, panel-warning, panel-danger類來設置帶警告色彩的面板
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
This is a Basic panel
</div>
</div>

帶表格的面板
.table類來設置無邊框的表格。 經過 .panel-body 類能夠定義表格額外的文本內容
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
This is a Basic panel
</div>
<table class="table">
<th>Product</th><th>Price </th>
<tr><td>Product A</td><td>200</td></tr>
<tr><td>Product B</td><td>400</td></tr>
</table>
</div>

帶列表組的面板
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.This is a Basic panel content.
This is a Basic panel content.This is a Basic panel content.
This is a Basic panel content.
</p>
</div>
<ul class="list-group">
<li class="list-group-item">Free Domain Name Registration</li>
<li class="list-group-item">Free Window Space hosting</li>
<li class="list-group-item">Number of Images</li>
<li class="list-group-item">24*7 support</li>
<li class="list-group-item">Renewal cost per year</li>
</ul>
</div>

>> Bootstrap Wells
若是你須要頁面中有嵌入的效果，在Bootstrap中你只須要使用.well類便可
.well, .well-lg, .well-sm
<div class="well">Hi, am in well !!</div>
<div class="well well-lg">Hi, am in large well !!</div>
<div class="well well-sm">Hi, am in small well !!</div>

>> 模態對話框 modal
注意在頁面底部引入bootstrap.min.js
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
觸發彈出模態對話框
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>
或者用js
$('#example').modal(options);

options對象能夠設置的選項有：
backdrop: false/true 是否顯示半透明黑色遮罩背景。
keyboard: false/true 點擊esc鍵是否關閉對話框
show: false/true 初始化時是否顯示對話框 $('#example').modal({show:false});則不顯示對話框
方法：
$obj.modal('toggle'); //切換對話框的顯示隱藏。
$obj.modal('show'); //顯示對話框
$obj.modal('hide'); //隱藏對話框
事件：
show: fn; 調用 $obj.modal('show')後被觸發
shown: fn; 調用 $obj.modal('show')後 且 對話框徹底漸現後 觸發
hide: fn;
hidden: fn;
$obj.bind('show',function(){ console.log('call show modal');});
$obj.modal('show'); // call show modal

>> Bootstrap Popover（彈出框）
rel="popover" data-content="some text" data-original-title="popover title"
<div class="container">
<h2>Example of creating Popover with Bootstrap</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Bootstrap Popover">hover for popover</a>
</div>
</div>
$obj.popover(options);
options對象包含的選項有：
animation: boolean; 是否帶css漸變過渡效果
placement: string | fn; 默認值是 'right'，能夠是 top、bottom 和 left ，用於決定環繞錨文本週圍的 Popover（彈出框）是位置。
selector: string，默認值是 false。把 Tooltip 對象受權給定的目標。
trigger: string，默認值是 'hover'，能夠是 focus 和 manual
title: string | fn ,默認爲'', 即默認不顯示title屬性的值
content:string | fn，默認值是 ''。即默認不顯示 data-content 屬性的值。
delay:number | object，默認值是 0。這決定了顯示和隱藏 popover（彈出框）的等待時間，以毫秒爲單位。若是值設置爲一個數字，則等待時間會應用於顯示和隱藏。若是值設置爲一個對象，則結構爲 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒爲單位的。

>> Bootstrap Dropdown（下拉菜單）
.dropdown > .dropdown-toggle( >.caret ) + .dropdown-menu ( li + li.divider + li)
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3cschool</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

>> 滾動監聽 scrollspy
data-spy="scroll" data-target="#navbarExample" data-offset="50"
<div class="span9 columns">
<h2>The links of the following navbar is going to be highlighted</h2>
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">w3resource</a>
<ul class="nav">
<li class="active"><a href="#php">PHP</a></li>
<li class=""><a href="#js">JS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Databases<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#mysql">MySQL</a></li>
<li class=""><a href="#pgsql">PostgreSQL</a></li>
<li class=""><a href="#mgdb">MongoDB</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example">
<h4 id="php">PHP</h4>
<p>PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language.
</p>
<h4 id="js">JS</h4>
<p>
JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created
</p>
<h4 id="mysql">MySQL</h4>
<p>
MySQL tutorial of w3resource is a comprehensive tutorial to learn MySQL. We have hundreds of examples covered,
</p>
<h4 id="pgsql">PostgreSQL</h4>
<p>
In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National
</p>
<h4 id="mgdb">MongoDB</h4>
<p>
how to prepare queries to fetch data against various conditions.
</p>
</div>
</div>

$('#navbarExample').scrollspy();
在 DOM 上建立和移除元素時使用 scrollspy（滾動監聽）。可是，您必須調用 refresh 方法。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});

使用 'offset' 方法來決定當計算滾動條位置時從頂部開始偏移的像素數。方法的類型是 number，默認值是 10。您須要增長或者減小這個值來讓 scrollspy（滾動監聽）正常工做。

一旦一個新的條目被 scrollspy（滾動監聽）觸發時，則觸發 'activate' 事件。

>> Bootstrap 輪播
.carousel + carousel-inner (> item + item) + .carousel-control.left + .carousel-control.right

<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

$('.carousel').carousel()
選項：
interval: 規定幻燈片輪換的等待時間，以毫秒爲單位。值的類型爲 number，默認值是 5000。若是爲 false，輪播將不會自動開始循環。
pause: 規定當鼠標停留在幻燈片區域即暫停輪播，鼠標離開即啓動輪播。值的類型爲 string，默認值是 'hover'。

方法：
$('.carousel').carousel('cycle');
$('.carousel').carousel('pause');
$('.carousel').carousel(number); 將輪播定位到指定的幀上（幀下標以0開始，相似數組）。
$('.carousel').carousel('prev');
$('.carousel').carousel('next');

事件：
slide: 當 slide 實例方法被調用以後，此事件被當即觸發。
slid: 當全部幻燈片播放完以後，此事件被觸發。

>> Typeahead
在用戶填寫表單時，爲用戶提供提示或數據。

data-items, data-source
<div class="well">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]">
</div>
$('#inputId').typeahead()
能夠經過dom傳參或js傳參 如：
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})

$inp.typehead(options);
選項：
source: 規定包含查詢時要顯示的值的數據源。值的類型是 array，默認值是 [ ]。
items: 規定查詢時要顯示的條目的最大值。數據類型是 number，默認值是 8。
matcher: 決定查詢是否匹配條目。帶有一個單一的參數，即要測試查詢的條目。當前查詢經過 this.query 訪問。返回一個布爾值 true，表示查詢匹配。數據類型是 function。默認狀況下是大小寫不敏感的。
sorter: 用於自動分類結果。帶有一個單一的參數，即具備 typeahead 實例範圍的條目。當前查詢經過 this.query 訪問。數據類型是 function。默認值是精確匹配的，其餘的值還能夠是大小寫敏感、大小寫不敏感。
highlighter: 用於自動高亮突出顯示結果。帶有一個單一的參數，即具備 typeahead 實例範圍的條目。數據類型是 function。默認狀況下是高亮突出顯示全部默認的匹配項。

>> 具備交互的按鈕
data-loading-text="loading..." data-toggle="button"
.button-group[data-toggle="buttons-checkbox"]
.button-group[data-toggle="buttons-radio"]

<h3>Control state</h3>
<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
<h3>Single toggle</h3>
<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
<h3>Checkbox</h3>
<p><div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
<h3>Radio</h3>
<p><div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
</div>

$('.nav-tabs').button() //其中 ' .nav-tabs ' 是包含按鈕的 div 的 class。

方法：
<button class="btn mybtn1" data-toggle="button" >…</button> $('.mybtn1').button('toggle');
該方法切換按鈕狀態。賦予按鈕被激活時的狀態和外觀。使用 'data-toggle="button"' 自動切換按鈕爲激活狀態。
<button class="btn" data-loading-text="loading stuff..." >...</button>
該方法設置按鈕狀態爲 loading - 即將按鈕置爲禁用狀態並將文字內容切換爲 loading。經過使用 'data-loading-text' 屬性能夠在按鈕元素上定義 loading 文本。

若是您使用 Firefox 瀏覽器，您將發現，在頁面加載以後，禁用狀態不會自動解除，請使用 'autocomplete="off"' 來避免這個問題。

$().button('reset')
$().button(string) //該方法重置按鈕狀態，並將按鈕上的文本重置爲傳入的值。

>> Bootstrap 摺疊
.accordion > .accordion-group( > .accordion-heading(>accordion-toggle) + .accordion-body(>accordion-inner) ) + .accordion-group

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>

這裏有三點須要注意。
第一，添加 data-toggle="collapse" 到您要點擊的連接上，用來展開或摺疊組件。
第二，添加一個 href 或一個 data-target 屬性到父組件，它的值爲子組件的 id。
第三，添加一個 data-parent 屬性用來建立手風琴式的效果。data-parent 屬性的值與主容器 div （保存整個手風琴組件）的 id 屬性的值相同。若是您想要建立一個簡單的摺疊組件，不須要像手風琴那麼複雜，就不須要添加這個屬性。

$(".collapse").collapse() //觸發摺疊

選項：
parent:值的類型爲 Selector。默認值爲 false。當父元素顯示時，父元素下全部的可摺疊元素是關閉的。
toggle:值的類型爲 Boolean。默認值爲 true。當被調用時，切換全部的可摺疊元素。

方法：
.collapse('toggle'):展現或隱藏一個可摺疊的頁面元素。
.collapse('show'):展現一個可摺疊的頁面元素。
.collapse(hide):隱藏一個可摺疊的頁面元素。

事件：show:當 show 實例方法被調用以後，此事件被當即觸發。shown:當可摺疊頁面元素顯示出來以後（同時 CSS 過渡效果也已執行完畢），此事件被觸發。hide:當 hide 實例方法被調用以後，此事件被當即觸發。hidden:當可摺疊頁面元素向用戶隱藏以後（同時 CSS 過渡效果也已執行完畢），此事件被觸發。