快捷導(dǎo)航

Bootstrap CSS組件之分頁(pagination)和翻頁(pager)

更新時間：2016年12月17日 11:13:03 作者：github_34514750

這篇文章主要介為大家詳細紹了Bootstrap CSS組件之分頁和翻頁的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

幾乎所有網(wǎng)站內(nèi)容都需要分頁顯示,一個用戶體驗良好的分頁組件會得到訪問用戶的良好評價。

//源碼
.pagination {
 display: inline-block;
 padding-left: 0;
 margin: 20px 0;
 border-radius: 4px;
}
.pagination > li {
 display: inline;
}
.pagination > li > a,
.pagination > li > span {
 position: relative;
 float: left;
 padding: 6px 12px;
 margin-left: -1px;
 line-height: 1.42857143;
 color: #337ab7;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
 margin-left: 0;
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
}

普通的分頁

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

分頁的狀態(tài)-disabled active

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

分頁的大小-pagination-lg，pagination-sm

<ul class="pagination pagination-lg">
<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>

翻頁(pager)

<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>
<ul class="pager">
 <li class="previous"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解javascript高級定時器
這篇文章主要介紹了javascript高級定時器，針對javascript的代碼隊列進行詳細解析，感興趣的小伙伴們可以參考一下
2015-12-12
JavaScript利用虛擬列表實現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時間分片的方式來對長列表進行渲染，但這種方式更適用于列表項的DOM結(jié)構(gòu)十分簡單的情況，所以本文來講講如何使用虛擬列表的方式，來同時加載大量數(shù)據(jù)吧
2023-05-05
echart中tooltip自動展示代碼示例
這篇文章主要給大家介紹了關(guān)于echart中tooltip自動展示的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫,提供直觀，生動,可交互,可個性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下
2023-09-09
javascript基礎(chǔ)練習(xí)之翻轉(zhuǎn)字符串與回文
最近在學(xué)習(xí)的時候到了基礎(chǔ)算法這一章節(jié)，讓我對js內(nèi)置對象方法的掌握還有思維邏輯都得到了提升，所借此機會來寫一寫學(xué)習(xí)心得和總結(jié)。下面這篇文章主要介紹了利用javascript實現(xiàn)翻轉(zhuǎn)字符串與回文的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
JS動畫實現(xiàn)回調(diào)地獄promise的實例代碼詳解
這篇文章主要介紹了JS動畫實現(xiàn)回調(diào)地獄promise的實例代碼詳解,需要的朋友可以參考下
2018-11-11
jQuery Mobile動態(tài)刷新頁面樣式的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query Mobile動態(tài)刷新頁面樣式的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
鴻蒙系統(tǒng)中的 JS 開發(fā)框架
最近華為鴻蒙OS 2.0正式開源！關(guān)于鴻蒙的教程其實網(wǎng)上也已經(jīng)有一些嘗鮮的小伙伴分享了相關(guān)文章，這篇文章主要為大家詳細介紹了鴻蒙系統(tǒng)中的 JS 開發(fā)框架，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
一文快速弄懂webpack動態(tài)import原理
無論你開發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動態(tài)import原理的相關(guān)資料,需要的朋友可以參考下
2022-04-04
JavaScript實現(xiàn)計算圓周率到小數(shù)點后100位的方法示例
這篇文章主要介紹了JavaScript實現(xiàn)計算圓周率到小數(shù)點后100位的方法,簡單分析了圓周率計算的原理并結(jié)合實例形式給出了javascript計算圓周率的具體操作技巧,需要的朋友可以參考下
2018-05-05
js驗證賬戶名是否重復(fù)
這篇文章主要為大家詳細介紹了js驗證賬戶名是否重復(fù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05