Bootstrap 组件：分页组件的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事

给网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

默认分页样式

注意：

标记分页组件。分页组件应该包装在nav元素中，以将其标识为屏幕阅读器和其他辅助技术的导航部分。此外，由于一个页面可能已经有多个这样的导航部分（例如标题中的主导航或侧栏导航），建议为nav提供一个描述性的aria标签，以说明它的用途。例如，如果分页组件用于在一组搜索结果之间导航，则适当的标签可以是aria-label=“search results pages”。

<nav aria-label="Page navigation">
          <ul class="pagination">
        <li>
            <a href="##" aria-label="Previous"><span aria-hidden="true">&laquo;</span></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="##">6</a></li>
        <li>
            <a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
    </ul>
</nav>

1. 禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加.disabled类、给当前页添加.active类。

<nav aria-label="Page navigation">
          <ul class="pagination">
        <li>
            <a href="##" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
        </li>
        <li><a href="##">1</a></li>
        <li  class="disabled"><a href="##">2</a></li>
        <li  class="active"><a href="##">3</a></li>
        <li><a href="##">4</a></li>
        <li><a href="##">5</a></li>
        <li><a href="##">6</a></li>
        <li>
            <a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
    </ul>
</nav>

2. 尺寸

如果想要更小或更大的分页，.pagination-lg或.pagination-sm类提供了额外可供选择的尺寸。

<nav aria-label="Page navigation">
          <ul class="pagination pagination-lg">
        <li>
            <a href="##" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
        </li>
        <li><a href="##">1</a></li>
        <li  class="disabled"><a href="##">2</a></li>
        <li  class="active"><a href="##">3</a></li>
        <li><a href="##">4</a></li>
        <li><a href="##">5</a></li>
        <li><a href="##">6</a></li>
        <li>
            <a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
    </ul>
</nav>
<nav aria-label="Page navigation">
          <ul class="pagination">
        <li>
            <a href="##" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
        </li>
        <li><a href="##">1</a></li>
        <li  class="disabled"><a href="##">2</a></li>
        <li  class="active"><a href="##">3</a></li>
        <li><a href="##">4</a></li>
        <li><a href="##">5</a></li>
        <li><a href="##">6</a></li>
        <li>
            <a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
    </ul>
</nav>
<nav aria-label="Page navigation">
          <ul class="pagination pagination-sm">
        <li>
            <a href="##" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
        </li>
        <li><a href="##">1</a></li>
        <li  class="disabled"><a href="##">2</a></li>
        <li  class="active"><a href="##">3</a></li>
        <li><a href="##">4</a></li>
        <li><a href="##">5</a></li>
        <li><a href="##">6</a></li>
        <li>
            <a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
    </ul>
</nav>

翻页

用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

1. 默认实例

在默认的翻页中，链接居中对齐。

<nav aria-label="...">
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="##">4</a></li>
        <li><a href="##">5</a></li>
        <li><a href="##">6</a></li>
        <li><a href="#">下一页</a></li>
     </ul>
</nav>

2. 左右两端对齐链接

左右两端对齐链接可使用 .previous(左对齐)和 .next（右对齐）

<nav aria-label="...">
    <ul class="pager">
        <li class="previous"><a href="#">上一页</a></li>
        <li><a href="##">4</a></li>
        <li><a href="##">5</a></li>
        <li><a href="##">6</a></li>
        <li class="next"><a href="#">下一页</a></li>
     </ul>
</nav>

3. 可选的禁用状态

.disabled类也可用于翻页中的链接让元素处于禁用状态，只需在需要禁用的元素上添加类.disabled，链接就会呈现为灰色且没有鼠标悬停效果。

就先分享到这里!! :smile: 后续继续更新!!