React Bootstrap 分页

网页上的分页是导航不同页面的最有用的组件之一。它为多页网站提供了简单的导航。 React Bootstrap 分页组件是一个强大的组件，它提供了一个包含预应用样式的大型连接链接块。 React Bootstrap 分页易于扩展；我们可以在分页列表中包含任意数量的页面。

让我们了解如何在 React 应用程序中使用 Bootstrap 创建分页。

如何在 React 应用程序中创建分页？

要在使用 React Bootstrap 的 React 应用程序中创建分页，我们可以使用 <Pagination> 和 <Pagination.Item> 组件。 它将呈现 Bootstrap 的默认样式分页。 active 属性用于显示活动的分页项。 Pagination 组件导入如下

让我们使用 Pagination 组件创建基本分页。

App.js

输出

分页大小

我们可以使用 size 属性来指定分页大小。 我们可以使用 lg 或 sm 值表示大尺寸和小尺寸。

考虑下面的示例

App.js

输出

从上面的输出中，不同大小的分页显示在我们的 Web 浏览器上。

更多控件

分页组件支持多个组件来创建更复杂的分页 UI。 我们可以使用这些子组件在分页中指定第一个、上一个、下一个和最后一个按钮。 我们还可以有一个省略号项来指示先前或继续的导航。

考虑下面的示例

App.js

输出

从上面的输出中，我们创建了一个具有复杂 UI 结构的分页。

但是，以上分页是静态的；为了使它们动态化，我们可以借助 Array 方法使用 JavaScript 将它们绑定。

因此，我们可以使用 React Bootstrap 轻松地为分页创建不同的样式。