Bootstrap 分頁、標籤、徽章、超大屏幕、頁面標題

分頁(pagination), 是一種無序列表

1.默認的分頁（.pagination）

代碼示例：

1 <ul class="pagination"> 
2     <li><a href="#">&laquo;</a></li> 
3     <li><a href="#">1</a></li> 
4     <li><a href="#">2</a></li> 
5     <li><a href="#">3</a></li> 
6     <li><a href="#">4</a></li> 
7     <li><a href="#">5</a></li> 
8     <li><a href="#">&raquo;</a></li> 
9 </ul>

顯示結果：

1.1 分頁狀態：禁用 disabled 和 當前 active

 例如：<li class="disabled"><a href="#">禁用連接</a></li>; 連接呈現灰色禁用狀態。

<li class="active"><a href="#">當前連接</a></li>；當前頁添加背景。

1.2 分頁的大小（.pagination-*）

在<ul>元素中添加類.pagination-lg、或.pagination-sm可調整分頁的大小。

2.翻頁（pager）

 翻頁也是無序列表、默認狀況下連接居中顯示。可經過向無序列表選項<li>添加類 .previous 和 .next來設置左對齊或者右對齊。代碼示例：

1 <ul class="pager"> 
2     <li class="previous"><a href="#">&larr; previous</a></li> 
3     <li class="next"><a href="#">next &rarr;</a></li> 
4 </ul>

結果顯示：

翻頁的狀態（disabled）:經過向列表選項中添加列.disabled 來設置連接的禁用狀態。

3.標籤（label）

標籤可用於計數、提示或頁面上其餘標記的顯示。標籤基類是 .label。另外能夠用如下的類來修飾標籤：

label-default、label-primary、label-success、label-info、label-warning、label-danger。

 例如：

<h1>Example Heading <span class="label label-default">Label default</span></h1> 
<h2>Example Heading <span class="label label-info">Label info</span></h2> 
<h3>Example Heading <span class="label label-success">Label success</span></h3> 
<h4>Example Heading <span class="label label-warning">Label warning</span></h4>
<h4>Example Heading <span class="label label-danger">Label danger</span></h4>
<h4>Example Heading <span class="label label-primary">Label primary</span></h4>

顯示結果以下：

4 徽章（badge）

與標籤類似，只不過徽章的邊角更加圓滑，徽章主要是用來提醒新的或者未讀的項。使用類 .badge

例如：

<a href="#">收件箱<span class="badge">20</span></a>

結果：

激活導航狀態

 能夠把徽章應用到激活的膠囊式導航菜單。代碼示例：

 1 <h4>膠囊式導航中的激活狀態</h4> 
 2 <ul class="nav nav-pills"> 
 3     <li class="active"> 
 4         <a href="#">首頁<span class="badge">42</span></a> 
 5     </li> 
 6     <li> 
 7         <a href="#">簡介</a> 
 8     </li> 
 9     <li> 
10         <a href="#">消息<span class="badge">3</span></a> 
11     </li> 
12 </ul> 
13 <br> 
14 <h4>列表導航中的激活狀態</h4> 
15 <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> 
16     <li class="active"> 
17         <a href="#"><span class="badge pull-right">42</span>首頁</a> 
18     </li> 
19     <li> 
20         <a href="#">簡介</a> 
21     </li> 
22     <li> 
23         <a href="#"><span class="badge pull-right">3</span>消息</a> 
24     </li> 
25 </ul>

結果顯示：

5. 超大屏幕（.jumbotron）

 建立一個帶有 class .jumbotron. 的容器 <div>。除了<h1>，字體粗細 font-weight 被減爲 200px。爲了使超大屏幕佔用所有寬度且不帶圓角。請在帶有類.container 的容器外部使用類.jumbotron.

 代碼示例：

1 <div class="jumbotron"> 
2     <div class="container"> 
3         <h1>歡迎登錄頁面！</h1> 
4         <p>這是一個超大屏幕（Jumbotron）的實例。</p> 
5         <p><a class="btn btn-primary btn-lg" role="button">學習更多</a> 
6         </p> 
7     </div> 
8 </div>

顯示結果：

6.頁面標題（page header）

頁面標題會在網頁標題的四周添加適當的間距。把標題放在帶有類 .page-header的<div>容器中便可。