boots分页导航

最新推荐文章于 2025-08-12 13:45:23 发布

转载最新推荐文章于 2025-08-12 13:45:23 发布 · 465 阅读

文章标签：

#javascript #ViewUI

bootstrap 专栏收录该内容

10 篇文章

订阅专栏

（1）带页码的导航

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分页导航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代码-->
<ul class="pagination pagination-lg">
  <li><a href="#">«第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页»</a></li>
</ul> 
  
<ul class="pagination pagination">
  <li><a href="#">«第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页»</a></li>
</ul>   
<ul class="pagination pagination-sm">
  <li><a href="#">«第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页»</a></li>
</ul>   

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

（2）翻页的导航

1.实现

添加pager即可

2.扩展

默认的会居中，但是有时候我们希望一个在左边，一个在右边。那么使用

☑ previous：让“上一步”按钮居左

☑ next：让“下一步”按钮居右

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分页导航（翻页分页导航）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代码-->
<ul class="pager">
  <li><a href="#">«上一页</a></li>
  <li><a href="#">下一页»</a></li>
</ul> 
<!--左右对齐-->
<ul class="pager">
  <li class="previous"><a href="#">«上一页</a></li>
  <li class="next"><a href="#">下一页»</a></li>
</ul> 
<!--禁止状态-->
<ul class="pager">
  <li class="disabled"><span>«上一页</span></li>
  <li><a href="#">下一页»</a></li>
</ul>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>