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

2014-09-17 07:25:24 505 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Django实战：学科竞赛管理系统完整设计思路与实现在Web应用开发中，管理系统是企业信息化的常见载体，也是开发者入门后端技术的经典实践。从数据库表结构设计、ORM模型映射到用户认证与权限控制，一套完整的系统往往需要综合运用多项核心技术。Django作为高效的全栈框架，凭借内置的Admin后台、ORM、认证与模板引擎，能够极大缩短此类项目的开发周期，同时保证代码规范性和可维护性。多角色权限管理、流程状态机、文件上传校验、分页筛选等工程实践，也是真实业务场景中的高频需求。以学科竞赛管理为切入点，围绕报名、评审、成绩汇总等核心流程，可以沉淀出一套可复用的管理系统阅读详情

其实解决思路很简单只要，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;

}