(八)路径(面包屑导航)分页标签和徽章组件
生活随笔
收集整理的這篇文章主要介紹了
(八)路径(面包屑导航)分页标签和徽章组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.路徑組件?
路徑組件也叫做面包屑導航。?
<ol class="breadcrumb"><li><a href="#">首頁</a></li><li><a href="#">產品列表</a></li><li><a href="#">大衣</a></li><li class="active">毛呢大衣</li> </ol>?
二.分頁組件?
1、基本實例
分頁組件可以提供帶有展示頁面的功能。?
<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>2、首選項和禁用?
<ul class="pagination"><li><a href="#">«</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li class="disabled"><a href="#">5</a></li><li><a href="#">»</a></li> </ul>3、設置尺寸,四種 lg、默認、sm 和 xs?
<ul class="pagination pagination-lg">?
4、翻頁效果?
<ul class="pager"><li><a href="#">上一頁</a></li>
<li><a href="#">下一頁</a></li>
</ul>
5、對齊翻頁鏈接?
<ul class="pager"><li class="previous"><a href="#">上一頁</a></li><li class="next"><a href="#">下一頁</a></li> </ul>?
?6、翻頁項禁用?
<li class="previous disabled"><a href="#">上一頁</a></li>?
?三.標簽
1、?在文本后面帶上標簽?
<h3>標簽 <span class="label label-default">new</span></h3>2、不同色調的標簽?
<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>?
四.徽章
1、未讀信息數量徽章?
<a href="#">信息 <span class="badge">10</span></a>2、按鈕中使用徽章?
<button class="btn btn-success"> 提交 <span class="badge">3</span></button>3、激活狀態自動適配色調?
<ul class="nav nav-pills"><li class="active"><a href="#">首頁 <span class="badge">2</span></a></li><li><a href="#">資訊</a></li> </ul>?
轉載于:https://www.cnblogs.com/shyroke/p/9184884.html
總結
以上是生活随笔為你收集整理的(八)路径(面包屑导航)分页标签和徽章组件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: React开发(224):ant des
- 下一篇: React开发(213):React在