bootstrap 分页学习笔记

文章参考 http://v3.bootcss.com/components/#pagination

 

默认分页代码

      <nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
    

 

禁用 和 激活 分页按钮

      <nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&laquo;</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">&raquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>
    

 

 

 

 

 禁用状态

 

      <nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>