bootstrap分页pagination bootstrap分页|Bootstrap教程

本文概述

Bootstrap分页示例

分页用于以有组织的方式对网站的网页进行排序。如果你的网站上有很多网页，则变得非常有必要。
以下是Bootstrap提供的用于处理分页的类的列表。

类	描述
.pagination	添加此类以在页面上获得分页。
.disabled, .active	你可以使用.disabled表示不可点击的链接, 并使用.active表示当前页面来自定义链接。
.pagination-lg, .pagination-sm	使用这些类来获取不同大小的项目。

Bootstrap分页示例【bootstrap分页pagination】将.pagination类添加到< ul> 元素以创建基本的分页。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>A basic pagination example:< /h2> < p>The .pagination class provides pagination links:< /p> < ul class="pagination"> < li>< a href="http://www.srcmini.com/#">1< /a>< /li> < li>< a href="http://www.srcmini.com/#">2< /a>< /li> < li>< a href="http://www.srcmini.com/#">3< /a>< /li> < li>< a href="http://www.srcmini.com/#">4< /a>< /li> < li>< a href="http://www.srcmini.com/#">5< /a>< /li> < /ul> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155FA5V-1.jpg">< /script>< /body> < /html>

Boostrap活动状态
活动状态指定了用户处于活动状态的当前页面。
.active类用于指定活动状态。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Active State Pagination: Example< /h2> < p>Specify the current active state of the user.< /p> < ul class="pagination"> < li>< a href="http://www.srcmini.com/#">1< /a>< /li> < li class="active">< a href="http://www.srcmini.com/#">2< /a>< /li> < li>< a href="http://www.srcmini.com/#">3< /a>< /li> < li>< a href="http://www.srcmini.com/#">4< /a>< /li> < li>< a href="http://www.srcmini.com/#">5< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155FA5V-1.jpg">< /script>< /body> < /html>

Boostrap程序禁用状态
禁用状态指定你不能单击链接。
添加类.disabled以禁用不需要更多的链接。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Disabled State Pagination Example:< /h2> < p>Here, 4 and 5 links are disabled.< /p> < ul class="pagination"> < li>< a href="http://www.srcmini.com/#">1< /a>< /li> < li>< a href="http://www.srcmini.com/#">2< /a>< /li> < li>< a href="http://www.srcmini.com/#">3< /a>< /li> < li class="disabled">< a href="http://www.srcmini.com/#">4< /a>< /li> < li>< a href="http://www.srcmini.com/#">5< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155FA5V-1.jpg">< /script>< /body> < /html>

自举分页大小
你也可以相应地增大或减小分页块的大小。
为大块添加.pagination-lg类，为小块添加.pagination-sm类。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Pagination - Sizing< /h2> < p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:< /p> < ul class="pagination pagination-lg"> < li>< a href="http://www.srcmini.com/#">1< /a>< /li> < li>< a href="http://www.srcmini.com/#">2< /a>< /li> < li>< a href="http://www.srcmini.com/#">3< /a>< /li> < li>< a href="http://www.srcmini.com/#">4< /a>< /li> < li>< a href="http://www.srcmini.com/#">5< /a>< /li> < /ul>< ul class="pagination pagination-sm"> < li>< a href="http://www.srcmini.com/#">1< /a>< /li> < li>< a href="http://www.srcmini.com/#">2< /a>< /li> < li>< a href="http://www.srcmini.com/#">3< /a>< /li> < li>< a href="http://www.srcmini.com/#">4< /a>< /li> < li>< a href="http://www.srcmini.com/#">5< /a>< /li> < /ul> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155FA5V-1.jpg">< /script>< /body> < /html>

Boostrap面包屑
这是分页的另一种形式。它指示当前页面在导航层次结构中的位置。
.breadcrumb类用于创建面包屑。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Breadcrumbs Example:< /h2> < p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:< /p> < ul class="breadcrumb"> < li>< a href="http://www.srcmini.com/#">Java< /a>< /li> < li>< a href="http://www.srcmini.com/#">SQL< /a>< /li> < li>< a href="http://www.srcmini.com/#">Php< /a>< /li> < li class="active">.Net< /li> < /ul> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155FA5V-1.jpg">< /script>< /body> < /html>