詳細了解Bootstrap中的分頁元件

分頁導覽幾乎在每個網站都可見，好的分頁能帶給使用者好的使用者體驗。本篇文章跟大家詳細介紹一下Bootstrap分頁。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

概述

#在Bootstrap框架中提供了兩個分頁導航：

☑   帶頁碼的分頁導覽

☑   帶翻頁的分頁導覽

頁碼分頁

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

【預設分頁】

平常很多人喜歡用

p>a

和

p>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">«</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">»</span>
      </a>
    </li>
  </ul>
</nav>

相關推薦： 《bootstrap教學》

【狀態】

連結在不同情況下可以自訂。可以為不能點選的連結新增 .disabled

 類別、新增至目前頁面 

.active 類別

最好將active 或disabled 狀態的連結（即 

 標籤）替換為 

 標籤，或在向前/向後的箭頭處省略 標籤，這樣就可以讓其保持需要的樣式而不能被點選

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="disabled">
      <span aria-label="Previous">
        <span aria-hidden="true">«</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">»</span>
      </a>
    </li>
  </ul>
</nav>

【尺寸】

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

1、透過「pagination-lg」讓分頁導覽變大

2、透過「pagination-sm」讓分頁導覽變小

  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  


<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</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">»</span>
      </a>
    </li>
  </ul>
</nav>


  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  

#翻頁

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

###########更多程式相關知識，請造訪： ###程式設計影片###！ ！ ###

以上是詳細了解Bootstrap中的分頁元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！