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