【四】laravel调整分页样式

1.使用 vendor:publish 命令导出视图文件到resources/views/vendor 目录

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

2.在AppServiceProvider.php文件的 boot方法中增加分页视图的调整

public function boot()
{
    Paginator::defaultView('vendor.pagination.bootstrap-4');
}

3.bootstrap 的分页样式 css

.pagination {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #333333;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    color: #b3b3b3;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 3;
    color: #fff;
    background-color: #006fc4;
    border-color: #006fc4;
    cursor: default;
}

.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    z-index: 2;
    color: #fff;
    background-color: #006fc4;
    border-color: #006fc4;
}

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏

• 上一篇： 【三】phpstorm2021.1 增加laravel代码提示
• 下一篇： 英文武侠小说网站