利用Bootstrap的分页组件实现分页效果

原创 已于 2023-11-30 16:34:16 修改 · 6k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #前端 #javascript

于 2023-10-21 17:50:18 首次发布
在网页开发中，内容过多时常用分页处理。本文介绍了Bootstrap中分页导航的相关类和组件，如pagination、page-item、page-link等，还给出了简单分页示例，以及利用图标代替文字、设置大小、高亮禁用分页项和设置对齐方式等操作的示例代码。

在网页开发过程中，如果碰到内容过多的情况，一般都会使用分页处理。

在<ul>元素上添加pagination类，在<li>元素上添加page-item类，在超链接中添加 page-link类，即可实现一个简单的分页。

目录

00-基础知识

bootstrap提供了一些类来帮助你创建分页导航。

以下是Bootstrap中与分页有关的主要类和组件：

  1. .pagination: 这是分页容器的基本类，用于包装分页链接。

  2. .page-item: 这个类用于表示分页中的每个项目（页码或其他项），通常包裹在分页链接的外部。

  3. .page-link: 这个类用于分页链接，通常包含页码或其他导航项的文本，并处理分页链接的点击事件。

  4. .disabled: 当某个分页项不可点击时，你可以添加这个类来表示它被禁用。

  5. .active: 当某个分页项代表当前活动页时，你可以添加这个类来表示它是当前激活状态。

以下是一个简单的Bootstrap分页示例：

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item active"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

在这个示例中，.pagination类用于包装整个分页，.page-item用于包装每个分页项，.page-link用于分页链接。.active类表示当前活动页，.disabled类表示禁用的分页项。

你可以根据需要自定义这些类的外观和行为，以适应你的Web应用程序的需求。Bootstrap还提供了其他分页相关的选项和样式，如分页大小、对齐方式等，可以根据具体情况进行调整。

01-一个简单的分页示例

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义分页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>实现分页效果</h3>
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

02-利用图标来代替“上一页”或“下一页”

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用图标</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">在分页中使用图标</h3>
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-设置分页组件的大小

可利用类 pagination-lg、pagination、pagination-sm分别实现大号分页组件、正常大小分页组件、小号分页组件。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置分页的大小</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">大号分页样式</h3>
<!--大号分页样式-->
<ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<h3 align="center">默认分页样式</h3>
<!--默认分页效果-->
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<!--小号分页效果-->
<h3 align="center">小号分页样式</h3>
<ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-高亮显示和禁用分页项

可以使用类active来高亮显示分页项，使用类disabled来设置禁用分页项。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>激活和禁用分页项</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">激活和禁用分页项</h3>
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

05-设置分页组件的对齐方式

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置分页的对齐方式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>默认对齐（左对齐）</h3>
<ul class="pagination mb-5 ">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<h3 align="center">居中对齐</h3>
<ul class="pagination mb-5 justify-content-center">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<h3 align="right">右对齐</h3>
<ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
</body>
</html>

运行效果如下：
在这里插入图片描述

前端领域中Bootstrap的分页组件动画
小白菜的博客
04-22 812
在前端开发中，分页组件是一个常见且重要的交互元素，用于将大量数据分页展示，提升用户体验。Bootstrap作为一款流行的前端框架，提供了基本的分页组件。然而，基本的分页组件缺乏动态效果，显得较为单调。本文的目的是深入探讨如何为Bootstrap的分页组件添加动画效果，以增强用户与分页组件的交互性和视觉吸引力。本文的范围涵盖了从核心概念的讲解到实际项目的应用，包括动画效果的实现原理、具体的代码实现步骤、实际应用场景的分析，以及相关学习资源和工具的推荐等方面。背景介绍。
308、bootstrap 之 分页 组件
l0510402015的博客
02-27 412
1、如果页面内容有多个，可以将页面分成多页进行显示 2、可以给加入disabled类 和active类来禁止链接属性，比如说在第一时，《这个就不能有链接属性了。 3、类pagination-sm、pagination、pagination-lg 可以用来设置分页字符大小，添加在列表标签<ul>中 注意：使用pagination-sm、pagination-lg类时，也...
BootStrap分页插件
qq_48575500的博客
08-03 1680
分页插件
Bootstrap 分页
最新发布
likuoelie的博客
10-12 726
Bootstrap分页组件(Pagination)是一个轻量级的导航工具，用于在长内容中创建多页导航。它支持多种样式和功能，包括基本分页、禁用/激活状态、不同尺寸(pagination-lg/sm)、居中对齐(justify-content-center)以及带省略号的复杂分页。组件基于Bootstrap 5.3.3版本，通过简单的HTML结构(<nav>包裹<ul class="pagination">)即可实现，无需JavaScript即可使用。分页组件兼顾响
Bootstrap分页插件--Bootstrap Paginator
热门推荐
乐于学习、乐于分享、乐于总结
10-22 1万+
1.在视图上引入bootstrap.css、bootstrap-page
bootstrap实现分页
风一样的男子
08-20 8179
1.官网下载bootstrap,bootstrap-table https://v3.bootcss.com/ http://bootstrap-table.wenzhixin.net.cn/ 2.引入css和js 此处引用的是themeleaf写法 &lt;link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet...
bootstrap分页效果实现
09-15
基于bootstrap效果的分页实现。css样式和html页面样例。
Bootstrap分页组件的设计
04-12
Bootstrap 分页组件的设计 Bootstrap 分页组件的设计是基于 Bootstrap 前端开发框架，简单设计了前端分页控件。该组件提供了一个基本的分页控件，能够满足大多数情况下的分页需求。 分页组件的结构 分页组件的...
Bootstrap分页条页码过多隐藏部分页码
07-17
当从数据库查出数据过多时，分页条页码太多，将多余部分进行隐藏，永远只显示固定数量的页码
vue2.0与bootstrap3实现列表分页效果
08-28
在上面的代码中，我们使用了Bootstrap3的分页组件来实现分页导航。我们可以使用`v-if`指令来控制分页按钮的显示和隐藏，并使用`v-on`指令来绑定点击事件。 最后，我们需要考虑数据统计信息的显示。数据统计信息是指...
bootstrap分页插件的使用
cooldream2009的博客
02-15 889
项目中需要实现文章列表的分页显示，由于使用了bootstrap框架，所以我们选择bootstrap的分页实现方法。网上有一些这方面的介绍文章，并且也有相关的示例程序。这里结合我们的项目，介绍一下使用bootstrap的分页插件实现分页功能的方法。 1 html部分 bootstrap分页插件的名称是 bootstrap-paginator.js，下载地址 GitHub 官网地址：https:...
bootstrap分页插件
08-24
Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。可以让我们方便的构建分页应用。
bootstrap分页插件.zip
09-24
bootstrap分页插件，亲自测过，很实用哟
Bootstrap分页
05-27
package com.org.controller; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.json.JSONObject; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import com.org.BaseController; import com.org.model.User; import com.org.service.IUserService; /** * @Author:liangjilong * @Date:2014-2-25 * @Version:1.0 * @Description: */ @Controller public class UserController extends BaseController { @Resource private IUserService userService; /*** * 方法一请求使用String * * 请求@RequestMapping匹配的URL request * * @param response * @return * @throws Exception */ @RequestMapping(value = "/userList1.do") public String userList1(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); List<User> lists = userService.getUserList(); if (lists != null) { request.setAttribute("userList", lists); } // userList指跳转到userList.jsp页面 return "userList"; } /** * 方法二请求使用ModelAndView * * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/userList2.do") public ModelAndView userList2(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); List<User> lists = userService.getUserList(); if (lists != null) { request.setAttribute("userList", lists); } // userList指跳转到userList.jsp页面 return new ModelAndView("userList"); } /*** * 自定义标签实现分页 * * @param request * @param response * @param @ResponseBody ajax响应 * @param method={RequestMethod.POST,RequestMethod.GET}表单请求 * @param consumes="application/json; charset=UTF-8"请求格式是json * @return * @throws UnsupportedEncodingException * @throws Exception */ @RequestMapping(value = "/pageList.do" ,method={RequestMethod.POST,RequestMethod.GET}) public @ResponseBody ModelAndView getUserInfo(Model model, @RequestParam(required = false) String username, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize) { try { String userName = new String(username.getBytes("ISO-8859-1"),"UTF-8");//处理乱码 Map<String, Object> map = new HashMap<String, Object>(); username=(username==null)?"":username; map.put("username", username);//username必须要和ibatis配置的property=username一致 Integer totalCount = this.userService.getUserCount(map); this.initPage(map, pageNum, pageSize, totalCount); List list = this.userService.getUserLists(map); this.initResult(model, list, map); return new ModelAndView("pagerList"); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 添加用户 * @param type * @param model * @return */ @RequestMapping("/addUser.do") public ModelAndView addUser(@RequestParam String username, Model model) { User user = new User(); user.setUsername(username); this.userService.addUser(user); return this.getUserInfo(model, null, null, null); } /*** * 删除用户 * @param id * @param pageNum * @param pageSize * @param model * @return */ @RequestMapping(value="/delUser.do",method={RequestMethod.POST,RequestMethod.GET},consumes="application/json; charset=UTF-8") @ResponseBody public ModelAndView delUser(@RequestParam(required = true) Integer id, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize, Model model, HttpServletRequest request,HttpServletResponse response) { PrintWriter out=null; JSONObject result=new JSONObject(); try { out=response.getWriter(); this.userService.delUserById(id); result.put("flag", true); out.write(result.toString()); } catch (Exception e) { try { result.put("flag", false); out.write(result.toString()); } catch (JSONException e1) { e1.printStackTrace(); } } return null; //return this.getUserInfo(model, null, pageNum, pageSize); } /*** * 编辑用户 * @param id * @param model * @return */ @RequestMapping("/getUserById.do") public ModelAndView getUserById(@RequestParam(required = true) Integer id, Model model) { User u = this.userService.getUserById(id); model.addAttribute("user", u); return new ModelAndView("editUser"); } /*** * 编辑用户 * @param id * @param model * @return */ @RequestMapping("/editUser.do") public ModelAndView editUser(@RequestParam(required = true) Integer id, @RequestParam String username, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize, Model model) { User u = new User(); u.setUsername(username); this.userService.editUser(u); return this.getUserInfo(model, null, pageNum, pageNum); } }
使用Bootstrap实现分页，并且当页码过多时使用省略号
01-08
使用Bootstrap实现分页，并且当页码过多时使用省略号，这篇文章有样式的简单演示：https://blog.youkuaiyun.com/u013025627/article/details/50485327 样式只是自己的简单样式，不同的项目有不同的样式风格，只是提供分页时显示页面的方法
bs_pagination(基于bootstrap的分页插件).rar
05-19
基于bootstrap+jquery的分页插件bs_pagination。如果我们的项目采用了bootstrap前端框架，可以考虑这款基于bootstrap+jquery的分页插件。本文将为你介绍该款分页插件的使用方法。
bootstrap分页组件
huangbaokang的博客
04-24 739
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...
Bootstarp4 列表组
weixin_30276935的博客
07-30 250
1：创建列表组 要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: <div class="container"> <h2>基础列表组</h2> <ul class="list-group"> <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昊虹AI笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值