Bootstrap CSS組件之分頁(yè)(pagination)和翻頁(yè)(pager)
更新時(shí)間：2016年12月17日 11:13:03 作者：github_34514750
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS組件之分頁(yè)和翻頁(yè)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
幾乎所有網(wǎng)站內(nèi)容都需要分頁(yè)顯示,一個(gè)用戶(hù)體驗(yàn)良好的分頁(yè)組件會(huì)得到訪問(wèn)用戶(hù)的良好評(píng)價(jià)。
//源碼
.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;
}
普通的分頁(yè)
<ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul>
分頁(yè)的狀態(tài)-disabled active
<ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul>
分頁(yè)的大小-pagination-lg，pagination-sm
<ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a></li> </ul>
翻頁(yè)(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="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript高級(jí)定時(shí)器，針對(duì)javascript的代碼隊(duì)列進(jìn)行詳細(xì)解析，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript利用虛擬列表實(shí)現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時(shí)間分片的方式來(lái)對(duì)長(zhǎng)列表進(jìn)行渲染，但這種方式更適用于列表項(xiàng)的DOM結(jié)構(gòu)十分簡(jiǎn)單的情況，所以本文來(lái)講講如何使用虛擬列表的方式，來(lái)同時(shí)加載大量數(shù)據(jù)吧2023-05-05
這篇文章主要給大家介紹了關(guān)于echart中tooltip自動(dòng)展示的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù),提供直觀，生動(dòng),可交互,可個(gè)性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下2023-09-09
javascript基礎(chǔ)練習(xí)之翻轉(zhuǎn)字符串與回文
最近在學(xué)習(xí)的時(shí)候到了基礎(chǔ)算法這一章節(jié)，讓我對(duì)js內(nèi)置對(duì)象方法的掌握還有思維邏輯都得到了提升，所借此機(jī)會(huì)來(lái)寫(xiě)一寫(xiě)學(xué)習(xí)心得和總結(jié)。下面這篇文章主要介紹了利用javascript實(shí)現(xiàn)翻轉(zhuǎn)字符串與回文的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
JS動(dòng)畫(huà)實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解
這篇文章主要介紹了JS動(dòng)畫(huà)實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解,需要的朋友可以參考下2018-11-11
jQuery Mobile動(dòng)態(tài)刷新頁(yè)面樣式的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery Mobile動(dòng)態(tài)刷新頁(yè)面樣式的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
最近華為鴻蒙OS 2.0正式開(kāi)源！關(guān)于鴻蒙的教程其實(shí)網(wǎng)上也已經(jīng)有一些嘗鮮的小伙伴分享了相關(guān)文章，這篇文章主要為大家詳細(xì)介紹了鴻蒙系統(tǒng)中的 JS 開(kāi)發(fā)框架，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
一文快速弄懂webpack動(dòng)態(tài)import原理
無(wú)論你開(kāi)發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來(lái)管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動(dòng)態(tài)import原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
JavaScript實(shí)現(xiàn)計(jì)算圓周率到小數(shù)點(diǎn)后100位的方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算圓周率到小數(shù)點(diǎn)后100位的方法,簡(jiǎn)單分析了圓周率計(jì)算的原理并結(jié)合實(shí)例形式給出了javascript計(jì)算圓周率的具體操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了js驗(yàn)證賬戶(hù)名是否重復(fù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05