Bootstrap 分页
最后更新于：2022-03-26 23:04:57
Bootstrap 分页
简介
在本教程中，我们将看到如何使用 Bootstrap 创建分页。
多页的分页
如果您想要为您的在线应用程序或者网站或 app 的搜索结果创建分页，您可以使用这种类型的分页。
bootstrap.css 的 CSS class "pagination"，位于行号 2756 到 1814 保存了创建这种类型的分页的样式。
另外两个 CSS classes "disabled" 和 "active" 可用于定制分页中的链接是可点击的还是不可点击的。行号 2793 到 2797 保存了用于分页的 class "disabled" 及其他一些 class 的样式。行号 2786 到 2792 保存了用于分页的 "active" class 的样式。
为了设置分页链接的对齐方式，请使用 "pagination-centered" 和 "pagination-right" CSS class。这两个 class 是位于 bootstrap.css 的 行号 2809 到 2814（版本 2.0.1）。
多页分页实例
实例
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bootstrap 多页分页实例</title>
<meta name=”description” content=”Twitter Bootstrap Multicon-page pagination example”>
<link href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
margin: 50px;
}
</style>
</head>
<body>
<div class=”pagination”>
<ul>
<li><a href=”#”>Prev</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=”#”>Next</a></li>
</ul>
</div>
</body>
</html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bootstrap 多页分页实例</title>
<meta name=”description” content=”Twitter Bootstrap Multicon-page pagination example”>
<link href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
margin: 50px;
}
</style>
</head>
<body>
<div class=”pagination”>
<ul>
<li><a href=”#”>Prev</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=”#”>Next</a></li>
</ul>
</div>
</body>
</html>
请注意，向 body 元素添加边距的额外样式只是为了实例演示。
翻页
有时候，您可能需要本教程第一部分提到的第一种类型的分页。但是，有的时候，您可能只需要类似 next/previous 或者 old/new 这样的简单的链接提供给用户进行导航。这可通过翻页来实现。
"pager" CSS class 是位于 bootstrap.css 中的 行号 2815 到 2850（版本 2.0.1）。在这里，您可以应用 "disabled" CSS class 让链接不可点击。
带有 next 和 previous 的翻页实例
实例
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bootstrap 带有 next 和 previous 的翻页实例</title>
<meta name=”description” content=”Twitter Bootstrap pager with next and previous example”>
<link href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class=”pager”>
<li>
<a href=”#”>Previous</a>
</li>
<li>
<a href=”#”>Next</a>
</li>
</ul>
</body>
</html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bootstrap 带有 next 和 previous 的翻页实例</title>
<meta name=”description” content=”Twitter Bootstrap pager with next and previous example”>
<link href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class=”pager”>
<li>
<a href=”#”>Previous</a>
</li>
<li>
<a href=”#”>Next</a>
</li>
</ul>
</body>
</html>
带有 old 和 new 的翻页实例
实例
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bootstrap带有 old 和 new 的翻页实例</title>
<meta name=”description” content=”Twitter Bootstrap pager with older and newer example”>
<link href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class=”pager”>
<li class=”previous”>
<a href=”#”>← Older</a>
</li>
<li class=”next”>
<a href=”#”>Newer →</a>
</li>
</ul>
</body>
</html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bootstrap带有 old 和 new 的翻页实例</title>
<meta name=”description” content=”Twitter Bootstrap pager with older and newer example”>
<link href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class=”pager”>
<li class=”previous”>
<a href=”#”>← Older</a>
</li>
<li class=”next”>
<a href=”#”>Newer →</a>
</li>
</ul>
</body>
</html>