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

?

默認(rèn)分頁(yè)代碼

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

?

禁用 和 激活 分頁(yè)按鈕

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

?

分頁(yè)按鈕的尺寸

      <nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>
    

?

自己寫(xiě)的一個(gè)分頁(yè)demo

      <style>
/********跳轉(zhuǎn)頁(yè)面的按鈕樣式*********/
    .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;
    }

    /********修改頁(yè)控件的字體顏色*********/
    .pagination > li,.pagination > li > a, .pagination > li > span {
        color: #999999;
    }

    /********當(dāng)前頁(yè)被選中*********/
    .pagination > li > a.active {
        background: #fdd000;
        color: #e5005a;
        border: 1px solid #fdd000;
    }

</style>

<!-- 分頁(yè) -->
<div class="sqh_img_center" style="width: 550px;">
	<nav>
		<ul class="pagination">
			<li>
				<a href="#" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span>上一頁(yè)
				</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">
					下一頁(yè)<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
			<li class="margin_left_10">
				共3頁(yè)，到第
			</li>
			<li style=" margin: 20px 10px;" >
			   <input class=" text-center" type="text" style="width: 30px; height:31px;margin-right: 10px; border: 1px solid #ddd;">頁(yè)
			</li>
			<li style=" margin: 20px 0;" class="margin_left_10">
				<button class="page_jump">確定</button>
			</li>
		</ul>
	</nav>
</div>

    

?

?

---

?翻頁(yè)

?

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

    

?

?對(duì)齊鏈接

?

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

?

?

?

?

?禁用狀態(tài)

?

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

?

?

?

?

?

?