分页组件可以根据不同的情况进行定制,使用.disabled
显示为分页链接不可用(禁用无效),使用 .active
可指引标示当前所在的分页。
.disabled
使用 pointer-events: none
来禁用 <a>
的链接功能,但该CSS属性尚未标准化(使用的时候要注意浏览器兼容性调式-译者注)。
此外,即使在支持pointer-events: none
的浏览器中,键盘导航仍然不受影响,这意味着键盘使用者和辅助技术浏览器用户仍然可以启动这些被“禁用”的链接。为了安全起见,请在这些链接上添加一个tabindex="-1"
定义并使用自定义JavaScript来完全禁用其功能。
您可以用 <span>
替换有效或禁用的链接,或者在上一页/下一页箭头替代(省略)A链接以删除点击功能,以保留原样式的同时防止键盘focus强游活。
要更大或更小的分页,添加.pagination-lg
或 .pagination-sm
样式定义可以获得大规格或小规格尺寸的分页组件。
使用flexbox弹性布局通用样式,可更改分页组件的对齐方式。