如何扩展引导程序类 [英] How extend bootstrap classes
问题描述
我正在使用Bootstrap Twitter做我的第一步,需要扩展组件。
例如,我想更改导航栏背景,但不更改原始的CSS文件。
I am doing my first steps with Bootstrap Twitter, and need to extend components. For example, I would like to change the navbar background, but without changing the original css file.
我尝试创建一个新类 .test
并具有新的背景:
I tried to create a new class .test
with the new background:
.test{
background-color: red !important;
}
我在hmtl中将其调用为:
And I've invoked it in the hmtl as:
<div class="navbar navbar-fixed-top test">
但是,它不起作用。
该怎么办?
But, it doesn't work. How can do this?
推荐答案
有几种自定义/扩展Bootstrap类的方法。 : Twitter Bootstrap定制最佳实践
There are a few ways to customize/extend Bootstrap classes which are all discussed here: Twitter Bootstrap Customization Best Practices
如果您打算使用自己的自定义CSS覆盖boostrap样式,则应避免使用!important
,因为这通常是一种不好的做法。
If you intend to override the boostrap styles with your own custom CSS you should avoid using !important
as this is generally a bad practice.
对于 navbar
,具有背景颜色的元素为 navbar-inner
,所以您想这样覆盖:
In the case of the navbar
, the element that has the background-color is navbar-inner
so you'd want to override like this:
.test .navbar-inner{
background-color: red;
}
自定义导航栏示例: http://bootply.com/61032
< a href = https://stackoverflow.com/questions/45776055/how-to-extend-modify-customize-bootstrap-4-with-sass>如何使用SASS扩展/修改(自定义)Bootstrap 4
这篇关于如何扩展引导程序类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!