boots分页导航

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章