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

news/2025/2/21 7:00:24/

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

在<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.ppmy.cn/news/1168489.html

相关文章

SpringSecurity源码学习五：跨域与跨站请求伪造

SpringSecurity源码学习五：跨域与跨站请求伪造

目录 什么是跨域springboot是怎么解决跨域问题在springSecurity中怎么解决跨域问题CORS源码跨域请求伪造CSRFCSRF源码总结 什么是跨域 跨域是指在网络中&#xff0c;当一个网页的资源&#xff08;如字体、脚本或样式表&#xff09;尝试从不同的域名、端口或协议请求数据时&…
阅读更多...
华为OD 最大差（100分）【java】A卷+B卷

华为OD 最大差（100分）【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目，A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载，请点击以下链接进入： 我用夸克网盘分享了「华为O…
阅读更多...
卷积神经网络CNN学习笔记-卷积计算Conv2D函数的理解

卷积神经网络CNN学习笔记-卷积计算Conv2D函数的理解

目录 1.全连接层存在的问题2.卷积运算3.填充(padding)3.1填充(padding)的意义 4.步幅(stride)5.三维数据的卷积运算6.结合方块思考7.批处理8.Conv2D函数解析9.conv2d代码9.1 stride19.2 stride2 参考文章 1.全连接层存在的问题 在全连接层中&#xff0c;相邻层的神经元全部连接…
阅读更多...
Leetcode1833. 雪糕的最大数量

Leetcode1833. 雪糕的最大数量

Every day a Leetcode 题目来源&#xff1a;1833. 雪糕的最大数量 解法1&#xff1a;贪心 排序 本题唯一的难点在于计数排序。 计数排序详解&#xff1a;C算法之计数排序 为了尽可能多的买到雪糕&#xff0c;我们选择从价格低的雪糕开始买&#xff0c;统计能够买到的雪糕…
阅读更多...
运行stable-diffusion-xl-refiner-1.0遇到version `GLIBCXX_3.4.29‘ not found的问题

运行stable-diffusion-xl-refiner-1.0遇到version `GLIBCXX_3.4.29‘ not found的问题

一、问题背景 https://huggingface.co/stabilityai/stable-diffusion-xl-refiner-1.0 在运行示例程序时候遇到GLIBCXX_3.4.29‘ not found diffusers to > 0.18.0 import torch from diffusers import StableDiffusionXLImg2ImgPipeline from diffusers.utils import loa…
阅读更多...
【React】高频面试题

【React】高频面试题

1. 简述下 React 的事件代理机制&#xff1f; React使用了一种称为“事件代理”&#xff08;Event Delegation&#xff09;的机制来处理事件。事件代理是指将事件处理程序绑定到组件的父级元素上&#xff0c;然后在需要处理事件的子元素上触发事件时&#xff0c;事件将被委托给…
阅读更多...
【Qt控件之QToolBox】介绍及使用

【Qt控件之QToolBox】介绍及使用

概述 QToolBox类提供了一个列式的带有选项卡的小部件条目。工具箱是一个小部件&#xff0c;以一个列式的选项卡显示在上方&#xff0c;并在当前选项卡下方显示当前的小部件条目。每个选项卡在选项卡列中有一个索引位置。选项卡的小部件条目是一个QWidget。 每个小部件条目都有…
阅读更多...
Oracle的立场：官网更换首页与以色列站在一起

Oracle的立场：官网更换首页与以色列站在一起

Oracle公司的官网&#xff0c;更换了首页内容&#xff0c;明确表明立场&#xff1a;Oracle与以色列站在一起。 声明指出&#xff1a; Oracle谴责针对以色列及其公民的恐怖袭击。Oracle将为其员工、以色列政府和国防机构提供一切必要的支持。 Magen David Adom是一家为以色列公民…
阅读更多...
最新文章

Copyright @ 2022~2023