一 : 分页效果
我们可以看到在网站上的翻页效果如下:
使用bootstrap如何实现的呢?
代码如下:
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">?</span> </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="#" aria-label="Next"> <span aria-hidden="true">?</span> </a> </li> </ul> </nav>
分析以上代码:
我们可以知道,实现分页我们通过 ul>li>a的结构来实现的,我们通过对ul添加class为pagination来实现的分页效果 通过ul>li>a>span来实现的上一页和下一页的功能
对于li元素:我们如果想显示当前的页码,通过对于相应的li元素上添加class为 active来实现的,
同样,如果我们想禁用特定的按钮,我们可以对相应的li元素上添加class为disabled类来实现的
在代码中的 aria-label的作用是进行说明的作用
对于nav元素:我们还需要在ul外面添加一个<nav>标签元素,里面的aria-label可以用来说明是哪儿的标签
对于ul元素:我们可以通过在ul元素上添加
.pagination-lg或者 .pagination-sm来实现分页栏的大小改变
对于
<nav aria-label=""><ul class="pagination pagination-lg"></ul>......</nav> <nav aria-label=""><ul class="pagination "></ul></nav> <nav aria-label=""><ul class="pagination pagiantion-sm"></ul></nav>
效果如下:
二:实现翻页效果
1如果我们不想要中间的页码,而只是想要上一页和下一页,我们可以这样设置代码:
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
这个默认的翻页效果实现的是居中的效果
2实现对齐效果我们可以把链接向两端对齐
通过添加class为previous或者 class="next"来实现的
<ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul>
三:实现徽章
我们通过给链接,导航等元素嵌套 <span class="badge">元素来展示未读的信息条目
例如:
<a href=#>Inbox<span class="badge">42</span></a> <button class="btn btn-primary type="button"> Messages<span class="badge">4</span> </button>
效果如下:
时间: 2024-10-26 09:47:50