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>