Bootstrap 翻页按钮

什么是翻页?

翻页也是分页的一种形式(如前一章所述)。

要创建 上一页/下一页 按钮, 可以给 <ul> 元素 添加 .pager 样式:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h2>Pager</h2>
  12. <p>.pager 样式提供上一页或下一页按钮 (链接):</p>
  13. <ul class="pager">
  14. <li><a href="#">上一页</a></li>
  15. <li><a href="#">下一页</a></li>
  16. </ul>
  17. </div>
  18. </body>
  19. </html>
结果:



两端的翻页按钮

使用 .previous.next 样式类来创建每个与页面两侧对齐的翻页按钮:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h2>翻页</h2>
  12. <p>使用 .previous 与 .next 样式类来创建每个与页面两侧对齐的翻页按钮:</p>
  13. <ul class="pager">
  14. <li class="previous"><a href="#">上一页</a></li>
  15. <li class="next"><a href="#">下一页</a></li>
  16. </ul>
  17. </div>
  18. </body>
  19. </html>
结果:



完整的 Bootstrap 导航参考

有关所有导航类的完整参考,请访问本站的完整 Bootstrap 导航参考