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

分页（Pagination）

下表列出了 Bootstrap 提供的处理分页的 class。

Class 描述 示例代码
.pagination 添加该 class 来在页面上显示分页。 
<ul class="pagination">

  <li><a href="#">&laquo;</a></li>

  <li><a href="#">1</a></li>

  .......

</ul>
.disabled, .active 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 
<ul class="pagination">

  <li class="disabled"><a href="#">&laquo;</a></li>

  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>

  .......

</ul>
.pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。 
<ul class="pagination pagination-lg">...</ul>

<ul class="pagination">...</ul>

<ul class="pagination pagination-sm">...</ul>

默认的分页

下面的实例演示了上表中所讨论的 class .pagination 的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 默认的分页</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

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

</body>

</html>

结果如下所示：

分页的状态

下面的实例演示了上表中所讨论的 class .disabled、.active 的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 分页的状态</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<ul class="pagination">

  <li><a href="#">&laquo;</a></li>

  <li class="active"><a href="#">1</a></li>

  <li class="disabled"><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>

</body>

</html>

结果如下所示：

分页的大小

下面的实例演示了上表中所讨论的 class .pagination-* 的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 分页的大小</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

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

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

<ul class="pagination pagination-sm">

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

</body>

</html>

结果如下所示：

翻页（Pager）

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

Class 描述 示例代码
.pager 添加该 class 来获得翻页链接。 
<ul class="pager">

  <li><a href="#">Previous</a></li>

  <li><a href="#">Next</a></li>

</ul>
.previous, .next 使用 class .previous 把链接向左对齐，使用 .next把链接向右对齐。 
<ul class="pager">

  <li class="previous"><a href="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</a></li>

</ul>
.disabled 添加该 class 来获得一个颜色变淡的外观。 
<ul class="pager">

  <li class="previous disabled"><a href="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</a></li>

</ul>

默认的翻页

下面的实例演示了上表中所讨论的 class .pager 的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 默认的翻页</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<ul class="pager">

  <li><a href="#">Previous</a></li>

  <li><a href="#">Next</a></li>

</ul>

</body>

</html>

结果如下所示：

对齐的链接

下面的实例演示了上表中所讨论的 class .previous、.next 的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 翻页中对齐的链接</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<ul class="pager">

  <li class="previous"><a href="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</a></li>

</ul>

</body>

</html>

结果如下所示：

翻页的状态

下面的实例演示了上表中所讨论的 class .disabled 的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 翻页的状态</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<ul class="pager">

  <li class="previous disabled"><a href="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</a></li>

</ul>

</body>

</html>

结果如下所示：

最新文章

  1. netty学习
  2. python rabbitmq
  3. 为什么移动Web应用程序很慢（译）
  4. Leetcode 之Convert Sorted List to Binary Search Tree（55）
  5. JS定时器实例解析
  6. POJ 1456 Supermarket
  7. 观察者模式 C++11
  8. [ An Ac a Day ^_^ ] hdu 2553 N皇后问题 搜索
  9. Java进程通讯
  10. MFC 中线程传递CString 是不安全的 转
  11. Github Page 绑定域名
  12. Matlab - 各种函数学习
  13. 数学建模-灰色预测模型GM(1,1)_MATLAB
  14. Ajax 的学习
  15. js代码执行过程
  16. HDFS恢复误删操作的方法
  17. SuperSlide轮播插件滚动高度或宽度不对的问题解决
  18. Introduction to the visual formatting model
  19. 算法笔记--KMP算法 &amp;&amp; EXKMP算法
  20. Codeforces758B Blown Garland 2017-01-20 10:19 87人阅读 评论(0) 收藏

热门文章

  1. goroutine
  2. Android 数据存储五种方式
  3. 冰球项目日志1-yjw
  4. Android之Activity状态的保存和恢复
  5. underscore源码解析 (转载)
  6. Java 中的 request 和response 区别
  7. 抓包工具--Fiddler及charles的使用
  8. 三、最小化的Spring XML配置
  9. HEAD FIRST HTML &amp; CSS学习笔记1
  10. SAP SE11 网格布局显示