本文摘自PHP中文网,作者(*-*)浩,侵删。
任何一个网页里面, 我们都可以看到分页, 不管是移动端, 还是pc端, 不管是下拉到下一页, 还是按钮下一页, 都需要分页支撑你的网站. 这样首先, 可以提高你的网站的访问效率. 另外页面展现也更加好看, 要不然, 上百万的上千万的数据. 显示估计一两个小时也显示不出来效果. 怎么使用bootstrap实现分页呢?(推荐学习:Bootstrap视频教程)
在bootstrap中分页有两种, 一种是正常的分页, 第二种是翻页. 就是有上一页和下一页的显示效果.
分页: 带有页面的效果, 这里你里面可以随你的网站怎么定义都可以, 比方说. 里面不是文字, 而是一些图标,一样可以. 只不过数字能够更好的看效果. 使用样式: .pagination
分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。
带有上一项和下一项的翻页效果, 最简单的方式. 样式.pager
(Pager)翻页,如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。
两种方法的实现, 都是需要使用ul标签, 链接是使用a. 还有一些状态, 比方说, 我选中了某一项. 其中的某一项静止使用.
分页实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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= "#" >«</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= "#" >»</a></li>
</ul>
</body>
</html>
|
翻页实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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= "#" >Previous</a></li>
<li><a href= "#" >Next</a></li>
</ul>
</body>
</html>
|
更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!
以上就是bootstrap分页怎么实现的的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap前端视图中如何实现页面内容模块化的隔离
bootstrap主要是什么
bootstrap模态框有哪些
bootstrap是响应式的吗
bootstrap input样式修改的方法
bootstrap的好处
bootstrap特点是什么意思
为什么使用bootstrap
bootstrap怎么适配
bootstrap模态框如何提交表单
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap分页怎么实现的