13Bootstrap5分页

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量969 收藏 3
点赞数
分类专栏： Bootstrap5 文章标签： 前端 html javascript bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/121846991
版权

Bootstrap5 分页 面包屑导航 页面样式 前端开发
关键词由CSDN通过智能技术生成

13Bootstrap5分页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5分页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 5 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。
然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类:
-->
<div class="container mt-3">
    <h2>分页</h2>
    <p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类：</p>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
    </ul>
</div>
<!--
当前页页码状态
当前页可以使用 .active 类来高亮显示：
-->
<div class="container mt-3">
    <h2>当前页页码状态</h2>
    <p>当前页可以使用 .active 类来高亮显示：</p>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
    </ul>
</div>
<!--
不可点击的分页链接
.disabled 类可以设置分页链接不可点击:
-->
<div class="container mt-3">
    <h2>不可点击的分页链接</h2>
    <p>.disabled 类可以设置分页链接不可点击:</p>
    <ul class="pagination">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
    </ul>
</div>
<!--
分页显示大小
可以将分页条目设置为不同的大小。
.pagination-lg 类设置大字体的分页条目
.pagination-sm 类设置小字体的分页条目:
-->
<div class="container mt-3">
    <h2>分页显示大小</h2>
    <p>.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:</p>


    <p>大:</p>
    <ul class="pagination pagination-lg">
        <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
    </ul>

    <p>默认:</p>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
    </ul>

    <p>小:</p>
    <ul class="pagination pagination-sm">
        <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
    </ul>
</div>
<!--
分页的对齐方式
可以使用工具类来设置分页的对齐方式：

#可以跳转到设置了id的目的地
javascript:void(0)则停留在原地，一动不动，我们称之为“死链接”
-->
<div class="container mt-3">
    <h2>分页的对齐方式</h2>
    <p>可以使用工具类来设置分页的对齐方式：</p>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
    </ul>
    <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
    </ul>
    <ul class="pagination justify-content-end">
        <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
    </ul>
</div>
<!--
面包屑导航
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：
-->
<div class="container mt-3">
    <h2>面包屑导航</h2>
    <p>.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：</p>
    <ul class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Photos</a></li>
        <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
        <li class="breadcrumb-item"><a href="#">Italy</a></li>
        <li class="breadcrumb-item active">Rome</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

心醉瑶瑾前
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap table 分页栏修改
01-30
- **分页参数**：根据jqGrid的分页特点，可能需要调整Bootstrap Table的分页参数，如每页显示条目数(`pageSize`)，当前页码(`pageNumber`)等。 5. **实际代码实现**： - 在`bootstrap-table.js`中找到与分页相关...
Bootstrap table分页问题汇总
09-02
在本文中，我们将深入探讨 Bootstrap Table 的分页功能及其常见问题及解决方案。 ### 问题1：服务器端无法获取表单值 在某些情况下，使用Bootstrap Table时，服务器端可能无法通过 `request.form` 获取到传来的...
Bootstrap5 分页
T0620514的博客
12-11 496
Bootstrap5 分页
Bootstrap 5-分页
m0_73839298的博客
09-20 243
• justify-content-center（分页居中）• justify-content-end（右对齐）• disabled（禁用，显示为不可点击)• pagination-lg（大型分页）• pagination-sm（小型分页）• active（活动，显示为按下状态）
利用Bootstrap的分页组件实现分页效果
昊虹AI笔记
10-21 3820
利用Bootstrap的分页组件实现分页效果
bootstrap下拉框分页_bootstrap下拉框
weixin_39879122的博客
12-19 778
先写html请选择1234再添加css样式来固定下拉框的宽度：.dropdowntitle{width:5em;display:inline-block;}添加js来实现下拉列表点击事件 ：$(".dropdown-menu").click(function(e){e=e||window.event;varobj=e.target||e.srcElement;var$thisclick=$(...
bootstrap实现分页功能
qq_39772439的博客
11-22 6747
功能其实很简单，主要细心就可以了。先上效果图，有点简陋，但是功能No problem！！ 实现这个功能需要一下几个步骤 第一步：引入boostrap插件(https://v3.bootcss.com/getting-started/#download有可能不全自己找) 这是需要引入的必须要的js及css 第二步：整理写js，下面写的够仔细，用的话直接复制 <script...
ThinkPhp5使用bootstrap样式分页
读万卷书，行万里路
12-31 5558
1.查看分页的配置 在application/config.php文件中最后。 //分页配置 'paginate' => [ 'type' => 'bootstrap', 'var_page' => 'page', 'list_rows' => 15, ], 2.下载：https://v3.bootcss.com/getti
bootstrap table分页
qq_37635874的博客
01-24 285
1. 客户端分页    1)  js页面 sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者 "server" responseHandler: function(data){ return data.rows; }, queryParams : function(params) { ...
php 分页类 bootstrap,分享thinkphp5自定义Bootstrap分页类
weixin_36260304的博客
03-26 456
分享thinkphp5.0.11的自定义Bootstrap分页类，tp5自带分页类Bootstrap.不能满足我的分页需求。自带分页：1、页码导航没有首页和末页2、自带导航没有总记录数、总页数和当前页。如：共36条记录 当前第1/3页。thinkphp5框架设计的很好，如果没有合适的，可以于驱动插件的形式自由自定义，只需改配置成自己定义的类就好了。先看下最终效果：本站的分页导航就是采用这个类实现的...
bootstrap php分页,bootstrap怎么实现分页技术
weixin_31031155的博客
03-11 833
如果你想了解更多关于bootstrap的知识，可以点击：Bootstrap教程bootstrap分页实现任何一个网页里面, 我们都可以看到分页, 不管是移动端, 还是pc端, 不管是下拉到下一页, 还是按钮下一页, 都需要分页支撑你的网站. 这样首先, 可以提高你的网站的访问效率. 另外页面展现也更加好看, 要不然, 上百万的上千万的数据. 显示估计一两个小时也显示不出来效果. 怎么使用boots...
bootstrap-table 分页Demo
03-03
bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、...
bootstrap table分页例子.zip
09-20
这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了两种主要的分页方式：简单分页和智能分页。 **简单分页**： 1. **配置项**: 在初始化...
bootstrap分页插件.zip
09-24
Bootstrap分页插件是前端开发中常用的一种工具，它基于Twitter Bootstrap框架，为网页提供美观且功能丰富的分页导航。这个压缩包文件“bootstrap分页插件.zip”包含了一个名为“317482454-tm.pagination-195db9b”的...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 226
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 285
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 453
对于上云api开发学习过程中的错误教训积累总结
bootstrap treetable 分页
05-26
Bootstrap Treetable 不支持自带分页功能，但可以与其他分页插件结合使用。以下是一个示例： 1. 首先，在 HTML 页面中引入 Bootstrap Treetable 和分页插件的 CSS 和 JS 文件。 ``` <!-- Bootstrap Treetable --> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

心醉瑶瑾前

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

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

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

打赏作者

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

抵扣说明：

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

余额充值