Bootstrap系列 -- 44. 分頁導航

賀臣發表於2015-07-05
boot

 

　　帶頁碼的分頁導航，可能是最常見的一種分頁導航，特別是在列表頁內容超多的時候，會給使用者提供分頁的導航方式。平時很多同學喜歡用div>a和div>span結構來製作帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標籤上加入pagination方法。

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

 

　　在Bootstrap框架中，也可以通過幾個不同的情況來設定分頁按鈕大小。

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

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

<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>

 

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

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

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

 

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

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

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

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

 


作者：情緣
出處：http://www.cnblogs.com/qingyuan/
關於作者：從事倉庫，生產軟體方面的開發，在專案管理以及企業經營方面尋求發展之路
版權宣告：本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結。
聯絡方式: 個人QQ  821865130 ; 倉儲技術QQ群 88718955,142050808 ;
吉特倉儲管理系統 開源地址: https://github.com/hechenqingyuan/gitwms

 

相關文章