开发者社区> 技术小美> 正文

bootstrap-分页-默认分页

2017-11-12 964

简介：
+关注继续查看

说明

默认分页

示例

<!DOCTYPE html>
<html lang="zh-CN">
  	<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>Bootstrap 101 Template</title>

    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
  	</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>

    	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	<!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	</body>
</html>

输出

wKiom1ijz9ewLsBfAAAIAi4iBh8346.png-wh_50


本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1897985


版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

JavaScript 前端开发
Bootstrap分页
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
oracle之 变更OS时间对数据库的影响 8763 Bash编程（二） 2148 2013-7-17学习作业练习 2368 开机进入windows时自动打开‘我的文档’ 1900 Notes Directory inaccessible 2378
相关文章
编程小石头
springboot+freemarker+bootstrap快速实现分页功能(含java源码)
springboot+freemarker+bootstrap快速实现分页功能(含java源码)
13 0
AIEarth
地图集web项目_技术学习（二）_bootstrap分页的例子
地图集web项目_技术学习（二）_bootstrap分页的例子
59 0
pffkzc2qcmn6c
datatables+springmvc+bootstrap实现分页
datatables+springmvc+bootstrap实现分页
88 0
程序员大阳
Bootstrap教程(17)--分页
本文目录 1. 概述 2. 基本分页 3. 使用转义字符 4. 调整分页控件大小 5. 设置分页按钮状态 6. 小结
85 0
珲yy少
Bootstrap响应式前端框架笔记十一——分页与标签
Bootstrap响应式前端框架笔记十一——分页与标签
136 0
olv123
Bootstrap Paginator分页插件使用
Bootstrap Paginator 分页插件的实现
19949 0
javaedge
Spring Data JPA踩坑记:与Bootstrap Table的分页协作
@PersistenceContext和@Resource的区别 @PersistenceContext private EntityManager em; 注入的是实体管理器，执行持久化操作的，需要配置文件persistence.xml。
1593 0
codingcoge
Bootstrap学习笔记--进度条，分页，Pager，列表，面板
进度条： 注意： Internet Explorer 9及更早版本不支持进度条（因为它们使用CSS3转换和 动画来实现其某些效果） 默认的进度条： 创建一个基本的进度条的步骤如下： 添加一个带有 class .progress 的 。
1057 0
walb呀
基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
2353 0
walb呀
基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
1685 0
+关注
技术小美
文章
问答
视频
作者高分内容
更多
oracle之 变更OS时间对数据库的影响 8763 Bash编程（二） 2148 2013-7-17学习作业练习 2368 开机进入windows时自动打开‘我的文档’ 1900 Notes Directory inaccessible 2378
文章排行榜
最热
最新
1 C++ STL容器和算法：详解和实例演示 38530
2 Go 方法接收器：选择值接收器还是指针接收器？ 37269
3 干掉 “重复代码”，这三种方式绝了！ 35678
4 万能架构设计：ES+Redis+MySQL，这套组合可应对80%业务场景（2） 30411
5 使用篇丨链路追踪（Tracing）很简单：链路拓扑 29670
6 如何提高光伏发电效能异常检出效率的实践案例 27386
7 日志服务 SLS 和开源 ELK 全面对比 27248
8 阿里云蔡英华：Landing Zone助力生态伙伴成为企业云治理服务专家 24752
9 如何画好一张架构图？（3） 21974
10 高性能的本地缓存方案选型，看这篇就够了！ 20713
11 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 14568
12 实践教程之体验PolarDB-X分布式事务和数据分区 9593
13 Python3，自从掌握了这个方法，再也不用print进行调试了。 13308
14 如何解决IoT数据入仓的客户实践 7869
15 现场直击：2023阿里云峰会精彩发布抢先看（内含福利） 333466
16 大数据&AI产品月刊【2023年4月】 4625
17 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 54607
18 编程中最难的就是命名？这几招教你快速上手 32028
19 阿里云联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 50020
20 除了价格降70%，关于对象存储预留空间你还需要了解这些 31586
1 专业的知识图谱应用门槛正在被不断降低 1503
2 Flink CEP 在抖音电商的业务实践｜电商行业实践专栏上线 76
3 云效BizDevOps上手亲测 535
4 Telnet 基础实验2： SSH 实验 69
5 DTS链路内ETL使用手册 5309
6 使用内置zookeeper搭建Hbase集群 67
7 Java安全之Velocity模板注入漏洞 78
8 Zookeeper伪集群模式配置 8661
9 Java安全之Thymeleaf模板注入漏洞 69
10 龙蜥白皮书精选：开源 RISC-V 技术支持软硬件全栈平台 492
11 Java审计之Freemarker模板注入漏洞 8644
12 运维面试题库之K8s 56
13 Linux基础IO【重定向及缓冲区理解】 8624
14 运维面试题库之Redis 8469
15 C语言初阶——循环语句（while，for，do while） 8796
16 linux下如何使用logrotate进行日志的切分 8514
17 Telnet 基础实验1： Telnet 实验 8640
18 【postgreSQL】psql工具特有的快捷命令 8577
19 Git入门指南：从新手到高手的完全指南 8530
20 业务架构的救世主是 MVI（一） 8638
相关课程
更多
前端开发框架Bootstrap使用教程
18766
34
去学习
推荐文章
现场直击：2023阿里云峰会精彩发布抢先看 AIGC主题征文开启，参与赢取富士拍立得 乘风伯乐招募令，邀请伯乐获取多重好礼！ 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载