文章參考 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>
    

?

?

?

?

?

?