Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >【Bootstrap】014-组件：分页、标签、徽章、巨幕、页头

【Bootstrap】014-组件：分页、标签、徽章、巨幕、页头

作者头像
訾博ZiBo
发布于 2025-01-06 07:50:46
发布于 2025-01-06 07:50:46
249150
代码可运行
举报
文章被收录于专栏：全栈开发工程师全栈开发工程师
运行总次数：0
代码可运行
关联问题
换一批

一、分页

1、概述

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

2、默认分页

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
	</body>
</html>
运行结果：
备注：

3、禁用和激活状态

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

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
			</ul>
		</nav>
	</body>
</html>
运行结果：

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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="#">3</a></li>
		        <li><a href="#">4</a></li>
		        <li><a href="#">5</a></li>
		        <li><a href="#" aria-label="Next"><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="#">3</a></li>
		        <li><a href="#">4</a></li>
		        <li><a href="#">5</a></li>
		        <li><a href="#" aria-label="Next"><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="#">3</a></li>
		        <li><a href="#">4</a></li>
		        <li><a href="#">5</a></li>
		        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
		      </ul>
		    </nav>
		  </div>
	</body>
</html>
运行结果：

5、翻页

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

默认实例：

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

代码演示：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<h3>Example heading <span class="label label-default">New</span></h3>
	</body>
</html>
运行结果：

2、可用的变体

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

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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 选择符实现) ；

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

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

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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">3</span></a></li>
		</ul>
	</body>
</html>
运行结果：

四、巨幕

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

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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
运行
AI代码解释
复制
<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

五、页头

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

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.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.com 删除
href
meta
分页
标签
bootstrap

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

href
meta
分页
标签
bootstrap
评论
登录后参与评论
15 条评论
热度
最新
斌521回复田小波
感谢分享！可以参考你的写法，自己实现一个其他的语言的解析器
感谢分享！可以参考你的写法，自己实现一个其他的语言的解析器
11点赞举报
田小波回复斌521
?
?
回复回复点赞举报
不懂回复田小波
写的很详细，对JSON有了新的认识
写的很详细，对JSON有了新的认识
回复回复点赞举报
居倩回复田小波
很喜欢作者的文章，写的很详细，也学到了很多
很喜欢作者的文章，写的很详细，也学到了很多
11点赞举报
田小波回复居倩
谢谢阅读。但愿没有写错的地方，以免误导了你们
谢谢阅读。但愿没有写错的地方，以免误导了你们
回复回复点赞举报
二狗蛋丶回复田小波
哇，你真是我少见的有评必回的大佬了
哇，你真是我少见的有评必回的大佬了
11点赞举报
田小波回复二狗蛋丶
这就尴尬了，我不是大佬。
这就尴尬了，我不是大佬。
回复回复点赞举报
八月末回复田小波
感谢分享，赞一个
感谢分享，赞一个
11点赞举报
田小波回复八月末
谢谢阅读
谢谢阅读
回复回复点赞举报
Ice丶Wing回复田小波
这个可以做成应用，直接把json转换成文本吗？
这个可以做成应用，直接把json转换成文本吗？
33点赞举报
田小波回复Ice丶Wing
不太明白你的意思，json 本身就是使用文本存储数据了
不太明白你的意思，json 本身就是使用文本存储数据了
回复回复点赞举报
命中水ヽ回复田小波
可能是提取文本的内容？因为json不是有格式。提取出来再进行其他处理
可能是提取文本的内容？因为json不是有格式。提取出来再进行其他处理
回复回复点赞举报
查看全部3条回复
安妮angularJS回复田小波
json解析会用到正则匹配吗
json解析会用到正则匹配吗
11点赞举报
田小波回复安妮angularJS
据我所知不会用到，当然网上文章说正则可以匹配 JSON，但准确性我没验证。有兴趣的话，你可以自己上网查找资料验证一下
据我所知不会用到，当然网上文章说正则可以匹配 JSON，但准确性我没验证。有兴趣的话，你可以自己上网查找资料验证一下
回复回复点赞举报
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
2234
Go 开发者必备：Protocol Buffers 入门指南
1283
10分钟带你彻底搞懂分布式链路跟踪
806
多租户的 4 种常用方案
1672
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
1219
60页PPT全解：DeepSeek系列论文技术要点整理
2216
bootstrap
bootstrapcsshttps网络安全
花了一天时间学了下bootstrap入门，想必大家用css写前端页面的时候都很痛苦，bootstrap就是来解决这个问题的，它封装了css的很多样式，开发的时候直接拿来用就可以了，提高了开发效率
用户3112896
2019/09/26
3.5K0
bootstrap
【Bootstrap】013-组件：导航、导航条、路径导航
navbarbootstrapclasshrefmeta
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式；
訾博ZiBo
2025/01/06
2830
【Bootstrap】013-组件：导航、导航条、路径导航
bootstrap模态框之draggable拖拽移动
bootstrapjqueryhtml
引入jquery-ui.min.js，在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。
week
2018/08/24
3.2K0
bootstrap模态框之draggable拖拽移动
【Bootstrap】012-组件：按钮组、按钮式下拉菜单、输入框组
inputmetabootstrapbuttonclass
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为；
訾博ZiBo
2025/01/06
2660
【Bootstrap】012-组件：按钮组、按钮式下拉菜单、输入框组
基于maven+ssm的增删改查之带分页的显示员工相关信息（基于bootstrap）
bootstrapjava
启动服务器之后，会默认访问index.jsp，在index.jsp中会请求"/emps"，即EmployeeController.java中的getEmps方法：
西西嘛呦
2020/08/26
1.8K0
基于maven+ssm的增删改查之带分页的显示员工相关信息（基于bootstrap）
BootStrap的学习与使用
cssbootstrap腾讯云开发者社区
文章链接: http://silentcow.cn/2020/08/06/BootStrap/
Rochester
2020/09/01
1.5K0
【Bootstrap】017-组件：面板、嵌入内容、Well
scriptbootstrapclassmetapanel
虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件；
訾博ZiBo
2025/01/06
1020
【Bootstrap】017-组件：面板、嵌入内容、Well
bootstrap 面包屑 常用
htmlcssjqueryjavascript
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Home</li> </ol> </nav>
用户5760343
2019/07/05
7190
Python进阶31-Django 分页器
运维编程算法自动化djangoajax
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
1.6K0
Python进阶31-Django 分页器
【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单
dropdownhrefmetabootstrapclass
见https://v3.bootcss.com/components/#glyphicons
訾博ZiBo
2025/01/06
2180
【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单
BootStrap使用
bootstrap
BootStrap基本使用 图书管理系统界面 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书管理系统</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax
HammerZe
2022/03/25
7040
BootStrap使用
高阶应用-分页
countlistobjectrange异常
一、Paginator对象 创建对象 格式：Paginator(列表, 整数) 返回值：返回的分页对象 属性 count：对象总数 num_pages：页面总数 page_range： [1,2,3,4,5] 页码从1开始 方法 page(num) ：获得一个Page对象，如果提供的页码不存在会抛出"InvalidPage"异常 异常 InvalidPage：当向page()传递的是一个无效的页码时抛出 PageNotAnInteger：当向page()传递的不是一个
星哥玩云
2022/09/14
3860
【Bootstrap】016-组件：媒体对象、列表组
对象bootstrapclasslistmedia
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）；
訾博ZiBo
2025/01/06
610
【Bootstrap】016-组件：媒体对象、列表组
bootstrap框架基础知识点整理
容器
注意: 任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器
大忽悠爱学习
2021/11/15
4K0
JavaWeb——一文快速入门BootStrap（栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战）
cssbootstrapjar网站
BootStrap是一个前端开发的框架，Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Winter_world
2020/09/25
2.5K0
JavaWeb——一文快速入门BootStrap（栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战）
BootStrap文档
插件bootstrapclasshrefsrc
1. 概念： 一个前端开发的框架，Bootstrap，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
张哥编程
2024/12/13
1420
BootStrap文档
【Bootstrap】015-组件：缩略图、警告框、进度条
progressscriptwidthbootstrapclass
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容；
訾博ZiBo
2025/01/06
990
【Bootstrap】015-组件：缩略图、警告框、进度条
django list类型数据分页
pythonhtmldjango
有一个django项目，由于业务要求，自己构造了一个list数据类型。这是一个临时数据，不需要保存到表中，但是需要分页展示。
py3study
2020/04/21
8220
【Bootstrap】001-Bootstrap入门
插件入门响应式bootstrap布局
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷；
訾博ZiBo
2025/01/06
1670
【Bootstrap】001-Bootstrap入门
前端基础-Bootstrap
bootstrap布局插件响应式协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cwl_java
2019/12/11
1.5K0
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪多租户的 4 种常用方案亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？60页PPT全解：DeepSeek系列论文技术要点整理
相关讨论
Android：如何实现监视从右到左的滑动手势？nodejs能实现使用自己域名发邮件吗？TXLivePush如何实现自己采集数据然后推流？
相关课程
Java微信公众号在线学习平台搭建实践_《硅谷课堂》微信小程序应用实践_《锋运票务系统》
bootstrap
3.5K0
【Bootstrap】013-组件：导航、导航条、路径导航
2830
bootstrap模态框之draggable拖拽移动
3.2K0
【Bootstrap】012-组件：按钮组、按钮式下拉菜单、输入框组
2660
基于maven+ssm的增删改查之带分页的显示员工相关信息（基于bootstrap）
1.8K0
BootStrap的学习与使用
1.5K0
【Bootstrap】017-组件：面板、嵌入内容、Well
1020
bootstrap 面包屑 常用
7190
Python进阶31-Django 分页器
1.6K0
【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单
2180
BootStrap使用
7040
高阶应用-分页
3860
【Bootstrap】016-组件：媒体对象、列表组
610
bootstrap框架基础知识点整理
4K0
JavaWeb——一文快速入门BootStrap（栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战）
2.5K0
BootStrap文档
1420
【Bootstrap】015-组件：缩略图、警告框、进度条
990
django list类型数据分页
8220
【Bootstrap】001-Bootstrap入门
1670
前端基础-Bootstrap
1.5K0
相关推荐
bootstrap
更多 >
田小波0
LV.1
NULLNULL
文章
62
获赞
403
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
布驴子0
相关课程
一站式学习中心 >
Java
1924人在学
java
微信公众号在线学习平台搭建实践_《硅谷课堂》
385人在学
文件存储
云点播
CODING DevOps
微信小程序应用实践_《锋运票务系统》
320人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
15
19
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验