分页用于启用网站页面之间的导航。 Bootstrap中使用的分页具有大量的连接链接,这些链接很难错过并且易于扩展。
基本分页:
基本分页可以使用以下类指定。
- .pagination类用于在列表组上指定分页。
- .page-item类用于指定组中的每个分页项。
- .page-link类用于指定分页项中的链接。
例子:
输出:
禁用状态:
通过使用.disabled类,可以对分页链接进行样式设置,以使其显示为不可单击。这可用于禁用“上一个”或“下一个”按钮。
.disabled类在内部使用’pointer-events:none’来使链接不可单击,但是,由于并非始终实现此规范,因此最好通过设置’tabindex’属性使其无法导航到至-1。此属性控制是否可以使用Tab键浏览元素。
例子:
输出:
活动状态:
通过使用分页项上的.active类,可以将分页链接的样式设置为突出显示为当前活动页面。
例子:
输出:
确定分页组的大小:
通过使用其他类别,可以使分页组更大或更小。输入组有3种可能的大小。
- .pagination-sm类用于较小的大小。
- .pagination-lg类用于更大的尺寸。
- .pagination类是默认大小。
例子:
Bootstrap 4 | Pagination
输出:
分页组的对齐方式:
通过使用flexbox实用程序类,可以将分页组右对齐或居中对齐。
- .justify-content-center类用于将组与中心对齐。
- .justify-content-end类用于将组右对齐。
例子:
Bootstrap 4 | Pagination
输出: