如何使用Bootstrap实现分页及翻页
如何使用Bootstrap实现分页及翻页
浮云间浏览 2155回答 2
2回答
-
幕布斯7119047
在bootstrap中分页有两种, 一种是正常的分页, 第二种是翻页. 就是有上一页和下一页的显示效果.1.分页: 带有页面的效果, 这里你里面可以随你的网站怎么定义都可以, 比方说. 里面不是文字, 而是一些图标,一样可以. 只不过数字能够更好的看效果. 使用样式: .pagination2.带有上一项和下一项的翻页效果, 最简单的方式. 样式.pager两种方法的实现, 都是需要使用ul标签, 链接是使用a. 还有一些状态, 比方说, 我选中了某一项. 其中的某一项静止使用. -
慕田峪4524236
分页（Pagination）下表列出了 Bootstrap 提供的处理分页的 class。下面的实例演示了上表中所讨论的 class .pagination 的用法：默认的分页<!DOCTYPE html><html><head><title>Bootstrap 实例 - 默认的分页</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/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>结果如下所示：分页的状态下面的实例演示了上表中所讨论的 class .disabled、.active 的用法：<!DOCTYPE html><html><head><title>Bootstrap 实例 - 分页的状态</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><ul class="pagination"><li><a href="#">«</a></li><li class="active"><a href="#">1</a></li><li class="disabled"><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>结果如下所示：分页的大小下面的实例演示了上表中所讨论的 class .pagination-* 的用法：<!DOCTYPE html><html><head><title>Bootstrap 实例 - 分页的大小</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><ul class="pagination pagination-lg"><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><br><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><br><ul class="pagination pagination-sm"><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>结果如下所示：翻页（Pager）如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。默认的翻页下面的实例演示了上表中所讨论的 class .pager 的用法：<!DOCTYPE html><html><head><title>Bootstrap 实例 - 默认的翻页</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/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>结果如下所示：对齐的链接下面的实例演示了上表中所讨论的 class .previous、.next 的用法：<!DOCTYPE html><html><head><title>Bootstrap 实例 - 翻页中对齐的链接</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><ul class="pager"><li class="previous"><a href="#">← Older</a></li><li class="next"><a href="#">Newer →</a></li></ul></body></html>结果如下所示：翻页的状态下面的实例演示了上表中所讨论的 class .disabled 的用法：<!DOCTYPE html><html><head><title>Bootstrap 实例 - 翻页的状态</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><ul class="pager"><li class="previous disabled"><a href="#">← Older</a></li><li class="next"><a href="#">Newer →</a></li></ul></body></html>
随时随地看视频慕课网APP
Bootstrap