文章参考 http://v3.bootcss.com/components/#pagination
默认分页代码
- <nav>
- <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>
禁用 和 激活 分页按钮
- <nav>
- <ul class="pagination">
- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
- <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
- ...
- </ul>
- </nav>
分页按钮的尺寸
- <nav><ul class="pagination pagination-lg">...</ul></nav>
- <nav><ul class="pagination">...</ul></nav>
- <nav><ul class="pagination pagination-sm">...</ul></nav>
分页demo
- <style>
- /********跳转页面的按钮样式*********/
- .page_jump{
- background-color: #fff;
- border: 1px solid #ddd;
- color: #565656;
- line-height: 1.42857;
- margin-left: -1px;
- padding: 6px 12px;
- position: relative;
- text-decoration: none;
- }
- /********修改页控件的字体颜色*********/
- .pagination > li,.pagination > li > a, .pagination > li > span {
- color: #999999;
- }
- /********当前页被选中*********/
- .pagination > li > a.active {
- background: #fdd000;
- color: #e5005a;
- border: 1px solid #fdd000;
- }
- </style>
- <!-- 分页 -->
- <div class="sqh_img_center" style="width: 550px;">
- <nav>
- <ul class="pagination">
- <li>
- <a href="#" aria-label="Previous">
- <span aria-hidden="true">«</span>上一页
- </a>
- </li>
- <li><a href="#" class="active">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#" >3</a></li>
- <li class="active"><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li>
- <a href="#" aria-label="Next">
- 下一页<span aria-hidden="true">»</span>
- </a>
- </li>
- <li class="margin_left_10">
- 共3页,到第
- </li>
- <li style=" margin: 20px 10px;" >
- <input class=" text-center" type="text" style="width: 30px; height:31px;margin-right: 10px; border: 1px solid #ddd;">页
- </li>
- <li style=" margin: 20px 0;" class="margin_left_10">
- <button class="page_jump">确定</button>
- </li>
- </ul>
- </nav>
- </div>
翻页
- <nav>
- <ul class="pager">
- <li><a href="#">Previous</a></li>
- <li><a href="#">Next</a></li>
- </ul>
- </nav>
对齐链接
- <nav>
- <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>
- </nav>
禁用状态
- <nav>
- <ul class="pager">
- <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
- <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
- </ul>
- </nav>