Bootstrap 分页导航
默认分页
如果你有一个有很多页面的网站，你可能希望在每个页面上添加一些分页。
Bootstrap 中的默认分页如下所示:
要创建默认分页，只需要将 .pagination 样式添加到一个 <ul> 元素:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>分页</h2><p>.pagination 样式类提供分页链接:</p><ul class="pagination"><li><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="#">5</a></li></ul></div></body></html>
活动状态
活动状态显示当前页面的内容:
添加 .active 样式让用户知道他们当前在哪一页:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>分页 - 活动状态</h2><p>添加 .active 样式让用户知道他们当前在哪一页:</p><ul class="pagination"><li><a href="#">1</a></li><li class="active"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul></div></body></html>
禁用状态
一个禁用的链接是无法点击的:
如果因为某些原因需要禁用链接时，请添加 .disabled 样式类:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>分页 - 禁用状态</h2><p>如果因为某些原因需要禁用链接时，请添加 .disabled 类:</p><ul class="pagination"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li class="disabled"><a href="#">4</a></li><li><a href="#">5</a></li></ul></div></body></html>
分页导航的大小
分页导航也可以调整为更大或更小的尺寸:
添加 .pagination-lg 变得更大或者 .pagination-sm 变得更小:
实例
<!DOCTYPE html><html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>分页 - 大小</h2><p>添加 .pagination-lg 变得更大或者 .pagination-sm 变得更小</p><p>Large:</p><ul class="pagination pagination-lg"><li><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="#">5</a></li></ul><p>Default:</p><ul class="pagination pagination"><li><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="#">5</a></li></ul><p>Small:</p><ul class="pagination pagination-sm"><li><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="#">5</a></li></ul></div></body></html>
Breadcrumbs（面包屑导航）
分页的另外一种表单, 是 breadcrumbs（面包屑式）:
.breadcrumb 类指示当前页面在导航层次结构中的位置:
实例
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Breadcrumbs</h2><p>.breadcrumb 类指示当前页面在导航层次结构中的位置:</p><ul class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">个人信息</a></li><li><a href="#">图片</a></li><li class="active">假期</li></ul></div></body></html>
完整的 Bootstrap 导航参考
有关所有导航类的完整参考，请访问本站的完整 Bootstrap 导航参考。