Bootstrap 5 分页

Bootstrap 5 列表类和 HTML 元素用于分页，以便屏幕阅读器可以公布可用链接的数量。 在 <div> 元素中使用 bootstrap 5 类，以向屏幕阅读器和其他辅助技术表明这是一个分页部分。 分页功能显示应用程序中活动页面链接之前和之后的页面。 分页适用于大型 Web 应用程序、电子商务网站和教程网站，用于链接多个页面。

基本分页

Bootstrap5 分页功能在 div 标签内使用“pagination”类。 bootstrap 使用列表标签，例如 <ul> 和 <li> 用于链接页面。 <li> 和 <a> 标签分别使用“page-item”和“page-link”类。 <li> 标签使用锚元素在列表值中放置所需的链接。

语法

以下语法显示如何使用 bootstrap 5 类创建分页。

示例

以下示例显示使用 bootstrap 5 类的基本分页。 在这里，我们可以链接显示页面之前、页面之后和可用显示页面链接。

输出

下图显示了网页的基本分页输出。

活动分页

分页功能在带有列表功能的 div 标签内使用“pagination”类。 列表功能的 <li> 标签使用带有“active”类的“page-item”。

语法

以下语法显示在网页中使用 bootstrap 5 类的活动分页。

示例

以下示例显示使用 bootstrap 5 类的活动分页。 “5”页面值使用“active”类。 在 Web 应用程序中，活动页面会根据显示页面进行更改。

输出

下图显示了网页的活动分页输出。

禁用分页

Bootstrap 5 分页功能在带有列表功能的 div 标签内使用“pagination”类。 列表功能的 <li> 标签使用带有“disabled”类的“page-item”。

语法

以下语法显示在网页中使用 bootstrap 5 类的禁用分页。

示例

以下示例显示使用 bootstrap 5 类的禁用分页。 我们在分页的最后一个链接中使用 disabled 类。

输出

下图显示了网页的禁用分页输出。

分页大小

分页功能在 div 标签内使用“pagination”、“page-item”和“page-link”类。 Bootstrap 5 分页显示为所需的大小，例如大和小。 size 类带有“pagination”类。

语法

以下语法显示在网页中使用 bootstrap 5 类的分页大小。

示例

以下示例显示使用 bootstrap 5 类的禁用分页。 我们可以使用大尺寸和小尺寸的分页。

输出

下图显示了网页分页输出的不同尺寸。

分页对齐

分页功能在 <ul> 标签内使用带有对齐类的“pagination”。 Bootstrap 5 分页显示为所需的对齐方式，例如开始、居中和结束。 分页不需要任何类来显示页面的起始点。 网页默认显示左对齐的分页，但居中和右对齐的分页需要 bootstrap 5 对齐类。

语法

以下语法显示使用 bootstrap 5 类的居中对齐分页。

以下语法显示使用 bootstrap 5 类的结束对齐分页。

示例

以下示例显示使用 bootstrap 5 类的分页对齐。 我们可以在页面的起点、中心点和终点看到分页功能。

输出

下图显示了网页分页输出的不同对齐方式。

面包屑导航分页

Bootstrap5 分页功能在 <ul> 标签内使用“breadcrumb”类。 bootstrap 使用列表标签，例如 <li> 和 <a> 用于链接页面。 列表标签（例如 <li>）使用“breadcrumb-item”类。

语法

以下语法显示如何使用 bootstrap 5 类创建面包屑导航分页。

示例

以下示例显示使用 bootstrap 5 类的面包屑导航分页。 我们可以链接面包屑格式的不同值。 分页在两个值之间使用滑动线来区分值。

输出

下图显示了网页的基本分页输出。

结论

分页用于在一个页面上链接不同的和多个页面，以实现用户交互。 它显示了有多少页面可用于显示用户所需的信息。 这是一个小型、用户友好且可用于大型 Web 应用程序的功能。