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>

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