Bootstrap组件 - 分页

知识点

默认分页

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

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

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

也可以使其两端对齐:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
  </ul>
</nav>

实践

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组件-导航</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line {border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <!--默认分页-->
    <!--禁用:disabled;激活:active-->
    <nav aria-label="Page navigation"><!--aria-label 帮助阅读-->
        <ul class="pagination">
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></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><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
        </ul>
    </nav>
    <div class="line"></div>
    <!--尺寸 .pagination-lg .pagination-sm-->
    <nav aria-label="Page navigation"><!--aria-label 帮助阅读-->
        <ul class="pagination pagination-lg">
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></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><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
        </ul>
    </nav>
    <div class="line"></div>
    <!--翻页-->
    <!--默认居中显示-->
    <nav aria-label="">
        <ul class="pager">
            <li><a href="#">pre</a></li>
            <li><a href="#">next</a></li>
        </ul>
    </nav>
    <!--使其两端对齐-->
    <nav aria-label="">
        <ul class="pager">
            <li class="previous"><a href="#">pre</a></li>
            <li class="next"><a href="#">next</a></li>
        </ul>
    </nav>
</div>

</body>
</html>

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 2,874评论 0 67
  • 特点 跨设备、跨浏览器 响应式布局 提供了全面的组件 内置jQuery插件 支持HTML5、CSS3 支持LESS...
    osoLife阅读 340评论 0 2
  • 一、字体图标 注意:想要使用字体图标,我们之前引用js和css所在文件夹一定要有fonts组件 想要使用字体图标,...
    21克风阅读 145评论 0 1
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    poetries阅读 4,342评论 0 40
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 7,941评论 3 183