解决bootstrap-paginator的CSS与原生bootstrap CSS冲突问题

其实解决思路很简单只要，bootstrap-paginator所用到的bootstrap.min.css中的css元素提取出来，并放入原生bootstrap.min.css，不使用bootstrap-paginator的bootstrap.min.css就好了。

我用火狐一个一个提取出了这些Css元素，你们直接复制就好了：

form {
    margin: 0 0 20px;
}
.pagination-centered {
    text-align: center;
}
.pagination {
    margin: 20px 0;
}
.pagination ul {
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0;
}
ul, ol {
    margin: 0 0 10px 25px;
    padding: 0;
}
.pagination ul > li {
    display: inline;
}
li {
    line-height: 20px;
}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
    border-bottom-left-radius: 4px;
    border-left-width: 1px;
    border-top-left-radius: 4px;
}
.pagination ul > li:last-child > a, .pagination ul > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.pagination ul > li > a, .pagination ul > li > span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #fff;
    border-color: #ddd;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    line-height: 20px;
    padding: 4px 12px;
    text-decoration: none;
    cursor:pointer;
}
.pagination ul > .active > a, .pagination ul > .active > span {
    color: #999;
    cursor: default;
}
.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span {
    background-color: #f5f5f5;
}

2 个解决方案

#1

先引用bootstrap.css 再引用插件, 后者会覆盖前者的同名样式

#2