bootstrap 分页学习笔记

<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>

<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>