Html 如何覆盖 Bootstrap CSS 样式？

Question

提问by Alex

I need to modify bootstrap.cssto fit my website. I feel it's better to create a separate custom.cssfile instead of modifying bootstrap.cssdirectly, one reason being that should bootstrap.cssget an update, I'll suffer trying to re-include all my modifications. I'll sacrifice some load time for these styles, but it's negligible for the few styles I'm overriding.

我需要修改bootstrap.css以适应我的网站。我觉得最好创建一个单独的custom.css文件而不是bootstrap.css直接修改，一个原因是应该bootstrap.css得到更新，我会尝试重新包含我的所有修改。我会为这些样式牺牲一些加载时间，但对于我覆盖的少数样式可以忽略不计。

Hw do I override bootstrap.cssso that I removethe style of an anchor/class? For example, if I want to remove all the styling rules for legend:

如何覆盖bootstrap.css以便删除锚点/类的样式？例如，如果我想删除所有样式规则legend：

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

I can just delete all that in bootstrap.css, but if my understanding about best practices on overriding CSS is correct, what should I do instead?

我可以删除中的所有内容bootstrap.css，但如果我对覆盖 CSS 的最佳实践的理解是正确的，我应该怎么做？

To be clear, I want to remove all those styles of legend and use parent's CSS values. So combining Pranav's answer, will I be doing the following?

明确地说，我想删除所有这些图例样式并使用父级的 CSS 值。所以结合 Pranav 的回答，我会做以下事情吗？

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(I was hoping there's a way to do something like the following:)

（我希望有一种方法可以执行以下操作：）

legend {
  clear: all;
}

Answer 1

回答by smugglerFlynn

Using !importantis not a good option, as you will most likely want to override your own styles in the future. That leaves us with CSS priorities.

使用!important不是一个好的选择，因为您将来很可能希望覆盖自己的样式。这给我们留下了 CSS 优先级。

Basically, every selector has its own numerical 'weight':

基本上，每个选择器都有自己的数字“权重”：

100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins(1000 points)

身100分
类和伪类 10 分
标签选择器和伪元素1分
注意：如果元素具有自动获胜的内联样式（1000 分）

Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.

在两种选择器样式中，浏览器将始终选择权重较大的一种。样式表的顺序仅在优先级相等时才重要 - 这就是覆盖 Bootstrap 并不容易的原因。

Your option is to inspect Bootstrap sources, find out how exactly some specific style is defined, and copy that selector so your element has equal priority. But we kinda loose all Bootstrap sweetness in the process.

您的选择是检查 Bootstrap 源，找出某些特定样式的确切定义方式，然后复制该选择器，使您的元素具有相同的优先级。但是我们在这个过程中有点失去了所有 Bootstrap 的好处。

The easiest way to overcome this is to assign additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">

解决此问题的最简单方法是为页面上的根元素之一分配额外的任意 ID，如下所示： <body id="bootstrap-overrides">

This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element, and overriding Bootstrap definitions:

这样，您可以在任何 CSS 选择器前面加上您的 ID，立即为元素添加 100 点权重，并覆盖 Bootstrap 定义：

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

Answer 2

回答by Markus Kottl?nder

In the head section of your html place your custom.css below bootstrap.css.

在 html 的 head 部分，将 custom.css 放在 bootstrap.css 之下。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Then in custom.css you have to use the exact same selector for the element you want to override. In the case of legendit just stays legendin your custom.css because bootstrap hasn't got any selectors more specific.

然后在 custom.css 中，您必须对要覆盖的元素使用完全相同的选择器。在这种情况下，legend它只保留legend在您的 custom.css 中，因为引导程序没有任何更具体的选择器。

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

But in case of h1for example you have to take care of the more specific selectors like .jumbotron h1because

但在情况下，h1例如，你必须采取更具体的选择喜欢的护理.jumbotron h1，因为

h1 {
  line-height: 2;
  color: #f00;
}

will not override

不会覆盖

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Here is a helpfull explantion of specificity of css selectors which you need to understand to know exactly which style rules will apply to an element. http://css-tricks.com/specifics-on-css-specificity/

这是对 css 选择器的特殊性的有用解释，您需要了解它才能确切知道哪些样式规则将应用于元素。 http://css-tricks.com/specifics-on-css-specificity/

Everything else is just a matter of copy/paste and edit styles.

其他一切都只是复制/粘贴和编辑样式的问题。

Answer 3

回答by Rahul Patil

It should not effect the load time much since you are overriding parts of the base stylesheet.

由于您覆盖了基本样式表的一部分，因此它不会对加载时间产生太大影响。

Here are some best practices I personally follow:

以下是我个人遵循的一些最佳实践：

Always load custom CSS after the base CSS file (not responsive).
Avoid using !importantif possible. That can override some important styles from the base CSS files.
Always load bootstrap-responsive.css after custom.css if you don't want to lose media queries. - MUST FOLLOW
Prefer modifying required properties (not all).

始终在基本 CSS 文件之后加载自定义 CSS（不响应）。
尽量避免使用!important。这可以覆盖基本 CSS 文件中的一些重要样式。
如果您不想丢失媒体查询，请始终在 custom.css 之后加载 bootstrap-responsive.css。- 必须遵循
更喜欢修改所需的属性（不是全部）。

Answer 4

回答by Paramasivan

Link your custom.css file as the last entry below the bootstrap.css. Custom.css style definitions will override bootstrap.css

将您的 custom.css 文件链接为 bootstrap.css 下方的最后一个条目。Custom.css 样式定义将覆盖 bootstrap.css

Html

html

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Copy all style definitions of legend in custom.css and make changes in it (like margin-bottom:5px; -- This will overrider margin-bottom:20px; )

在 custom.css 中复制图例的所有样式定义并在其中进行更改（例如 margin-bottom:5px; -- 这将覆盖 margin-bottom:20px; ）

Answer 5

回答by Vivek Athalye

To reset the styles defined for legendin bootstrap, you can do following in your css file:

要重置legendbootstrap 中定义的样式，您可以在 css 文件中执行以下操作：

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all/

参考：https: //css-tricks.com/almanac/properties/a/all/

The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction.

CSS 中的 all 属性重置所有选定元素的属性，除了控制文本方向的方向和 unicode-bidi 属性。

Possible values are: initial, inherit& unset.

可能的值是：initial, inherit& unset。

Side note: clearproperty is used in relation with float(https://css-tricks.com/almanac/properties/c/clear/)

旁注：clear属性与float（https://css-tricks.com/almanac/properties/c/clear/）相关使用

Answer 6

回答by konyak

See https://bootstrap.themes.guide/how-to-customize-bootstrap.html

见https://bootstrap.themes.guide/how-to-customize-bootstrap.html

For simple CSS Overrides, you can add a custom.css below the bootstrap.css

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

For more extensive changes, SASS is the recommended method.

create your own custom.scss
import Bootstrap after the changes in custom.scss

For example, let's change the body background-color to light-gray #eeeeee, and change the blue primary contextual color to Bootstrap's $purple variable...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

对于简单的 CSS Overrides，你可以在 bootstrap.css 下面添加一个 custom.css

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

对于更广泛的更改，推荐使用 SASS 方法。

创建您自己的 custom.scss
在 custom.scss 更改后导入 Bootstrap

例如，让我们将正文背景颜色更改为浅灰色 #eeeeee，并将蓝色主要上下文颜色更改为 Bootstrap 的 $purple 变量...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Answer 7

回答by Victor H?ggqvist

If you are planning to make any rather big changes, it might be a good idea to make them directly in bootstrap itself and rebuild it. Then, you could reduce the amount of data loaded.

如果您打算进行任何相当大的更改，那么直接在引导程序本身中进行更改并重建它可能是个好主意。然后，您可以减少加载的数据量。

Please refer to Bootstrap on GitHubfor the build guide.

有关构建指南，请参阅GitHub 上的 Bootstrap。

Answer 8

回答by mr5

A bit late but what I did is I added a class to the root divthen extends every bootstrap elements in my custom stylesheet:

有点晚了，但我所做的是向根添加了一个类，div然后扩展了自定义样式表中的每个引导程序元素：

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

Answer 9

回答by Anand Chaudhary

Inspect the target button on the console.
Go to elements tab then hover over the code and be sure to find the default id or class used by the bootstrap.
Use jQuery/javascript to overwrite the style/text by calling the function.

检查控制台上的目标按钮。
转到元素选项卡，然后将鼠标悬停在代码上，并确保找到引导程序使用的默认 ID 或类。
使用 jQuery/javascript 通过调用函数覆盖样式/文本。

See this example:

看这个例子：

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

Answer 10

回答by Henry

I found out that (bootstrap 4) putting your own CSS behind bootstrap.cssand .js is the best solution.

我发现 (bootstrap 4) 把你自己的 CSS 放在后面bootstrap.css，.js 是最好的解决方案。

Find the item you want to change (inspect element) and use the exact same declaration then it will override.

找到您要更改的项目（检查元素）并使用完全相同的声明，然后它将被覆盖。

It took me some little time to figure this out.

我花了一些时间才弄明白这一点。

Html 如何覆盖 Bootstrap CSS 样式？

提问by Alex

回答by smugglerFlynn

回答by Markus Kottl?nder

回答by Rahul Patil

回答by Paramasivan

回答by Vivek Athalye

回答by konyak

回答by Victor H?ggqvist

回答by mr5

回答by Anand Chaudhary

回答by Henry

相关推荐

最近更新

标签

Html 如何覆盖 Bootstrap CSS 样式？

提问by Alex

回答by smugglerFlynn

回答by Markus Kottl?nder

回答by Rahul Patil

回答by Paramasivan

回答by Vivek Athalye

回答by konyak

回答by Victor H?ggqvist

回答by mr5

回答by Anand Chaudhary

回答by Henry

相关推荐

Html 向左溢出而不是向右溢出

如何显示？在 html 中播放（前进）或实心右箭头符号？

俄罗斯卢布符号 HTML 代码？

Html HTML5 验证错误：看到正文开始标记，但已打开相同类型的元素

相关推荐

最近更新

标签