NGX分页.我可以与Bootstrap一起使用

Question

我想问这可能会使用一些Bootstrap的Paginatinon进行NGX分页吗？我想使用来自NGX分页的机制和Bootstrap的CSS。

Answer 1

您可以使用自己的模板并自定义样式，如果您想做的是看起来像bootstrap：

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

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

这里的一个示例：

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

，也可以使用ngx-bootstrap：）

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

Answer 2

在" ngx-pagination"上应用Bootstrap样式。组件

安装NGX-pagation后，将此样式添加到您的自定义样式表或组件相关样式文件

中

.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;
}