BootStrap--CSS組件--分頁(pagination)和翻頁(pager)

幾乎所有網站內容都需要分頁顯示,一個使用者體驗良好的分頁組件會得到訪問使用者的良好評價。

//源碼.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>

分頁的狀態-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>