Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
學習要點：
1.路徑組件
2.分頁組件
3.標簽組件
4.徽章組件
本節課我們主要學習一下 Bootstrap 的四個組件功能：路徑組件、分頁組件、標簽組件和徽章組件。
一．路徑組件
路徑組件也叫做面包屑導航。
//面包屑導航 <ol class="breadcrumb"> <li> <a href="#">首頁</a> </li> <li> <a href="#">產品列表</a> </li> <li class="active"> 韓版 2015 年羊絨毛衣 </li> </ol>
二．分頁組件
分頁組件可以提供帶有展示頁面的功能。
//默認分頁 <ul class="pagination"> <li> <a href="#">«</a> </li> <li> <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="#">5</a> </li> <li> <a href="#">»</a> </li> </ul> //首選項和禁用 <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> //設置尺寸，四種 lg、默認、sm 和 xs <ul class="pagination pagination-lg"> //翻頁效果 <ul class="pager"> <li> <a href="#">上一頁</a> </li> <li> <a href="#">下一頁</a> </li> </ul> //對齊翻頁鏈接 <ul class="pager"> <li class="previous"> <a href="#">上一頁</a> </li> <li class="next"> <a href="#">下一頁</a> </li> </ul> //翻頁項禁用 <li class="previous disabled"><a href="#">上一頁</a></li>
三．標簽
//在文本後面帶上標簽 <h3>標簽 <span class="label label-default">new</span></h3> //不同色調的標簽 <h3>標簽 <span class="label label-primary">new</span></h3> <h3>標簽 <span class="label label-success">new</span></h3> <h3>標簽 <span class="label label-info">new</span></h3> <h3>標簽 <span class="label label-warning">new</span></h3> <h3>標簽 <span class="label label-danger">new</span></h3>
四．徽章
//未讀信息數量徽章 <a href="#">信息 <span class="badge">10</span></a> //按鈕中使用徽章 <button class="btn btn-success"> 提交 <span class="badge">3</span> </button> //激活狀態自動適配色調 <ul class="nav nav-pills"> <li class="active"> <a href="#">首頁 <span class="badge">2</span></a> </li> <li> <a href="#">資訊</a> </li> </ul>
以上所述是小編給大家介紹的Bootstrap組件之路徑分頁標簽與徽章組件，希望對大家有所幫助！