最好的方式来覆盖引导css [英] best way to override bootstrap css
问题描述
我需要修改bootstrap.css以适合我的网站。我觉得最好是创建一个单独的custom.css文件，而不是直接修改bootstrap.css，一个原因是，如果bootstrap.css得到更新，我会忍受尝试重新包括所有我的修改。我会牺牲一些载入时间来加载，但对于我压倒的几个样式，它可以忽略不计。
这种思路是正确的，对吗？如果没有，我下面的问题可能是不相干的。
如果是这样，如何覆盖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;
}
我可以删除bootstrap.css中的所有内容，
对不起，让我改进我的问题。我想删除所有这些样式的图例和使用父的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;
}
（我希望有一种方法可以做如下： / p>
legend {
clear：all;
}
使用！important 不是一个好的选择，因为你很可能想要覆盖你自己的风格在未来。这使我们有CSS优先级。
基本上，每个选择器都有自己的数字'weight'：
ID为100分
类和伪类为10分
标签选择器和伪元素为1分
在两个选择器样式中，浏览器总是选择具有更大权重的那个。
您的选择是检查Bootstrap源，了解一些特定的样式，并复制该选择器，使您的元素具有相等的优先级。
解决这个问题的最简单方法是为你的页面上的一个根元素分配额外的任意ID，像这样：< body id =bootstrap-overrides>
选择器与您的ID，立即添加100磅的权重，并重写的元素，并重写Bootstrap定义：
/ * bootstrap中定义的示例选择器* /
.jumbotron h1 {/ * 10 + 1 = 11优先级分数* /
line-height：1;
color：inherit;
}
/ *你在样式中的初始化* /
h1 {/ * 1优先级分数，不足以覆盖Bootstrap jumbotron定义* /
line-height ：1;
color：inherit;
}
/ *新的优先级方式* /
＃bootstrap-overrides h1 {/ * 100 + 1 = 101优先级分数，yay！ * /
line-height：1;
color：inherit;
}
I need to modify bootstrap.css to fit my website. I feel it's better to create a separate custom.css file instead of modifying bootstrap.css directly, one reason being that should bootstrap.css gets an update, I'll suffer trying to re-include all my modifications. I'll sacrifice some load time for loading, but it's negligible for the few styles I'm overriding.
This train of thought is correct, right? If not, my question below may be irrelevant.
If so, how do I override bootstrap.css so that I remove the style for an anchor/class? For example, if I want to remove all the styling rules for 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?
EDIT:
Sorry let me improve my question. I want to remove all those styles for legend and use parent's css values. So combining Pranav's answer, will I be doing the following?
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;
}
Using !important is not a good option, as you will most likely want to override your own styles in the future. That leaves us with CSS priorities.
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
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.
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.
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">
This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element, and overriding Bootstrap definition:
/* 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;
}
这篇关于最好的方式来覆盖引导css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
