container 實現內容居中對齊
jumbotron 超大屏幕 可以增加標題的大小
responsive 響應式
center-block 圖像居中
col-md-offset-X 向左移
lead 文本更大更粗、行高更高

表格

table 表格
table-striped 條紋 隔行變色
table-bordered 表格邊框線
table-hover 在 <tbody> 內的任一行啟用鼠標懸停狀態
table-condensed 讓表格更加緊湊
success 表示成功的操作 用在tr上
info 表示信息變化的操作 用在tr上
warning 表示一個警告的操作 用在tr上
danger 表示一個危險的操作 用在tr上

文本
text-left 向左對齊文本
text-center 居中對齊文本
text-right 向右對齊文本
text-muted 本行內容是減弱的
text-primary 本行內容帶有一個 primary class
text-success 本行內容帶有一個 success class
text-info 本行內容帶有一個 info class
text-warning 本行內容帶有一個 warning class
text-danger 本行內容帶有一個 danger class
text-justify 設定文本對齊,段落中超出屏幕部分文字自動換行
text-nowrap 段落中超出屏幕部分不換行
text-lowercase 設定文本小寫
text-uppercase 設定文本大寫
text-muted 文本樣式

背景顏色
bg-primary
bg-success
bg-info
bg-warning
bg-danger

pull-left 元素浮動到左邊
pull-right 元素浮動到右邊
clearfix 清除浮動
center-block 設置元素為 display:block 並居中顯示
show 強制元素顯示
hidden 強制元素隱藏
sr-only 除了屏幕閱讀器外，其他設備上隱藏元素
sr-only-focusable 與 sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操作的用戶)
text-hide 將頁面元素所包含的文本內容替換為背景圖
close 顯示關閉按鈕
caret 顯示下拉式功能

title 屬性 title="XXXX"
dl->td+dd

list-unstyled 未定義樣式列表
list-inline 內聯列表
pre-scrollable 使 <pre> 元素可滾動，代碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條
pre 內嵌代碼
code 內嵌代碼

form 表單
form-group
form-control
placeholder="請輸入名稱"

form-inline 內聯表單 向左對齊的，標簽是並排的
sr-only 隱藏內聯表單的標簽
form-horizontal 水平表單
form-group
control-label
form-control
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
</div>
</div>
</form>

checkbox-inline 內聯復選框
radio-inline 內聯單選框
radio
checkbox
disabled 禁用 標簽上加一個就可以

fieldset 禁用的字段集<fieldset disabled></fieldset>
has-success 表單成功驗證狀態
has-warning 表單警告驗證狀態
has-error 表單錯誤驗證狀態
help-block 一個較長的幫助文本塊，超過一行，需要擴展到下一行

btn 按鈕 作用於 a button input 上
btn-default 默認/標準按鈕
btn-primary 原始按鈕樣式
btn-success 表示成功的動作
btn-info 該樣式可用於要彈出信息的按鈕
btn-warning 表示需要謹慎操作的按鈕
btn-danger 表示一個危險動作的按鈕操作
btn-link 讓按鈕看起來像個鏈接 (仍然保留按鈕行為)
btn-block 塊級按鈕(拉伸至父元素100%的寬度)
active 按鈕被點擊
disabled 禁用按鈕

圖片
img-circle 圖片以橢圓型展示
img-rounded 圖片圓角 相當於border-radius:6px
img-thumbnail 添加一些內邊距（padding）和一個灰色的邊框
img-responsive 圖片響應式 (將很好地擴展到父元素)

字體圖標
格式 glyphicon glyphicon-sort-by-attributes

下拉菜單
dropdown 只需要在 class dropdown 內加上下拉菜單 用在div上
格式例子
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
</ul>
</div>

dropdown-menu 創建下拉菜單 用在ul上
dropdown-menu-right 下拉菜單右對齊 用在ul上
dropdown-header 下拉菜單中添加標題 用在ul上
dropup 指定向上彈出的下拉菜單
disabled 下拉菜單中的禁用項
divider 下拉菜單中的分割線

btn-group 按鈕組 用在div上
btn-toolbar 把幾組 <div class="btn-group"> 結合到一個 <div class="btn-toolbar"> 中獲得更復雜的組件
.btn-group-lg, .btn-group-sm,.btn-group-xs 應用到整個按鈕組的大小調整，而不需要對每個按鈕進行大小調整 應用在div上
btn-group-vertical 讓一組按鈕垂直堆疊顯示(默認是水平) 應用在div上
在一個按鈕組裏面嵌套另一個按鈕組（下拉菜單可以）
<div class="btn-group">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下列
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉鏈接 1</a></li>
<li><a href="#">下拉鏈接 2</a></li>
</ul>
</div>
</div>

<span class="caret"></span> 指示按鈕作為下拉菜單
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一個功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
</ul>
</div>

分割的按鈕下拉菜單 就是將下拉框組合拼裝在一起
<div class="btn-group">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切換下拉菜單</span>
</button>
</div>

btn-lg，btn-sm，btn-xs 按鈕大小 大，中，小

輸入框組
語法
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

input-group 應用在div中
在input-group 裏面包含 input-group-addon 應在在<span> 內放置額外的內容
input-group-lg，input-group-sm 輸入框組的大小

<span class="input-group-addon">XXX</span> 中可以放控件,btn、下拉菜單，文字等等

導航元素
nav nav-tabs 標簽式導航菜單 應用在ul上
語法
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
</ul>

active 表示選中點擊

nav nav-pills 膠囊式的導航菜單 應用在ul上
nav-stacked 垂直堆疊 應用在ul上
nav-justified 兩端對齊的導航 與父元素等寬
tab-content 與 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 設置標簽頁對應的內容隨標簽的切換而更改
tab-pane 與 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 設置標簽頁對應的內容隨標簽的切換而更改
in active 選中點擊狀態

語法
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li><a data-toggle="tab" href="#SVN">SVN</a></li>
<li><a data-toggle="tab" href="#iOS">iOS</a></li>
<li><a data-toggle="tab" href="#Net">VB.Net</a></li>
<li><a data-toggle="tab" href="#Java">Java</a></li>
<li><a data-toggle="tab" href="#PHP">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="Home">Home</div>
<div class="tab-pane fade" id="SVN">SVN</div>
<div class="tab-pane fade" id="iOS">iOS</div>
<div class="tab-pane fade" id="Net">Net</div>
<div class="tab-pane fade" id="Java">Java</div>
<div class="tab-pane fade" id="PHP">PHP</div>
</div>

分頁
pagination 是一種無序列表 應用在ul上
語法
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
&laquo; 表示 <<
&raquo; 表示 >>
&larr; 表示 <——
&rarr; 表示 ——>
&times; 表水 X

pagination-lg, .pagination-sm 獲取不同大小的項
active 選中點擊該頁碼 用在li上
disabled 禁用該頁碼 用在li上

翻頁
pager 添加該 class 來獲得翻頁鏈接 分頁鏈接，鏈接居中對齊
previous 使用 .previous 把鏈接向左對齊
next 使用 .next 把鏈接向右對
disabled 禁用鏈接
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

標簽 標簽可用於計數、提示或頁面上其他的標記顯示
label 來顯示標簽
語法
<span class="label label-default">Label</span>
<span class="label label-default">默認標簽</span>
<span class="label label-primary">主要標簽</span>
<span class="label label-success">成功標簽</span>
<span class="label label-info">信息標簽</span>
<span class="label label-warning">警告標簽</span>
<span class="label label-danger">危險標簽</span>

徽章 徽章與標簽相似，主要的區別在於徽章的邊角更加圓滑
主要用於突出顯示新的或未讀的項
語法
<span class="badge">

頁面標題 page-header
它會在網頁標題四周添加適當的間距

<small>子標題</small> 小標簽元素

警告 alert
警告（Alerts）向用戶提供了一種定義消息樣式的方式
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！請註意這個信息。</div>
<div class="alert alert-warning">警告！請不要提交。</div>
<div class="alert alert-danger">錯誤！請進行一些更改。</div>

可取消的警告
1:通過創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告
2:同時向上面的 <div> class 添加可選的 .alert-dismissable
3:再添加一個關閉按鈕 .close 再加上一個屬性 data-dismiss="alert"
語法：
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
信息！請註意這個信息。
</div>

alert-link 警告鏈接

close.bs.alert 當調用 close 實例方法時立即觸發該事件。

closed.bs.alert 當警告框被關閉時觸發該事件（將等待 CSS 過渡效果完成）。
$(‘#myalert‘).bind(‘closed.bs.alert‘, function () {
// 執行一些動作...
})

進度條
progress
1：添加一個帶有 class .progress 的 <div>。
2：接著，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。
3：添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。
語法
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" title="40% 完成" style="width: 40%;">
</div>
</div>
progress-striped 條紋的進度條
active 動畫的進度條 在條紋基礎上

列表組 列表組件用於以列表形式呈現復雜的和自定義的內容
1：向元素 <ul> 添加 class .list-group。
2：向 <li> 添加 class .list-group-item。

語法
<ul class="list-group">
<li class="list-group-item">免費域名註冊</li>
<li class="list-group-item">免費 Window 空間托管</li>
</ul>

面板 面板組件用於把 DOM 組件插入到一個盒子中

語法

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
帶有 title 的面板標題
</h3>
</div>
<div class="panel-body">
面板內容
</div>
<div class="panel-footer">面板腳註</div>
</div>

帶語境色彩的面板
使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，來設置帶語境色彩的面板
跟 panel 放同一級

模態框
1、html代碼
語法：
<!--定義一個模態框 class="modal fade" aria-hidden="false" role="dialog"-->
<div class="modal fade" id="modelwin" role="dialog" aria-hidden="false">
<div class="modal-dialog">
<!-- 模態框中所有內容-->
<div class="modal-content">
<!--頭部-->
<div class="modal-header">
<!--取消X-->
<button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
<!--頭部標題-->
<h2 class="modal-title pull-left">這是模態框標題</h2>
</div>
<!--身體內容部分-->
<div class="modal-body">
<!--填寫內容-->
<div class="progress ">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 40%" title="完成 40%"></div>
</div>
</div>
<!--腳頁-->
<div class="modal-footer">
<!--關閉-->
<button type="button" data-dismiss="modal" class="btn btn-default">
關閉
</button>
<button class="btn btn-primary">
確定
</button>
</div>
</div>
</div>
</div>
</div>

2、js
//為了讓彈出框居中
$(‘#modelwin‘).on(‘shown.bs.modal‘, function () {　　// 事件開始時被觸發
$("#modelwin .modal-dialog").css({
"margin": "0px",
　　　"width":"55%",　　//設置彈出框的width
"top": function () { //設置高度
return (document.documentElement.clientHeight - $("#modelwin .modal-dialog").height()) / 2 + "px";
},
"left": function () { // 左邊位置
return (document.documentElement.clientWidth - $("#modelwin .modal-dialog").width()) / 2 + "px";
}
});
});
$("#modelwin").modal({backdrop: ‘static‘, keyboard: false});
$("#modelwin").modal("show");

1：屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。
2：<div class="modal-header">，modal-header 是為模態窗口的頭部定義樣式的類。
3：class="close"，close 是一個 CSS class，用於為模態窗口的關閉按鈕設置樣式。
4：data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。
5：class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的主體設置樣式。
6：class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的底部設置樣式。
7：data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。

backdrop 指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
取值：boolean 或者 ‘static‘ （默認 true）

keyboard 當按下 escape 鍵時關閉模態框，設置為 false 時則按鍵無效。
取值： boolean （默認 true）

show 當初始化時顯示模態框。
取值： boolean （默認 true）

模態框中的方法
modal(options) 把內容作為模態框激活。接受一個可選的選項對象。
$(‘#identifier‘).modal({backdrop:‘static‘,keyboard: false})

modal(‘toggle‘) 手動切換模態框 $(‘#identifier‘).modal(‘toggle‘)
modal(‘show‘) 手動打開模態框。 $(‘#identifier‘).modal(‘show‘)
modal(‘hide‘) 手動隱藏模態框 $(‘#identifier‘).modal(‘hide‘)

模態框中的事件
show.bs.modal 在調用 show 方法後觸發。
shown.bs.modal 當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）
hide.bs.modal 當調用 hide 實例方法時觸發。
hidden.bs.modal 當模態框完全對用戶隱藏時觸發。
$(‘#identifier‘).on(‘hidden.bs.modal‘, function () {
// 執行一些動作...
})

標簽頁（Tab）插件中要用到的事件
show.bs.tab 該事件在標簽頁顯示時觸發，但是必須在新標簽頁被顯示之前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標簽頁和前一個激活的標簽頁。
$(‘a[data-toggle="tab"]‘).on(‘show.bs.tab‘, function (e) {
e.target // 激活的標簽頁
e.relatedTarget // 前一個激活的標簽頁
})

shown.bs.tab 該事件在標簽頁顯示時觸發，但是必須在某個標簽頁已經顯示之後。分別使用 event.target 和 event.relatedTarget 來定位到激活的標簽頁和前一個激活的標簽頁。
$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {
e.target // 激活的標簽頁
e.relatedTarget // 前一個激活的標簽頁
})

語法：
<hr>
<p class="active-tab"><strong>激活的標簽頁</strong>：<span></span></p>
<p class="previous-tab"><strong>前一個激活的標簽頁</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
菜鳥教程</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並建立自己的網站。菜鳥先飛早入行——學的不僅是技術，更是夢想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是於 2007 年首次發布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
$(function(){
$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {
// 獲取已激活的標簽頁的名稱
var activeTab = $(e.target).text();
// 獲取前一個激活的標簽頁的名稱
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});

提示工具（Tooltip）插件
用法：
只需向一個錨標簽添加 data-toggle="tooltip"
<a href="#" data-toggle="tooltip" data-placement="left" title="Example tooltip">請懸停在我的上面</a>

data-placement 屬性 設置tooltip方向 left/right/bottom/top (默認top)

Tooltip 選項
選項是通過 Bootstrap 數據 API（Bootstrap Data API）添加或通過 JavaScript 調用
animation boolean 默認值：true data-animation 提示工具使用 CSS 漸變濾鏡效果
html boolean 默認值：false data-html 向提示工具插入 HTML。如果為 false，jQuery 的 text 方法將被用於向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。

placement string|function 默認值：top data-placement
規定如何定位提示工具（即 top|bottom|left|right|auto）。當指定為 auto 時，會動態調整提示工具。例如，如果 placement 是 "auto left"，提示工具將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。

selector string 默認值：false data-selector 如果提供了一個選擇器，提示工具對象將被委派到指定的目標。
title string | function 默認值：‘‘ data-title 如果未指定 title 屬性，則 title 選項是默認的 title 值。
trigger string 默認值：‘hover focus‘ data-trigger 定義如何觸發提示工具： click| hover | focus | manual。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
content string | function 默認值：‘‘ data-content 如果未指定 data-content 屬性，則使用默認的 content 值。
delay number | object 默認值：0 data-delay 延遲顯示和隱藏提示工具的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那麽延遲將會應用於顯示和隱藏。如果提供的是對象，結構如下所示：
delay: { show: 500, hide: 100 }
container string | false 默認值：false data-container 向指定元素追加提示工具。實例： container: ‘body‘

Tooltip 方法
Options: .tooltip(options) 向元素集合附加提示工具句柄。 $().tooltip(options)
Toggle: .tooltip(‘toggle‘) 切換顯示/隱藏元素的提示工具。 $(‘#element‘).tooltip(‘toggle‘)
Show: .tooltip(‘show‘) 顯示元素的提示工具。 $(‘#element‘).tooltip(‘show‘)
Hide: .tooltip(‘hide‘) 隱藏元素的提示工具。 $(‘#element‘).tooltip(‘hide‘)
Destroy: .tooltip(‘destroy‘) 隱藏並銷毀元素的提示工具。 $(‘#element‘).tooltip(‘destroy‘)

Tooltip 事件
下表列出了提示工具（Tooltip）插件中要用到的事件。這些事件可在函數中當鉤子使用
show.bs.tooltip 當調用 show 實例方法時立即觸發該事件。
shown.bs.tooltip 當提示工具對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。
hide.bs.tooltip 當調用 hide 實例方法時立即觸發該事件。
hidden.bs.tooltip 當提示工具對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。

$(‘#myTooltip‘).on(‘hidden.bs.tooltip‘, function () {
// 執行一些動作...
})

彈出框（Popover）插件

警告框（Alert）插件
警告框（Alert）消息大多是用來向終端用戶顯示諸如警告或確認消息的信息

按鈕（Button）插件

加載狀態 只需要簡單地向 button 元素添加 data-loading-text="Loading..." 作為其屬性即可
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button"> 加載狀態
</button>

bootstrap 筆記用法