Bootstrap分页,标签和微章

最新推荐文章于 2021-02-24 15:47:22 发布

原创最新推荐文章于 2021-02-24 15:47:22 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #分页 #标签

Bootstrap 专栏收录该内容

23 篇文章

订阅专栏

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

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

1.默认的分页
这里写图片描述

<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="#">&raquo;</a></li>
</ul>

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

<ul class="pagination pagination-lg">
<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="#">&raquo;</a></li>
</ul>
<ul class="pagination pagination-sm">
<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="#">&raquo;</a></li>
</ul>

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

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

默认的翻页
这里写图片描述

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

对齐的链接

<ul class="pager">
<li class="previous"><a href="#">&larr;older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

翻页的状态

<ul class="pager">
<li class="previous disabled"><a href="#">&larr;older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

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

<h1>标签<span class="label label-default">Label</span></h1>

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

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

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

<ul class="nav nav-pills">
<li class="active"><a href="#">首页<span class="badge">40</span></a></li>
<li><a href="#">简介</a></li>
<li><a href="#">消息<span class="badge">3</span></a></li>
</ul>