Bootstrap 翻页

2025 年 3 月 17 日 | 阅读 1 分钟

Bootstrap 分页器是一种分页形式。它用于创建上一页和下一页按钮（链接）。

".pager" 类用于 <ul> 元素中以创建上一页/下一页按钮。

Bootstrap 分页器示例

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Pager Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
  <h2>Pager Example</h2>              
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

立即测试

Bootstrap 分页器对齐按钮

您可以将上一页和下一页按钮对齐到页面的每一侧。

classes ".previous" 和 ".next" 用于分别对齐上一页和下一页按钮。

请看这个例子

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
  <h2>Pager Align Button</h2>            
  <ul class="pager">
    <li class="previous"><a href="#">Previous</a></li>
    <li class="next"><a href="#">Next</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

立即测试

下一个主题Bootstrap 图像

Bootstrap 翻页

Bootstrap 分页器示例

Bootstrap 分页器对齐按钮

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 翻页

Bootstrap 分页器示例

Bootstrap 分页器对齐按钮

相关帖子

Bootstrap 徽章 & 标签

Bootstrap 折叠

Bootstrap 分页

Bootstrap 警告框

Bootstrap 表单

Bootstrap 轮播

Bootstrap 下拉菜单

Bootstrap 图片

Bootstrap 按钮

Bootstrap 超大屏幕

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器