知識(shí)點(diǎn)
默認(rèn)分頁(yè)
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">?</span>
</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="#" aria-label="Next">
<span aria-hidden="true">?</span>
</a>
</li>
</ul>
</nav>
鏈接在不同情況下可以定制。你可以給不能點(diǎn)擊的鏈接添加 .disabled 類、給當(dāng)前頁(yè)添加 .active 類。
翻頁(yè)
在默認(rèn)的翻頁(yè)中，鏈接居中對(duì)齊。
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
也可以使其兩端對(duì)齊：
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
實(shí)踐
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>組件-導(dǎo)航</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line {border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--默認(rèn)分頁(yè)-->
<!--禁用：disabled；激活：active-->
<nav aria-label="Page navigation"><!--aria-label 幫助閱讀-->
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">?</span></a></li>
<li class="active"><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="#" aria-label="Next"><span aria-hidden="true">?</span></a></li>
</ul>
</nav>
<div class="line"></div>
<!--尺寸 .pagination-lg .pagination-sm-->
<nav aria-label="Page navigation"><!--aria-label 幫助閱讀-->
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">?</span></a></li>
<li class="active"><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="#" aria-label="Next"><span aria-hidden="true">?</span></a></li>
</ul>
</nav>
<div class="line"></div>
<!--翻頁(yè)-->
<!--默認(rèn)居中顯示-->
<nav aria-label="">
<ul class="pager">
<li><a href="#">pre</a></li>
<li><a href="#">next</a></li>
</ul>
</nav>
<!--使其兩端對(duì)齊-->
<nav aria-label="">
<ul class="pager">
<li class="previous"><a href="#">pre</a></li>
<li class="next"><a href="#">next</a></li>
</ul>
</nav>
</div>
</body>
</html>
