# 第 9 章 路徑分頁標簽和徽章組件 **學習要點：** 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="#">&laquo;</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="#">&raquo;</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> ```