欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

【Bootstrap】014

2025-07-27 15:08:14
【Bootstrap】014 一、分页1、概述为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件；2、默认分页代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ht

【Bootstrap】014

一、分页

1、概述

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件；

2、默认分页

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<nav aria-label="Page navigation">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#"></a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="ext">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
	</body>
</html>
运行结果：
备注：

、禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<nav aria-label="...">
			<ul class="pagination">
				<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
				<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
				<li><a href="#">2</a></li>
				<li><a href="#"></a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#" aria-label="ext"><span aria-hidden="true">»</span></a></li>
			</ul>
		</nav>
	</body>
</html>
运行结果：

我们建议将 active 或 disabled 状态的链接（即 <a> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击；

代码语言：javascript代码运行次数：0运行复制
<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

4、尺寸

想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="bs-example" data-example-id="pagination-sizing">
		    <nav aria-label="...">
		      <ul class="pagination pagination-lg">
		        <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
		        <li><a href="#">1</a></li>
		        <li><a href="#">2</a></li>
		        <li><a href="#"></a></li>
		        <li><a href="#">4</a></li>
		        <li><a href="#">5</a></li>
		        <li><a href="#" aria-label="ext"><span aria-hidden="true">»</span></a></li>
		      </ul>
		    </nav>
		    <nav aria-label="...">
		      <ul class="pagination">
		        <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
		        <li><a href="#">1</a></li>
		        <li><a href="#">2</a></li>
		        <li><a href="#"></a></li>
		        <li><a href="#">4</a></li>
		        <li><a href="#">5</a></li>
		        <li><a href="#" aria-label="ext"><span aria-hidden="true">»</span></a></li>
		      </ul>
		    </nav>
		    <nav aria-label="...">
		      <ul class="pagination pagination-sm">
		        <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
		        <li><a href="#">1</a></li>
		        <li><a href="#">2</a></li>
		        <li><a href="#"></a></li>
		        <li><a href="#">4</a></li>
		        <li><a href="#">5</a></li>
		        <li><a href="#" aria-label="ext"><span aria-hidden="true">»</span></a></li>
		      </ul>
		    </nav>
		  </div>
	</body>
</html>
运行结果：

5、翻页

用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了；

默认实例：

在默认的翻页中，链接居中对齐；

代码演示：

代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<nav aria-label="...">
		  <ul class="pager">
		    <li><a href="#">上一页</a></li>
		    <li><a href="#">下一页</a></li>
		  </ul>
		</nav>
	</body>
</html>

运行结果：

对齐链接：

你还可以把链接向两端对齐；

代码演示：

代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<nav aria-label="...">
			<ul class="pager">
				<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
				<li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
			</ul>
		</nav>
	</body>
</html>

运行结果：

可选的禁用状态：

.disabled 类也可用于翻页中的链接；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<nav aria-label="...">
		  <ul class="pager">
		    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
		    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
		  </ul>
		</nav>
	</body>
</html>
运行结果：
二、标签

1、实例

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<h>Example heading <span class="label label-default">ew</span></h>
	</body>
</html>
运行结果：

2、可用的变体

用下面的任何一个类即可改变标签的外观；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<span class="label label-default">默认</span>
		<span class="label label-primary">首选项</span>
		<span class="label label-success">成功</span>
		<span class="label label-info">信息</span>
		<span class="label label-warning">警告</span>
		<span class="label label-danger">危险</span>
	</body>
</html>
运行结果：
备注：
三、徽章

1、实例

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div>
			<a href="#">Inbox <span class="badge">42</span></a>
			<br><br>
			<button class="btn btn-primary" type="button">
				Messages <span class="badge">4</span>
			</button>
		</div>
	</body>
</html>
运行结果：

2、自我崩溃

如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现) ；

、适配导航元素的激活状态

Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<ul class="nav nav-pills" role="tablist">
			<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages <span class="badge"></span></a></li>
		</ul>
	</body>
</html>
运行结果：
四、巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="bs-example" data-example-id="simple-jumbotron">
		    <div class="jumbotron">
		      <h1>Hello, world!</h1>
		      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
		      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
		    </div>
		  </div>
	</body>
</html>
运行结果：
备注：

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素；

代码语言：javascript代码运行次数：0运行复制
<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>
五、页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="page-header">
		  <h1>Example page header <small>Subtext for header</small></h1>
		</div>
	</body>
</html>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除hrefmeta分页标签bootstrap

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1198408.html

相关标签：无
上传时间： 2025-07-23 11:39:41

上一篇：【Bootstrap】015

下一篇：【Bootstrap】013

推荐阅读

留言与评论（共有 10 条评论）
注册新账号 登录
本站网友 徐家汇美罗城
2分钟前 发表
initial-scale=1"> <!-- 上述个meta标签*必须*放在最前面
本站网友 换挡拨片
4分钟前 发表
需要引入js --> <script src="../js/js"></script> <script src="../js/js"></script> </head> <body> <div> <a href="#">Inbox <span class="badge">42</span></a> <br><br> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> </div> </body> </html>运行结果：2
本站网友 oga
22分钟前 发表
任何其他内容都*必须*跟随其后！ --> <title></title> <!-- 引入bootstrap --> <link rel="stylesheet" href="../css/" /> <!-- 要想实现点击效果
本站网友 碧生源广告
5分钟前 发表
initial-scale=1"> <!-- 上述个meta标签*必须*放在最前面
本站网友 多维肾宝
26分钟前 发表
自我崩溃如果没有新的或未读的信息条目
本站网友 卢龙房屋出租
9分钟前 发表
任何其他内容都*必须*跟随其后！ --> <title></title> <!-- 引入bootstrap --> <link rel="stylesheet" href="../css/" /> <!-- 要想实现点击效果
本站网友 强生泰诺
30分钟前 发表
页头页头组件能够为 h1 标签增加适当的空间
本站网友 zhineng
10分钟前 发表
它能延伸至整个浏览器视口来展示网站上的关键内容；代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友 蒋洪伟
1分钟前 发表
initial-scale=1"> <!-- 上述个meta标签*必须*放在最前面