Bootstrap分頁，bootstrap分頁外掛程式

Bootstrap分頁，bootstrap分頁外掛程式
前面的話

　　分頁導航幾乎在每個網站都可見，好的分頁能給使用者帶來好的使用者體驗。本文將詳細介紹Bootstrap分頁

 

概述

　　在Bootstrap架構中提供了兩種分頁導航：

 　　     帶頁碼的分頁導航

　　      帶翻頁的分頁導航

 

頁碼分頁

　　帶頁碼的分頁導航，可能是最常見的一種分頁導航，特別是在列表頁內容超多的時候，會給使用者提供分頁的導航方式

【預設分頁】

　　平時很多人喜歡用div>a和div>span結構來製作帶頁碼的分頁導航。不過，在Bootstrap架構中使用的是ul>li>a這樣的結構，在ul標籤上加入pagination方法：

<nav aria-label="Page navigation">  <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>

【狀態】

　　連結在不同情況下可以定製。可以給不能點擊的連結添加 .disabled 類、給當前頁添加 .active 類

　　最好將 active 或 disabled 狀態的連結（即 <a> 標籤）替換為 <span> 標籤，或者在向前/向後的箭頭處省略<a> 標籤，這樣就可以讓其保持需要的樣式而不能被點擊

<nav aria-label="Page navigation">  <ul class="pagination">    <li class="disabled">      <span aria-label="Previous">        <span aria-hidden="true">&laquo;</span>      </span>    </li>    <li class="active"><span>1</span></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>

【尺寸】

　　在Bootstrap架構中，可以通過兩種不同的情況來設定其大小，類似於按鈕一樣：

　　1、通過“pagination-lg”讓分頁導航變大

　　2、通過“pagination-sm”讓分頁導航變小

<nav aria-label="Page navigation">  <ul class="pagination pagination-lg">    <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 aria-label="Page navigation">  <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 aria-label="Page navigation">  <ul class="pagination pagination-sm">    <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>

 

翻頁

　　Bootstrap架構除了提供帶頁碼的分頁導航之外還提供了翻頁導航。這種分頁導航常常在一些簡單的網站上看到，比如說個人部落格，雜誌網站等。這種分頁導航是看不到具體的頁碼，只會提供一個“上一頁”和“下一頁”的按鈕

【預設用法】

　　在實際使用中，翻頁分頁導航和帶頁碼的分頁導航類似，為ul標籤加入pager類

<ul class="pager">   <li><a href="#">&laquo;上一頁</a></li>   <li><a href="#">下一頁&raquo;</a></li></ul>

【對齊設定】

　　預設情況之下，翻頁分頁導航是置中顯示，但有的時候我們需要一個居左，一個居右。Bootstrap架構提供了兩個樣式：

　　   previous：讓“上一步”按鈕居左

　　   next：讓“下一步”按鈕居右

　　具體使用的時候，只需要在li標籤上添加對應類名即可

　　實現原理很簡單，就是一個進行了左浮動，一個進行了右浮動

.pager .next > a,.pager .next > span {float: right;}.pager .previous > a,.pager .previous > span {float: left;}

<ul class="pager">   <li class="previous"><a href="#">&larr;上一頁</a></li>   <li class="next"><a href="#">下一頁&rarr;</a></li></ul>

【狀態設定】

　　和帶頁碼分頁導航一樣，如果在li標籤上添加了disabled類名的時候，分頁按鈕處于禁用狀態，但同樣不能禁止其點擊功能。可以通過js來處理，或將a標籤換成span標籤

.pager .disabled > a,.pager .disabled >a:hover,.pager .disabled >a:focus,.pager .disabled > span {  color: #999;  cursor: not-allowed;  background-color: #fff;}

<ul class="pager">  <li class="disabled"><span>&laquo;上一頁</span></li>  <li><a href="#">下一頁&raquo;</a></li></ul>