分页

一、概览

二、使用图标

三、禁用和活动状态定义

分页组件可以根据不同的情况进行定制,使用.disabled 显示为分页链接不可用(禁用无效),使用 .active 可指引标示当前所在的分页。

.disabled 使用 pointer-events: none 来禁用 <a>的链接功能,但该CSS属性尚未标准化(使用的时候要注意浏览器兼容性调式-译者注)。

此外,即使在支持pointer-events: none 的浏览器中,键盘导航仍然不受影响,这意味着键盘使用者和辅助技术浏览器用户仍然可以启动这些被“禁用”的链接。为了安全起见,请在这些链接上添加一个tabindex="-1"定义并使用自定义JavaScript来完全禁用其功能。

您可以用 <span>替换有效或禁用的链接,或者在上一页/下一页箭头替代(省略)A链接以删除点击功能,以保留原样式的同时防止键盘focus强游活。

四、规格尺寸

要更大或更小的分页,添加.pagination-lg.pagination-sm 样式定义可以获得大规格或小规格尺寸的分页组件。

五、对齐

使用flexbox弹性布局通用样式,可更改分页组件的对齐方式。