如何扩展bootstrap类

Question

我正在使用Bootstrap Twitter做我的第一步,并且需要扩展组件.例如,我想更改导航栏背景,但不更改原始css文件.

我尝试.test使用新背景创建一个新类:

.test{
    background-color: red !important;
}

我在hmtl中调用了它:

 <div class="navbar navbar-fixed-top test">

但是,它不起作用.怎么办呢？

Answer 1

有几种方法可以自定义/扩展Bootstrap类,这些都在这里讨论:Twitter Bootstrap Customization Best Practices

如果您打算使用自己的自定义CSS覆盖boostrap样式,则应避免使用,!important因为这通常是一种不好的做法.

在这种情况下navbar,具有背景颜色的元素是navbar-inner你想要覆盖这样的:

.test .navbar-inner{
    background-color: red;
}

自定义导航栏示例:http://bootply.com/61032