如何在Laravel 9中使用Bootstrap 5创建指定样式分页布局

云上老周

2026-8-27

目标分页效果参考

Laravel+Bootstrap5 分页布局示例

实现步骤

第一步：切换Laravel全局分页驱动为Bootstrap 5
Laravel 9默认使用Tailwind风格的分页，首先要替换驱动适配Bootstrap。打开app/Providers/AppServiceProvider.php，头部引入分页类：

use Illuminate\Pagination\Paginator;

在文件内的boot()方法中添加驱动配置：

public function boot()
{
    Paginator::useBootstrapFive();
}

第二步：（可选）发布自定义分页模板调整结构
如果默认生成的Bootstrap分页结构和目标效果有差异，可以执行artisan命令发布官方分页视图到项目内自行修改：

php artisan vendor:publish --tag=laravel-pagination

命令执行完成后，分页模板会存放在resources/views/vendor/pagination/目录，直接修改bootstrap-5.blade.php的HTML结构即可，不需要改动后端分页逻辑。

第三步：视图中渲染分页
在列表对应的Blade模板中，调用分页渲染方法即可，onEachSide(1)参数可以控制当前选中页码两侧各展示1个页码，自动生成首尾省略号，和参考图结构一致：

{{ $pageData->onEachSide(1)->links() }}

如果修改了自定义模板，可以指定模板路径渲染：

{{ $pageData->onEachSide(1)->links('vendor.pagination.bootstrap-5') }}

第四步：（可选）微调CSS匹配样式细节
如果需要和参考图的圆角、间距、颜色完全一致，可以在全局CSS中添加以下样式覆盖默认规则：

.pagination {
  justify-content: center;
}
.pagination .page-link {
  border-radius: 4px;
  margin: 0 3px;
  color: #333;
  border: 1px solid #ddd;
}
.pagination .page-item.active .page-link {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  color: #999;
}