Bootstrap 分頁(yè)

簡(jiǎn)介

在本教程中，我們將看到如何使用 Bootstrap 創(chuàng)建分頁(yè)。

多頁(yè)的分頁(yè)

如果您想要為您的在線應(yīng)用程序或者網(wǎng)站或 app 的搜索結(jié)果創(chuàng)建分頁(yè)，您可以使用這種類(lèi)型的分頁(yè)。

bootstrap.css 的 CSS class "pagination"，位于行號(hào) 2756 到 1814 保存了創(chuàng)建這種類(lèi)型的分頁(yè)的樣式。

另外兩個(gè) CSS classes "disabled" 和 "active" 可用于定制分頁(yè)中的鏈接是可點(diǎn)擊的還是不可點(diǎn)擊的。行號(hào) 2793 到 2797 保存了用于分頁(yè)的 class "disabled" 及其他一些 class 的樣式。行號(hào) 2786 到 2792 保存了用于分頁(yè)的 "active" class 的樣式。

為了設(shè)置分頁(yè)鏈接的對(duì)齊方式，請(qǐng)使用 "pagination-centered" 和 "pagination-right" CSS class。這兩個(gè) class 是位于 bootstrap.css 的 行號(hào) 2809 到 2814（版本 2.0.1）。

多頁(yè)分頁(yè)實(shí)例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Multicon-page pagination example</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>

請(qǐng)注意，向 body 元素添加邊距的額外樣式只是為了實(shí)例演示。

在線查看實(shí)例

翻頁(yè)

有時(shí)候，您可能需要本教程第一部分提到的第一種類(lèi)型的分頁(yè)。但是，有的時(shí)候，您可能只需要類(lèi)似 next/previous 或者 old/new 這樣的簡(jiǎn)單的鏈接提供給用戶進(jìn)行導(dǎo)航。這可通過(guò)翻頁(yè)來(lái)實(shí)現(xiàn)。

"pager" CSS class 是位于 bootstrap.css 中的 行號(hào) 2815 到 2850（版本 2.0.1）。在這里，您可以應(yīng)用 "disabled" CSS class 讓鏈接不可點(diǎn)擊。

帶有 next 和 previous 的翻頁(yè)實(shí)例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</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>

在線查看實(shí)例

帶有 old 和 new 的翻頁(yè)實(shí)例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with older and newer example</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>

在線查看實(shí)例

點(diǎn)擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。