分页
<ul class="pagination" id="pagination"> <li id="page1"><a href="#">1</a></li> <li id="page2"><a href="#">2</a></li> <li id="page3"><a href="#">3</a></li> </ul>
active 与 disabled 状态
<ul class="pagination" id="pagination"> <li id="page1"><a href="#">1</a></li> <li id="page2" class="active"><a href="#">2</a></li> <li id="page3" class="disabled"><a href="#">3</a></li> </ul>
面包屑
<ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Private</a></li> <li><a href="#">Pictures</a></li> <li class="active">Vacation</li> </ul>
翻页
<ul class="pager"> <li id="prePage"><a href="#">上一页</a></li> <li id="nextPage"><a href="#">下一页</a></li> </ul>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Pagination</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showPaginationTest', '#paginationTest');
showHTMLContent('#showBreadcrumbTest', '#breadcrumbTest');
showHTMLContent('#showPager', '#pager');
$(":radio[name='styleSize']").click(function() {
$("#pagination").attr("class", $(this).val());
showHTMLContent('#showPaginationTest', '#paginationTest');
});
$("#styleActive").click(function() {
if (this.checked) {
$("#page2").addClass("active");
} else {
$("#page2").removeClass("active");
}
showHTMLContent('#showPaginationTest', '#paginationTest');
});
$("#styleDisabled").click(function() {
if (this.checked) {
$("#page3").addClass("disabled");
} else {
$("#page3").removeClass("disabled");
}
showHTMLContent('#showPaginationTest', '#paginationTest');
});
$("#addPrevious").click(function() {
if (this.checked) {
$("#prePage").addClass("previous");
} else {
$("#prePage").removeClass("previous");
}
showHTMLContent('#showPager', '#pager');
});
$("#addNext").click(function() {
if (this.checked) {
$("#nextPage").addClass("next");
} else {
$("#nextPage").removeClass("next");
}
showHTMLContent('#showPager', '#pager');
});
});
</script>
</head>
<body>
<div class="container">
<h1>分页样式</h1>
<form role="form">
<div class="form-group">
<h3>大小</h3>
<input type="radio" name="styleSize" value="pagination" checked> pagination <br>
<input type="radio" name="styleSize" value="pagination pagination-lg"> pagination pagination-lg <br>
<input type="radio" name="styleSize" value="pagination pagination-sm"> pagination pagination-sm <br>
</div>
<div class="form-group">
<h3>状态</h3>
<input type="checkbox" id="styleActive" value="active"> Set page 2 active <br>
<input type="checkbox" id="styleDisabled" value="disabled"> Set page 3 disalbed <br>
<br>
</div>
</form>
<h2>代码</h2>
<pre id="showPaginationTest"></pre>
<h2>样式</h2>
<div id="paginationTest">
<ul class="pagination" id="pagination">
<li id="page1"><a href="#">1</a></li>
<li id="page2"><a href="#">2</a></li>
<li id="page3"><a href="#">3</a></li>
<li id="page4"><a href="#">4</a></li>
<li id="page5"><a href="#">5</a></li>
</ul>
</div>
<br><br>
<h1>面包屑</h1>
<h2>代码</h2>
<pre id="showBreadcrumbTest"></pre>
<h2>样式</h2>
<div id="breadcrumbTest">
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
</div>
<br><br>
<h1>翻页</h1>
<form role="form">
<div class="form-group">
<input type="checkbox" id="addPrevious"> Set "previous" class to 上一页 <br>
<input type="checkbox" id="addNext"> Set "next" class to 下一页 <br>
<br>
</div>
</form>
<h2>代码</h2>
<pre id="showPager"></pre>
<h2>样式</h2>
<div id="pager">
<ul class="pager">
<li id="prePage"><a href="#">上一页</a></li>
<li id="nextPage"><a href="#">下一页</a></li>
</ul>
</div>
<br><br>
</div>
</body>
</html>