###面包屑導航
Bootstrap 中的面包屑導航(Breadcrumbs)是一個簡單的帶有?.breadcrumb?class 的無序列表。
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width,initial-scale = 1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src = "js/jquery-1.11.2.min.js"></script>
<title>CSSDemo</title>
</head>
<body>
<div class="container">
<ul class="breadcrumb">
<li><a href="#"> 瀘沽湖</a></li>
<li class="active"><a href="#">青海</a></li>
<li><a href="#">阿里</a></li>
<li><a href="#">林芝</a></li>
</ul>
</div>
</body>
</html>
~~~

.breadcrumb?{
? ? padding:?8px 15px;
? ? margin-bottom:?20px;
? ? list-style:?none;
? ? background-color:?#f5f5f5;
? ? border-radius:?4px;
}
.active看起來并無效果。
審查元素,可以看出.active{color:#777;},但是a標簽是不會繼承父元素的文字顏色的。如果想要看出效果,可以去掉.active里面的a標簽,直接寫成<li class = "active">青海</li>.
不知這是否算是一個Bug,還是bootstrap故意這樣設置。不是很理解。
###Bootstrap 分頁
給ul加上class .pagination。不過需要注意的是,頁碼需要寫在a標簽中,才能呈現出下面的樣式。
~~~
<body>
<div class="container">
<ul class="pagination">
<li><a href="#">?</a> </li>
<li class="disabled"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="active"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">?</a> </li>
</ul>
</div>
</body>
~~~

給ul加上class .pagination-lg 或者.pagination-sm可以得到不同大小的分頁效果
### 翻頁(Pager)
創建一個簡單的分頁鏈接為用戶提供導航,可通過翻頁來實現。與分頁鏈接一樣,翻頁也是無序列表。默認情況下,鏈接是居中顯示。
~~~
<body>
<div class="container">
<ul class="pager">
<li><a href="#">previous</a></li>
<li><a href="#">next</a></li>
</ul>
</div>
</body>
~~~

通過給li加上class .previous可以使鏈接左對齊,給li加上class .next可以使鏈接右對齊。

### 翻頁的狀態
~~~
<body>
<div class="container">
<ul class="pager">
<li class="previous"><a href="#">previous</a></li>
<li class="next disabled"><a href="#">next</a></li>
</ul>
</div>
</body>
~~~
注意,是加disabled的。

###Bootstrap 標簽
標簽可用于計數、提示或頁面上其他的標記顯示。使用 class?.label?來顯示標簽
~~~
<body>
<div class="container">
<h2>西北<span class="label-warning">茶卡鹽湖</span></h2>
<h2>新疆<span class="label-danger">喀納斯湖</span></h2>
<h2>云南<span class="label-info">瀘沽湖</span></h2>
</div>
</body>
~~~

同p標簽一樣,可以使用修飾的 class?label-default、label-primary、label-success、label-info、label-warning、label-danger?來改變
標簽的外觀
###Bootstrap 徽章
徽章與標簽相似,主要的區別在于徽章的邊角更加圓滑。徽章(Badges)主要用于突出顯示新的或未讀的項。如需使用徽章,只需要把?
<span class="badge">?添加到鏈接、Bootstrap 導航等這些元素上即可。
~~~
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked col-lg-3">
<li class="active">
<a href="#">
<span class="badge pull-right">4000</span>
瀘沽湖
</a>
</li>
<li><a href="#">青海湖</a></li>
<li>
<a href="#">
<span class="badge pull-right">30000</span>
九寨溝
</a>
</li>
</ul>
</div>
</body>
~~~

文章最后向大家推薦下webstorm編輯器,真的是好使得不要不要的,欲罷不能!!!
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解