如何扩展引导​​类

2022-01-21 00:00:00 extend css components twitter-bootstrap

我正在使用 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

如何扩展/修改(自定义)Bootstrap 4SASS

相关文章