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

news2024/12/23 19:16:49

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

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

目录

  • 00-基础知识
  • 01-一个简单的分页示例
  • 02-利用图标来代替“上一页”或“下一页”
  • 03-设置分页组件的大小
  • 04-高亮显示和禁用分页项
  • 05-设置分页组件的对齐方式

00-基础知识

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

以下是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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1119237.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

STM32项目工程的搭建

STM32项目工程的搭建

视频连接&#xff1a; [2-1]--入门 新建工程 及 工程搭建 -------------_哔哩哔哩_bilibili 1.STM32开发方式 1.标志库 表示直接调用已经写好的程序&#xff0c;通过类似于函数调用直接使用即可。 2.HAL库 程序员自己手动的操作寄存器进行编程 2.工程模板 3.搭建工程的步骤 1…
阅读更多...
微信小程序OA会议系统数据交互

微信小程序OA会议系统数据交互

前言 经过我们所写的上一文章&#xff1a;微信小程序会议OA系统其他页面-CSDN博客 在我们的是基础面板上面&#xff0c;可以看到出来我们的数据是死数据&#xff0c;今天我们就完善我们的是数据 后台 在我们去完成项目之前我们要把我们的项目后台准备好资源我放在我资源中&…
阅读更多...
Memcached和Memcache安装（64位win10）

Memcached和Memcache安装（64位win10）

Memcached和Memcache安装&#xff08;64位win10&#xff09; 一、Memcached和Memcache的区别&#xff1a; 　　网上关于Memcached和Memcache的区别的理解众说纷纭&#xff0c;我个人的理解是&#xff1a; 　　Memcached是一个内存缓存系统&#xff0c;而Memcache是php的一个扩展…
阅读更多...
虚假KeePass网站利用Google Ads和Punycode推送恶意软件

虚假KeePass网站利用Google Ads和Punycode推送恶意软件

导语 近日&#xff0c;一起利用Google Ads和Punycode进行恶意软件传播的事件引起了广泛关注。该事件利用虚假KeePass下载网站&#xff0c;通过Punycode编码伪装成KeePass密码管理器的官方域名&#xff0c;并在Google Ads广告中推广&#xff0c;诱导用户下载恶意软件。这种新型的…
阅读更多...
C++初阶（四）类和对象

C++初阶（四）类和对象

文章目录 一、面向过程和面向对象初步认识二、类的引入三、类的定义1、类的概述2、类的两种定义3、成员变量命名规则的建议 四、类的访问限定符及封装1、访问限定符2、封装 五、类的作用域六、类的实例化七、类对象模型1、如何计算类对象的大小2、 类对象的存储方式猜测3、 验证…
阅读更多...
【rust/树莓派】使用rppalembedded-graphics控制st7789 LCD屏幕

【rust/树莓派】使用rppalembedded-graphics控制st7789 LCD屏幕

说在前面 树莓派版本&#xff1a;4bLCD模块&#xff1a;ST7789V2 240*280 LCD树莓派系统&#xff1a;Linux raspberrypi 5.15.76-v8 #1597 SMP aarch64 GNU/Linuxrust版本&#xff1a;rustc 1.73.0 模块详情 某雪的1.69inch LCD模块&#xff0c;包含杜邦线 准备工作 树莓派…
阅读更多...
JavaSE编程题目练习（一）

JavaSE编程题目练习（一）

博客昵称&#xff1a;架构师Cool 最喜欢的座右铭&#xff1a;一以贯之的努力&#xff0c;不得懈怠的人生。 作者简介&#xff1a;一名Coder&#xff0c;欢迎关注小弟&#xff01; 博主小留言&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟Cool&#xff0…
阅读更多...
Rust 中的String与所有权机制

Rust 中的String与所有权机制

文章目录 一、string二、所有权2.1 所有权与作用域2.2 对所有权的操作2.2.1 转移2.2.3 拷贝2.2.3 传递 2.3 引用2.3.1 借用2.3.2 可变引用 一、string 之前学习过 Rust 只有几种基础的数据类型&#xff0c;但是没有常用的字符串也就是String&#xff0c;今天来学习一下 String…
阅读更多...
Opensuse Tumbleweed快速部署K8S-1.28.2

Opensuse Tumbleweed快速部署K8S-1.28.2

** #查看你的网卡信息 nmcli device show#设置你的静态IP nmcli connection modify ens32 ipv4.method manual \ipv4.addresses 172.16.20.214/24 ipv4.gateway 172.16.20.1 \ipv4.dns 114.114.114.114#重启网卡生效 nmcli c down ens32 && nmcli c up ens32#添加DNS …
阅读更多...
Java IDEA java.lang.IllegalStateException: Failed to introspect Class报错原因和解决办法

Java IDEA java.lang.IllegalStateException: Failed to introspect Class报错原因和解决办法

Java IDEA java.lang.IllegalStateException: Failed to introspect Class报错原因和解决办法 1. 报错如下&#xff1a;2. 解决 在maven右侧查看Dependencies冲突参考 1. 报错如下&#xff1a; 发现是因为 org.redisson:redisson.spring.boot.starter 3.10.6这个包引入不进来导…
阅读更多...
如何使用 Canvas和HTML5中的SVG画一个矩形？

如何使用 Canvas和HTML5中的SVG画一个矩形？

使用Canvas和SVG分别绘制矩形的方法如下&#xff1a; Canvas绘制矩形&#xff1a; <canvas id"canvas" width"200" height"200"></canvas><script>const canvas document.getElementById(canvas);const ctx canvas.getCon…
阅读更多...
python随手小练6

python随手小练6

1、汉诺塔 汉诺塔&#xff1a;汉诺塔&#xff08;又称河内塔&#xff09;问题是源于印度一个古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放…
阅读更多...
燃气管网智能巡检系统

燃气管网智能巡检系统

燃气管网维护工作繁杂&#xff0c;涉及人员、资源、巡检等&#xff0c;稍一疏忽就会使我们的工作陷入被动&#xff0c;可见启用燃气管网智能巡检系统是很有必要的。 燃气管网智能巡检系统综合管理智能平台&#xff0c;可对燃气管网数据的统一管理&#xff0c;实现对日常巡查、养…
阅读更多...
【Arduino TFT】基于 ESP32S3 S7789 240x240 TFT实现的龙猫太空人天气时钟

【Arduino TFT】基于 ESP32S3 S7789 240x240 TFT实现的龙猫太空人天气时钟

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-10-21 ❤️❤️ 本篇更新记录 2023-10-21 ❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64…
阅读更多...
「2021年TYWZ普及模拟题」多边形 待定题解

「2021年TYWZ普及模拟题」多边形 待定题解

文章目录 题目描述输入格式输出格式样例样例输入 1样例输出 1样例输入 2样例输出 2 数据范围与提示前置知识思路与部分实现完整代码文章小结 题目描述 一个凸多边形具有非常多优秀的性质&#xff0c;它的任意内角小于或等于 18 0 。 180^。 180。 。 小 F 将 n n n 条边交给…
阅读更多...
Linux内存管理(1)：memblock

Linux内存管理(1)：memblock

一、memblock分配器初始化 在内核初始化过程中也需要分配内存，使用的页帧分配器叫memblock(早期的内核版本使用BootMem，新版本内核已不再用)。 memblock是系统启动过程中的一个中间阶段的内存管理， 负责在系统上电到内核内存管理模型初始化之前这段时间的物理内存分配、预留…
阅读更多...
微信小程序之授权登录以及授权登录流程讲解

微信小程序之授权登录以及授权登录流程讲解

前言&#xff1a; 之前博主给大家介绍了小程序的授权登录案例&#xff0c;今天我使用结合项目&#xff0c;后台的方式来给大家展示 一&#xff0c;微信授权登录流程 步骤流程&#xff1a; 1.小程序调用wx.login() 获取 临时登录凭证code &#xff0c;并回传到开发者服务器 2.开…
阅读更多...
解决CondaHTTPError HTTP 000 CONNECTION FAILED for url解决方法

解决CondaHTTPError HTTP 000 CONNECTION FAILED for url解决方法

解决CondaHTTPError: HTTP 000 CONNECTION FAILED for url解决方法 问题&#xff1a;使用conda install命令安装包提示CondaHTTPError: HTTP 000 CONNECTION FAILED for url 分析&#xff1a;网络连接问题&#xff0c;大概率是网速不行或者源没有换 解决方案&#xff1a;修改国…
阅读更多...
华为eNSP配置专题-OSPF路由协议的配置

华为eNSP配置专题-OSPF路由协议的配置

文章目录 华为eNSP配置专题-OSPF路由协议的配置0、概要介绍1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、终端构成和连接2.2、终端的基本配置 3、OSPF路由的配置3.1、OSPF路由的配置3.1.1、在R1上配置OSPF3.1.2、在R2和R3上配置OSPF3.1.3、查看和监控OSPF 华为e…
阅读更多...
Java，输出一个10行的杨辉三角

Java，输出一个10行的杨辉三角

据图可以发现&#xff0c;杨辉三角是每行的首元素和末元素都为1&#xff0c;中间的元素都是等于它上面的元素加上左上角的元素。 首先&#xff0c;先完成二数组的创建和初始化&#xff0c;第一行的长度为一&#xff0c;第二行的长度为二……以此类推。所以&#xff0c;外元素的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023