ngx 分页。我可以与 Bootstrap 一起使用吗？答案

【问题标题】：ngx Pagination. Can I use with Bootstrap?ngx 分页。我可以与 Bootstrap 一起使用吗？
【发布时间】：2018-06-01 06:21:18
【问题描述】：

我想问一下是否可以将一些引导程序的分页用于 ngx 分页？我想使用来自 ngx Pagination 的机制和来自 bootstrap 的 css。

【问题讨论】：

标签： css angular bootstrap-4

【解决方案1】：

在“ngx-pagination”组件上应用引导样式

安装 ngx-pagination 后，将此样式添加到自定义样式表或组件相关样式文件中

.ngx-pagination{
    margin-bottom:0 !important;
}
.ngx-pagination li{
    margin-right: -1px !important;
}
.ngx-pagination li.current{
    background-color: #007bff !important;
    border: 1px solid #007bff !important;
    padding: 6px 12px !important;
    z-index: 999999 !important;
    position: relative;
}
.ngx-pagination li a:focus{
    outline:none;
}
.ngx-pagination a, .ngx-pagination button{
    color: #007bff !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    padding: 6px 12px !important;

}
.ngx-pagination .disabled{
    color: #6c757d !important;
    pointer-events: none  !important;
    cursor: auto  !important;
    background-color: #fff  !important;
    border: 1px solid #dee2e6  !important;
    padding: 6px 12px !important;
}

【讨论】：

【解决方案2】：

您可以使用自己的模板并自定义样式，如果您希望这样做看起来像引导程序：

https://github.com/michaelbromley/ngx-pagination#paginationcontrolsdirective

https://github.com/michaelbromley/ngx-pagination#styling

这里有一个例子：

http://michaelbromley.github.io/ngx-pagination/#/custom-template

或者你可以使用ngx-bootstrap :)

https://valor-software.com/ngx-bootstrap/#/pagination

【讨论】：