分頁是什麼？

  分頁是往往一個頁面索要顯示的內容太多，無法用一頁表示，那麼我們就會對該頁面進行分頁，在頁面的一個部位，做一個"1-2-3-4"等的連線數字表示頁，如果還不明白請直接看例子

建立分頁

• 建立一個帶有class="pagination"的無序列表
• 通過<li><a href="#">1</a></li>來表示帶有連線的數字分頁
• 通過class="disabled"來禁用某些數字分頁(在<li>中)
• 通過class="active"裡指示當前的數字分頁（在<li>中）
• 通過pagination-lg、pagination-sm來獲取不同大小的項

基本分頁

  <ul class="pagination">
      <li><a href="#">&laquo;</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="#">&raquo;</a></li>
  </ul>
 

程式碼解讀：我們建立了一個帶有class="pagination"的無序列表，這就是分頁了，在<li>中編寫數字分頁

執行結果

建立<li>帶有class的分頁

  <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">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="#">&raquo;</a></li>
  </ul>
 

程式碼解讀：我們對序號為"1"的數字項添加了class="disabled"禁用此項，對序號為"4"的數字項添加了class="active"表示當前頁

執行結果

建立比預設更大或者更小的分頁

 <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">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="#">&raquo;</a></li>
  </ul>
  <ul class="pagination pagination-lg">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">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="#">&raquo;</a></li>
  </ul>
  <ul class="pagination pagination-sm">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">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="#">&raquo;</a></li>
  </ul>

程式碼解讀：我們建立了三個大小完全不等的分頁，第一個是預設分頁，第二個是較大的分頁，第三個是小的分頁

執行結果

翻頁

 如果你想建立一個簡單的翻頁為使用者提供導航的話，不如試試翻頁功能，簡單的來說就是下一頁上一頁

建立翻頁

• 同樣是在無序列表<ul>中，新增class="pager"
• 同樣的class="active"以及class="disabled"使用與翻頁
• class="next"，用於代表下一頁連線
• class="previous"，用於上一頁連線

  <ul class="pagination pager">
       <li class="previous"><a href="#">previous</a></li>
      <li class="disabled"><a href="#">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 class="next"><a href="#">next</a></li>
  </ul>

執行結果

注意帶有class="previous"的不標籤是預設左對齊的，帶有class="next"是預設右對齊的