当前位置: 首页 > news >正文

【Bootstrap V4系列】学习入门教程之 组件-分页(Pagination)

Bootstrap V4系列 学习入门教程之 组件-分页(Pagination)

  • 分页(Pagination)
    • 一、概述
    • 二、使用图标
    • 三、禁用和激活状态
    • 四、尺寸
    • 五、对齐

分页(Pagination)

分页(pagination)是用于指示一系列相关的内容存在于多个页面中的组件。

一、概述

我们让分页(pagination)占据了一大块区域来放置相互关联的链接,这让链接更醒目并且易于扩充,除了这些好处,还为链接提供了较大的点击区域。分页(Pagination)是利用 HTML 的列表元素构建的,因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用 <nav> 元素进行了包裹,以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。

此外,由于页面上可能会有多个这样的导航区域,因此建议为 <nav> 设置一个用于描述其用途的 aria-label 属性。例如,如果分页(pagination)组件用于链接一组搜索结果,则设置 aria-label="Search results pages" 比较合适。

<nav aria-label="Page navigation example"><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>
</nav>

页面展示效果:

在这里插入图片描述

二、使用图标

<nav aria-label="Page navigation example"><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"><a class="page-link" href="#">3</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 links)进行自定义。使用 .disabled 来显示不可点击的链接;使用 .active 来表示当前页面。

虽然 .disabled 类使用 pointer-events: none 属性来 尝试 封印 <a> 元素的链接功能,但是该 CSS 属性并未标准化,并且对键盘导航不起作用。因此,你应该为被禁用的链接添加 tabindex="-1" 属性,并自己编写 JavaScript 代码来完全禁止其功能。

<nav aria-label="..."><ul class="pagination"><li class="page-item disabled"><a class="page-link">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><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>
</nav>

页面展示效果:

在这里插入图片描述

你可以通过将激活(active)或禁用(disabled)的链接替换为 <span> 标签,或者如果是 上一页/下一页 箭头的话,可以去掉 <a> 标签,从而删除该链接对单击功能的支持并防止获得键盘焦点,同时还能保留需要的样式。

<nav aria-label="..."><ul class="pagination"><li class="page-item disabled"><span class="page-link">Previous</span></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><span class="page-link">2</span></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>
</nav>

页面展示效果:

在这里插入图片描述

四、尺寸

喜欢大的还是小的分页?通过添加 .pagination-lg.pagination-sm 可以设置其尺寸。

<nav aria-label="..."><ul class="pagination pagination-lg"><li class="page-item active" aria-current="page"><span class="page-link">1</span></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></ul>
</nav>

页面展示效果:

在这里插入图片描述

五、对齐

利用 flexbox 工具类 可以更改分页组件的对齐方式。

<nav aria-label="Page navigation example"><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link">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>
</nav>

页面展示效果:

在这里插入图片描述

<nav aria-label="Page navigation example"><ul class="pagination justify-content-end"><li class="page-item disabled"><a class="page-link">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>
</nav>

页面展示效果:

在这里插入图片描述

http://www.xdnf.cn/news/448039.html

相关文章:

  • 如何利用 Java 爬虫获得京东(JD)商品详情:实战指南
  • windows10 安装 QT
  • 国产之光--腾讯云推出AI编程智能助手CodeBuddy
  • HPE ProLiant DL360 Gen11 服务器,配置 RAID 5 教程!
  • Linux篇 第2章Linux基础指令
  • 【FFmpeg】介绍+安装+VisualStudio配置FFMpeg库
  • 序列化和反序列化:从理论到实践的全方位指南
  • c++STL——哈希表封装:实现高效unordered_map与unordered_set
  • teneo自动机器人部署教程
  • 固定步长和变步长的LMS自适应滤波器算法
  • [Spring]-组件的生命周期
  • 【Linux网络】传输层协议TCP
  • TypeScript泛型:从入门到精通的全方位指南
  • Linux下的c/c++开发之操作Redis数据库
  • 上网行为审计软件系统说明书:上网行为审计是什么?是干啥的?哪家好?
  • AI世界的崩塌:当人类思考枯竭引发数据生态链断裂
  • new optimizers for dl
  • 在Unity中制作拥有36年历史的游戏系列新作《桃太郎电铁世界》
  • 通过宝塔配置HTTPS证书
  • Python爬虫实战:研究拦截器,实现逆向解密
  • UI 原型设计:交互规则的三要素——重要性、原则与实践
  • 【Liblib】基于LiblibAI自定义模型,总结一下Python开发步骤
  • 小说所有设定(v3.0 preview)
  • Qml自定义组件之车辆风扇展示
  • 【Linux】掌握 setsid:让进程脱离终端独立运行
  • 三种映射方式总结
  • 第二十九节:直方图处理-直方图均衡化
  • ET ProcessInnerSender类(实体) 分析
  • ultralytics中tasks.py---parse_model函数解析
  • 求助求助,重金酬谢