Bootstrap_组件_分页条

最新推荐文章于 2023-07-29 17:47:24 发布
最新推荐文章于 2023-07-29 17:47:24 发布
阅读量178 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangnan456/article/details/100132924
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>
zhangnan456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap CSS组件之分页(pagination)和翻页(pager)
08-31
在Bootstrap中，分页组件使用`<ul class="pagination">`来创建，每个页码是一个`<li>`元素内的`<a>`链接。基础的分页样式如下： ```html <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href=...
Bootstrap分页条页码过多隐藏部分页码
07-17
当从数据库查出数据过多时，分页条页码太多，将多余部分进行隐藏，永远只显示固定数量的页码
BootStrap快速入门基础教程系列
05-13
课程目标从零开始系统学习Bootstrap，并学习其各个组件的使用方法及作用，带你一步一步进入bootstrap的世界，带你快速上手BootStrap的基础操作。适用人群想学习bootstrap的人群，在前端方面想晋级的人群，想快速搭建页面的人群课程简介Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 它做为前端老牌ui框架之一，使用率非常高，上手难度并不难。本课程则是带你一步一步进入bootstrap的世界，带你快速掌握BootStrap的基础操作。 课程简介 Bootstrap是由Twitter推出的一个前台页面开发框架，在行业之中使用较为广泛。此开发框架包含了大量的CSS、JS程序代码，可以帮助开发者（尤其是不擅长页面开发的程序人员）轻松的实现一个不受浏览器限制的精美界面效果。本课程将从响应式布局、Flex布局，Bootstrap的取得、配置、使用等概念进行讲解，为读者完整的讲解Bootstrap中基础样式与各个操作组件，并且在最后还会通过一系列的代码案例来讲解Bootstrap的实战应用。
bootstrap快速入门
qq_53311560的博客
07-14 365
快速入门bootstrap更好地快速搭建前端
BootStrap快速入门
m0_51892736的博客
09-04 431
BootStrap很全面
Bootstrap入门到精通（最全最详细）
Debug的博客
02-22 1066
随着Bootstrap的问世，Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。以上就是今天要讲的内容，本文目前简单介绍了Bootstrap的使用，后续还会继续更行。
bootstrap入门到精通
最新发布
a_xia_o的博客
07-29 541
bootstrap是一个用于快速开发web应用程序和网站的前端框架。基于HTML、CSS和JavaScript封装响应式ElementUI 更适合用于企业内部的管理系统、后台管理等应用场景，而 Bootstrap 更适合用于构建响应式的 Web 网站、博客等前端页面。
sierra_bootstrap_
10-03
总结来说，"sierra_bootstrap_"是一个利用Bootstrap框架创建的电商网站模板，它集成了多种前端组件和设计模式，旨在帮助开发者快速构建专业且具有良好用户体验的电商网站。通过理解和利用这些组件，开发者可以节省...
bootstrap中文手册_bootstrap教程_bootstrap_
09-30
导航是网页中引导用户浏览的重要部分，Bootstrap提供了多种导航方案，如导航栏(navbar)、面包屑(breadcrumb)、分页(pagination)和标签页(tabs)等，它们都具有良好的响应式设计。 模态框(modal)是Bootstrap中的一个...
基于bootstrap+jQuery的前端分页
07-01
1. **Bootstrap组件**：Bootstrap提供了多种预定义的CSS样式和JavaScript插件，其中就包括分页组件（`pagination`）。这个组件包含了一系列链接或按钮，用于导航到不同页面。开发者可以通过简单的HTML结构和...
第一章 BootStrap3 简介及HelloWord
04-30
NULL 博文链接：https://1151461406.iteye.com/blog/2391067
bootstrap实现分页（实例）
热门推荐
红岸基地
03-20 10万+
写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。首先需要明确的一点是，哪些数据是需要分页的，单从数据显示上其实是没有必要分页的，因为页面是可以显示的出来的，但是作为一个相对比较合格的前端，你首先要考虑的不仅仅是这个功能是不是可以实现，而是要考虑用户体验是不是好的，...
Bootstrap4基础入门到精通
10-11
从Bootstrap的基础知识，如何安装，如何变通简易的调用讲起，逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用；讲解Bootstrap相关的插件；同步实战代码和演练解说。
bootstrap
weixin_30680385的博客
10-26 104
屏幕尺寸(宽度) 超小屏幕，宽度 < 768， 如：手机 小型屏幕，768 <= 宽度 < 992，如：平板 中等屏幕，992 <= 宽度 < 1200，如：电脑 超大屏幕，宽度 >= 1200，如：电视 响应式布局 根据不同的客户端显示不同的效果，就称为响应式布局。 由于移动设备访问网站的比...
bootStrap-table 后台分页超详解？
gitChinWin的博客
08-13 3万+
最近在学bootStrap ，学的我头都大了，刚刚解决了个bootStrap的table的组件，就想来分享下，方便自己日后查阅，也看能不能让你们学的轻松点。。 首先贴上官网的自夸： BootStrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 不过倒也确实厉害，很好看
使用Vue实现一个分页组件
weixin_34283445的博客
03-08 625
分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需...
bootstap的初体验-01HelloWorld
maxdaic的专栏
06-11 196
要做web编程，免不了要做前端开发。看了很多网友的意见，说是bootstrap简单易上手，于是入坑了。今天是第一天，温习了一下HTML,CSS和jQuery的一些基础知识，然后就开始入门bootstrap了。 入门总是从最单的事情做起，慢慢建立信心。 下载bootstrap 下载jQuery 新建项目 把bootstrap复制到项目文件夹下 把jQuery复制到项目文件夹下的js文件夹下 创建并编辑index.html 这里最关键的是三行代码： <link rel=
Bootstrap从入门到实战---分页和进度条
Season CSDN博客
07-07 213
Bootstrap从入门到实战—分页和进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-t
Bootstrap入门
枫叶
02-22 3万+
1、什么是Bootrap2、为什么要学习Bootstrap3、哪些项目在使用Bootstrap4、安装和使用5、简单阅读Bootstrap源码6、Bootstrap全局CSS样式7、Bootstrap组件8、Bootstrap插件（了解）9、Bootstrap定制10、Bootstrap学习意义总结1、什么是BootstrapBootstrap来自 Twitter，是目前很受欢迎的前端框架。Boo...
Bootstrap 的分页组件实现分页
05-26
Bootstrap 的分页组件非常易于使用，可以方便地实现分页功能。以下是实现分页的简单步骤： 1. 在 HTML 中添加分页组件的基本结构： ```html <nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</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="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> ``` 2. 在 JavaScript 中添加分页功能： ```javascript // 获取分页组件 var pagination = document.querySelector('.pagination'); // 获取所有页码链接 var pageLinks = pagination.querySelectorAll('a.page-link'); // 给每个页码链接添加点击事件 pageLinks.forEach(function(pageLink) { pageLink.addEventListener('click', function(e) { e.preventDefault(); // 阻止链接默认跳转行为 var pageNum = parseInt(this.innerHTML); // 获取点击的页码 // TODO: 根据页码获取相应数据并更新页面内容 }); }); // 获取“上一页”和“下一页”链接 var prevLink = pagination.querySelector('a[aria-label="Previous"]'); var nextLink = pagination.querySelector('a[aria-label="Next"]'); // 给“上一页”和“下一页”链接添加点击事件 prevLink.addEventListener('click', function(e) { e.preventDefault(); // 阻止链接默认跳转行为 var pageNum = parseInt(pagination.querySelector('.active').querySelector('a').innerHTML); // 获取当前页码 pageNum--; // 上一页页码 if (pageNum < 1) { pageNum = 1; // 页码不能小于 1 } // TODO: 根据页码获取相应数据并更新页面内容 }); nextLink.addEventListener('click', function(e) { e.preventDefault(); // 阻止链接默认跳转行为 var pageNum = parseInt(pagination.querySelector('.active').querySelector('a').innerHTML); // 获取当前页码 pageNum++; // 下一页页码 if (pageNum > pageLinks.length) { pageNum = pageLinks.length; // 页码不能大于总页数 } // TODO: 根据页码获取相应数据并更新页面内容 }); // 默认选中第一页 pageLinks[0].parentNode.classList.add('active'); ``` 以上代码只是一个简单的示例，具体实现还需要根据具体需求进行相应修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值