分页

分页（Pagination），是一种无序列表，Bootstrap像处理其他界面元素一样处理分页。

分页（Pagination）

Class 描述
.pagination 添加该class 来在页面上显示分页
.disabled，
.active		 可以定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面
.pagination-lg，
。pagination-sm		 使用这些class来获取不同大小的项。

默认的分页

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

分页的大小

<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><br>
<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><br>
<ul class="pagination pagination-sm">
    <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）

想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一个样，翻页也是无序列表。默认情况下，链接是居中显示。

Class 描述
.pager 添加该class来获得翻页链接
.previous，
.next		 使用class .previous把链接向左对齐，使用.next把链接向右对齐
disabled 添加该class来获得一个颜色变淡的外观。

默认的翻页

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

翻页的状态

<ul class="pager">
    <li class="previous disabled"><a href="#">← Older</a></li>
    <li class="next"><a href="#">Newer →</a></li>
</ul>
打赏
Post Views: 855