我正在学习 Bootstrap Twitter 的初级使用,并且需要扩展组件。例如,我想要更改导航栏的背景,但是不想更改原始的 CSS 文件。
我尝试创建一个带有新背景的新类 .test
:
.test{
background-color: red !important;
}
我已在HTML中调用它:
<div class="navbar navbar-fixed-top test">
但是,它不起作用。 如何做到这一点?
我正在学习 Bootstrap Twitter 的初级使用,并且需要扩展组件。例如,我想要更改导航栏的背景,但是不想更改原始的 CSS 文件。
我尝试创建一个带有新背景的新类 .test
:
.test{
background-color: red !important;
}
我已在HTML中调用它:
<div class="navbar navbar-fixed-top test">
但是,它不起作用。 如何做到这一点?
这里有几种自定义/扩展Bootstrap类的方法,都在这里讨论了:Twitter Bootstrap Customization Best Practices
如果您打算用自己的定制CSS覆盖boostrap样式,则应避免使用 !important
,因为这通常是一种不好的做法。
在 navbar
的情况下,具有背景颜色的元素是 navbar-inner
,因此您需要像这样覆盖:
.test .navbar-inner{
background-color: red;
}
自定义导航栏示例:http://bootply.com/61032