幾乎所有網站內容都需要分頁顯示,一個用戶體驗良好的分頁組件會得到訪問用戶的良好評價。
//源碼.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="#">«</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>
分頁的狀態-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>
分頁的大小-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>
翻頁(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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
