Bootstrap分页,标签和微章

拼搏现实的明天。 2022-08-23 08:44 155阅读 0赞

分页（Pagination）,是一种无序列表。

.pagination:在页面上显示分页
    .disabled,.active:通过.disabled来定义不可点击的链接，.active来指示当前的页面
    .pagination-lg,.pagination-sm:获取不同大小的项

1.默认的分页  
![这里写图片描述][20160612201825516]

2.分页的状态  
![这里写图片描述][20160612202027884]  
disable:显示为灰色  
active：显示为蓝色背景  
3.设置大小  
![这里写图片描述][20160612202253549]

4.翻页  
如果想要创建一个简单的分页链接为用户提供导航，可以通过翻页实现。翻页是无序列表，默认情况下，链接式居中显示。

.pager 获得翻页链接
    .previous,.next:previous把链接向左对齐，使用.next把链接向右对齐
    .disabled 获得一个颜色变淡的外观

**默认的翻页**  
![这里写图片描述][20160612203023036]

<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
 </ul>

**对齐的链接**

*  ←older
 *  Newer →

<ul class="pager">
 <li class="previous"><a href="#">←older</a></li>
 <li class="next"><a href="#">Newer →</a></li>
 </ul>

**翻页的状态**

*  ←older
 *  Newer →

<ul class="pager">
 <li class="previous disabled"><a href="#">←older</a></li>
 <li class="next"><a href="#">Newer →</a></li>
 </ul>

5.标签  
标签可用于计数，提示或页面上的其他的标记显示。使用class.label来显示标签  
![这里写图片描述][20160612204055290]

<h1>标签Label</h1>

使用label-default,label-primary,label-success,label-info,label-warning,label-danger  
![这里写图片描述][20160612204510432]

默认标签
 主要标签
 成功标签
 信息标签
 警告标签
 危险标签

6.微章  
微章和标签相似，主要区别在于徽章的边角更加圆滑  
微章（Badges）主要用于突出显示新的或未读的项  
![这里写图片描述][20160612204923484]  
QQ50  
当没有新的或者未读的项时，通过css的:empty选择器，徽章会折叠起来，表示里面没有内容  
**激活状态**  
![这里写图片描述][20160612205533540]

[20160612201825516]: /images/20220721/6231be2c7cec4a4eaf82293d34651346.png
[20160612202027884]: /images/20220721/3f3c3f091f424d8fa6cff66bc9769221.png
[20160612202253549]: /images/20220721/7b7b69c91b774599b2e81c97cd3ea15c.png
[20160612203023036]: /images/20220721/dd73aa28189148b0af9e3b355cc958ad.png
[20160612204055290]: /images/20220721/081bef2d80014b38adc34397326cd2e2.png
[20160612204510432]: /images/20220721/ae26c6a985624f39afd0e3e6d76f87ae.png
[20160612204923484]: /images/20220721/0c3134e9724b48159cfdb7f5cde98aa3.png
[20160612205533540]: /images/20220721/c350368e74ab4d119e5c31cdea3abb36.png