首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > Bootstrap教程

bootstrap分页怎么实现的

(*-*)浩
(*-*)浩 原创
2019-07-19 09:54:17 1787浏览

任何一个网页里面, 我们都可以看到分页, 不管是移动端, 还是pc端, 不管是下拉到下一页, 还是按钮下一页, 都需要分页支撑你的网站. 这样首先, 可以提高你的网站的访问效率. 另外页面展现也更加好看, 要不然, 上百万的上千万的数据. 显示估计一两个小时也显示不出来效果.

怎么使用bootstrap实现分页呢?（推荐学习：Bootstrap视频教程）

在bootstrap中分页有两种, 一种是正常的分页, 第二种是翻页. 就是有上一页和下一页的显示效果.

分页: 带有页面的效果, 这里你里面可以随你的网站怎么定义都可以, 比方说. 里面不是文字, 而是一些图标,一样可以. 只不过数字能够更好的看效果. 使用样式: .pagination

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。

带有上一项和下一项的翻页效果, 最简单的方式. 样式.pager

（Pager）翻页，如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。

两种方法的实现, 都是需要使用ul标签, 链接是使用a. 还有一些状态, 比方说, 我选中了某一项. 其中的某一项静止使用.

分页实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的分页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
	<li><a href="//m.sbmmt.com/m/faq/#">&laquo;</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">1</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">2</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">3</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">4</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">5</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">&raquo;</a></li>
</ul>

</body>
</html>

翻页实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的翻页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
	<li><a href="//m.sbmmt.com/m/faq/#">Previous</a></li>
	<li><a href="//m.sbmmt.com/m/faq/#">Next</a></li>
</ul>

</body>
</html>

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

以上就是bootstrap分页怎么实现的的详细内容，更多请关注php中文网其它相关文章！

bootstrapPHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：bootstrap如何让div居右 下一条：bootstrap为什么弹出框没有内容

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！