如何扩展引导​​程序类 [英] 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屋！