Bootstrap 組件

1.字體圖標

Bootstrap3與Bootstrap2的最大差異在於使用了font文件來替代圖片，用於顯示圖標，這些font圖片稱爲Glyphicons--象形文字圖標。

可以使用<i>或<span>標籤來配合使用，具體如下：

//使用小圖標

//也可以結合按鈕

</button>

注：可以對字體圖標設置字體尺寸font-size、顏色color和應用文本陰影text-shadow。

2.按鈕組

按鈕組就是多個按鈕集成在一個容器裏形成獨有的效果。

//基本格式

</div>

//將多個按鈕組整合起來便於管理

</div>

</div>

//設置按鈕組大小

3.下拉菜單

.dropdown { position:relatie; }

.dropdown-menu { position:absolute; top:100%; ... }

.dropdown-toggle 出現點擊效果

data-toggle="dropdown" JS選擇器用

使用：保證下拉菜單與觸發(button或nav)在同一父元素下。

3.1按鈕的下拉菜單

下拉菜單<span class="caret"></span>

</button>

</ul>

</div>

//設置向上觸發

//菜單項居右對齊，默認值是dropdown-menu-left

//設置菜單的標題，不要加超鏈接

//設置菜單的分割線

//設置菜單的禁用項

//讓菜單默認顯示

3.2按鈕組的下拉菜單

下拉菜單<span class="caret"></span>

</button>

</ul>

</div>

注：沒有class="dropdown"，因爲.btn-group有定位{ position:relatie; }

//分裂式按鈕下拉菜單

</button>

</ul>

</div>

3.3導航欄的下拉菜單

Java <span class="caret"></span>

</a>

<li><a href="#">Swing</a></li>

<li><a href="#">jMeter</a></li>

</ul>

</li>

</ul>

4.輸入框

·向 <form> 元素添加 role="form"。

·把標籤和控件放在一個帶有 class .form-group 的<div> 中。這是獲取最佳間距所必需的。

·向所有的文本元素 <input>、<textarea>和 <select>添加 class ="form-control" (焦點事件)

·<div class="input-group-addon">￥</div>或<span class="input-group-addon">￥</span>放置額外內容，二者是完全等效的。

4.1向input輸入框添加文本或單複選框

//添加文本

<div class="input-group"> //爲input添加邊距

</div>

//添加複選框

</span>

</div>

4.2向input輸入框添加按鈕與下拉菜單

用 .input-group-btn代替 .input-group-addon

//添加按鈕

</span>

</div>

//添加下拉菜單

<li> <a href="#">另一個功能</a> </li>

</ul>

</span>

</div>

4.3輸入框組的大小

您可以通過向 .input-group 添加相對錶單大小的class（比如 .input-group-lg、input-group-sm）來改變輸入框組的大小。輸入框中的內容會自動調整大小。

5.導航元素

5.1基本

對ul添加.nav .nav-tabs或.nav-pills

//標籤式的導航菜單

</ul>

//基本的膠囊式導航菜單

</ul>

5.2兩端對齊

對ul追加.nav-justified

//兩端對齊的導航元素

</ul>

5.3垂直的導航菜單

對ul追加 .nav-stacked

//垂直的膠囊式導航菜單

</ul>

5.4禁用鏈接.disable與顯示.active

對每個li添加了 .disabled，則會創建一個灰色的鏈接，同時禁用了該鏈接的 :hover 狀態。

對每個li添加了 .active，則會創建一個藍色的鏈接，。

class 只會改變 <a>的外觀，不會改變它的功能。在這裏，您需要使用自定義的 JavaScript來禁用鏈接。

<p>導航元素中的禁用鏈接</p>

</ul>

5.5動態標籤

①對li追加data-toggle="tab/pill"（看ul是nav-tabs還是nav-pills）和href="#???"

②要切換的標籤最外層用.tab-content的div包圍（只tab-content，沒有~~pill-content~~）

③對各個具體標籤加上id和.tab-pane（只tab-pane，沒有~~pill-pane~~）

④對第一個li加.active選中狀態，對對應div加.in。默認div隱藏，加in顯示。

</ul>

<p>菜鳥教程 —— 學的不僅是技術，更是夢想！！！</p>

</div>

<p>這是菜單 1顯示的內容。這是菜單 1顯示的內容。</p>

</div>

<p>這是菜單 2顯示的內容。這是菜單 2顯示的內容。</p>

</div>

<p>這是菜單 3顯示的內容。這是菜單 3顯示的內容。</p>

</div>

6.導航欄，導航欄包含5的導航菜單

6.1創建一個默認的導航欄的步驟如下：

1向 <nav>標籤添加.navbar、.navbar-default。添加 role="navigation"，有助於增加可訪問性。

2向 <div>元素添加一個標題div .navbar-header，內部包含了帶有.navbar-brand 的<a> 元素。這會讓文本看起來更大一號。

3爲了嚮導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

注：3中我們添加到是.navbar-nav，而不是.nav-tabs和.nav-pills因爲這兩個與導航欄.navbar間距不匹配，只能是.navbar-nav

</div>

<div>

Java <b class="caret"></b>

</a>

<li><a href="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

</ul>

</li>

</ul>

</div>

</nav>

6.2響應式導航欄

當寬度夠寬時，button不顯示，<div class="" id="">顯示

當寬度不夠寬，button顯示，<div class="" id="">隱藏

<a class="navbar-brand" href="#">菜鳥教程</a>未被<div class="" id="">包含，總顯示

代碼：

</button>

</div>

<div class="collapse navbar-collapse" id="example-navbar-collapse">

Java <b class="caret"></b>

</a>

<li><a href="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><a href="#">分離的鏈接</a></li>

<li><a href="#">另一個分離的鏈接</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

6.3導航欄中的表單

注：不在form裏的button添加.navbar-btn，添加左浮是因爲form或div是塊，佔整行。

</div>

<div>

</div>

</form>

導航欄按鈕

</button>

</div>

</nav>

6.4導航欄中的文本

如果需要在導航中包含文本，請使用 class .navbar-text。這通常與<p> 標籤一起使用，確保適當的前導和顏色。

實例

</div>

<div>

<p class="navbar-text">Runoob用戶登錄</p>

</div>

</nav>

6.5帶圖標的導航鏈接

</div>

</ul>

</div>

</nav>

6.6固定到頂部

向 .navbar class 添加class .navbar-fixed-top

因爲position：fixed脫離正常流，爲了防止導航欄與頁面主體中的其他內容的頂部相交錯，請向<body> 標籤添加至少50 像素的padding-top，內邊距的值根據您的需要設置。

······

6.7固定到底部

向 .navbar class 添加class .navbar-fixed-bottom。

······

6.8靜態的頂部

即隨着頁面一起滾動的導航欄，可以什麼也不加，默認就是靜態的頂部。

或者添加 .navbar-static-top class。該class 不要求向<body> 添加內邊距（padding）。

······

6.9反色的導航欄

爲了創建一個帶有黑色背景白色文本的反色的導航欄，只需要簡單地向 .navbar class添加 .navbar-inverseclass 即可。

······

7.麪包屑導航

爲ul添加.breadcrumb class即可。

</ul>

8.分頁

//默認分頁

</ul>

//分頁大小

<ul class="pagination pagination-lg"> //大

<ul class="pagination "> //中

<ul class="pagination pagination-sm"> //小

//分頁狀態 .active .disabled

<li class="active"><a href="#">1</a></li> //深色顯示

<li class="disabled"><a href="#">2</a></li> //淺色顯示

</ul>

//翻頁，只兩個按鈕時

<li><a href="#">Previous</a></li>

</ul>

//翻頁，帶左(.previous)右(.next)對齊

<li class="previous"><a href="#">← Older</a></li>

<li class="next"><a href="#">Newer →</a></li>

</ul>

//翻頁，帶狀態.disable

<li class="previous disabled"><a href="#">← Older</a></li>

<li class="next"><a href="#">Newer →</a></li>

</ul>

9.標籤

10.徽章（Badges）

徽章與標籤相似，主要的區別在於徽章的邊角更加圓滑。一般用於數字。

<a href="#">Mailbox <span class="badge">50</span></a>

<a href="#">Mailbox <span class="badge">0</span></a>

<a href="#">Mailbox <span class="badge"></span></a>

</li>

<li>

</li>

11.超大屏幕，套一個.jumbotron的div

代碼1：原始

<h1>歡迎登陸頁面！</h1>

<p>這是一個超大屏幕（Jumbotron）的實例。</p>

學習更多</a>

</p>

</div>

代碼2：套在container裏，圓角

<h1>歡迎登陸頁面！</h1>

<p>這是一個超大屏幕（Jumbotron）的實例。</p>

學習更多</a>

</p>

</div>

代碼3：套在container外，方角

<h1>歡迎登陸頁面！</h1>

<p>這是一個超大屏幕（Jumbotron）的實例。</p>

學習更多</a>

</p>

</div>

結果比較：

12.頁面標題

設置了邊距，並在標題最後增加了分割線

<h1>頁面標題實例

</h1>

</div>

<p>這是一個示例文本。這是一個示例文本。這是一個示例文本。這是一個示例文本。這是一個示例文本。</p>

13.縮略圖

功能：

1爲圖片添加四個像素的內邊距（padding）和一個灰色的邊框。

2當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。

</a>

14.警告

//基本警告

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-info">信息！請注意這個信息。</div>

<div class="alert alert-warning">警告！請不要提交。</div>

<div class="alert alert-danger">錯誤！請進行一些更改。</div>

//可關閉的警告

</button>

成功！很好地完成了提交。

</div>

//帶鏈接的警告

<a href="#" class="alert-link">成功！很好地完成了提交。</a>

</div>

15.進度條

使用 CSS3 過渡和動畫來獲得該效果。

Internet Explorer 9 及之前的版本和舊版的 Firefox不支持該特性，Opera 12不支持動畫。

注：role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"沒什麼用

//基本的進度條

外層.progress 的<div>，

內層.progress-bar style="width:60%;"的<div>。

</div>

//不同樣式的進度條

外層<div>：.progress

內層<div>：.progress-bar .progress-bar-* style="width:60%;"

* 可以是 success、info、warning、danger。

</div>

</div>

</div>

</div>

//條紋的進度條

外層<div>：.progress .progress-striped

內層<div>：.progress-bar .progress-bar-* style="width:60%;"

* 可以是 success、info、warning、danger。

</div>

//動畫的進度條

外層<div>：.progress .progress-striped .active

內層<div>：.progress-bar .progress-bar-* style="width:60%;"

* 可以是 success、info、warning、danger。

</div>

//堆疊的進度條

多個進度條放在相同的 .progress 中即可實現堆疊

</div>

16.多媒體對象（Media Object）。

這些抽象的對象樣式用於創建各種類型的組件（比如：博客評論），我們可以在組件中使用圖文混排，圖像可以左對齊或者右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。

//media

<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"

alt="媒體對象">

</a>

這是一些示例文本。這是一些示例文本。

</div>

//media-list

<p>這是一些示例文本。這是一些示例文本。</p>

<h4 class="media-heading">嵌套的媒體標題</h4>

<p>這是一些示例文本。這是一些示例文本。</p>

</div>

</li>

<p>這是一些示例文本。這是一些示例文本。</p>

</div>

</li>

</ul>

17.列表組

爲列表添加樣式

向元素 <ul> 添加 class .list-group。

向 <li> 添加 class .list-group-item。

<li class="list-group-item">免費域名註冊</li>

<li class="list-group-item">免費 Window空間託管</li>

<li class="list-group-item">圖像的數量</li>

<li class="list-group-item">每年更新成本</li>

</ul>

//向列表組添加徽章

我們可以向任意的列表項添加徽章組件，它會自動定位到右邊。

只需要在 <li> 元素中添加 <span class="badge"> 即可。

<li class="list-group-item">免費域名註冊</li>

<li class="list-group-item">免費 Window空間託管</li>

<li class="list-group-item">圖像的數量</li>

<li class="list-group-item">每年更新成本</li>

</ul>

//可以用<div>代替<ul>，<a>代替<li>

<div>

<a href="#" class="list-group-item active">免費域名註冊</a>

<a href="#" class="list-group-item">免費 Window空間託管</a>

<a href="#" class="list-group-item">圖像的數量</a>

</a>

</div>

18.面板（Panels）。

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

創建一個基本的面板，只需要向 <div> 元素添加 class .panel 和class .panel-default 即可

<div class="panel panel-default">這是一個基本的面板 </div>

//添加標題

添加內層<div> ：.panel-heading ，其內可帶有 .panel-title 的 <h1>-<h6>

//添加主體

添加內層<div> ：.panel-body

//添加註腳

添加內層<div>： .panel-footer

<h3 class="panel-title">帶有 title 的面板標題 </h3>

</div>

<div class="panel-body">這是一個基本的面板</div>

</div>

//帶語境色彩的面板

<div class="panel-body">這是一個基本的面板</div>

</div>

//帶表格的面板

<div class="panel-body">這是一個基本的面板</div>

</table>

</div>

19.Well

Well是一種會引起內容凹陷顯示或插圖效果的容器 <div>。

爲了創建 Well，只需要簡單地把內容放在帶有class .well 的<div> 中即可。、

<div class="well">您好，我在 Well中！</div>

//使用可選類 well-lg 或 well-sm 來改變Well 的尺寸大小。這兩個類會影響內邊距（padding）

<div class="well well-lg">您好，我在大的 Well中！</div>

<div class="well well-sm">您好，我在小的 Well中！</div>