最好的方法来覆盖bootstrap的CSS
我需要修改bootstrap.css以适应我的网站。 我觉得最好是创build一个单独的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的最佳实践的理解是正确的，那我该怎么做呢？
编辑：
对不起，让我改进我的问题。 我想删除图例的所有样式，并使用父母的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; }
（我希望有办法做下面的事情:)
legend { clear: all; }
使用!important不是一个好的select，因为你将来很可能会重写你自己的风格。 这给我们留下了CSS的优先事项。
基本上，每个select器都有自己的数字“权重”：
100 points for IDs 10 points for classes and pseudo-classes 1 point for tag selectors and pseudo-elements
在两种select器风格中，浏览器总是会select更多的权重。 您的样式表的顺序只在优先级为偶数时才重要 – 这就是为什么重写Bootstrap并不容易。
你的select是检查引导源，找出如何定义一些特定的样式，并复制该select器，使您的元素具有相同的优先级。 但是我们在这个过程中有点松了Bootstrap的甜头。
解决这个问题的最简单方法是为页面上的一个根元素指定一个额外的任意ID，如下所示： <body id="bootstrap-overrides">
这样，你可以在你的ID前添加任何CSSselect器，立即为元素添加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; }
在你的html的head部分，你的custom.css在bootstrap.css下面。
<link href="bootstrap.min.css" rel="stylesheet"> <link href="custom.css" rel="stylesheet">
然后在custom.css中，你必须为你想要覆盖的元素使用完全相同的select器。 在legend它只是保留在你的custom.css中的legend ，因为bootstrap没有更具体的select器。
legend { display: inline; width: auto; padding: 0; margin: 0; font-size: medium; line-height: normal; color: #000000; border: 0; border-bottom: none; }
但是以h1为例，你必须照顾像.jumbotron h1这样更具体的select器，因为
h1 { line-height: 2; color: #f00; }
将不会覆盖
.jumbotron h1, .jumbotron .h1 { line-height: 1; color: inherit; }
这里是一个有用的解释的特殊性的CSSselect器，你需要了解准确知道哪些样式规则将适用于一个元素。 http://css-tricks.com/specifics-on-css-specificity/
其他一切只是复制/粘贴和编辑样式的问题。
由于您重写了基本样式表的某些部分，因此它不应该影响加载时间。
以下是我个人遵循的一些最佳实践：
- 总是加载自定义CSS后基本的CSS文件（不响应）。
- 尽可能避免使用！ 这可以覆盖从基地的一些重要的风格。
- 如果您不想丢失媒体查询，请在custom.css之后始终加载bootstrap-responsive.css。 – 必须遵循
- 喜欢修改所需的属性（不是全部）…
我希望你现在已经得到了答案
我们在我们的组织遵循这些最佳实践，以实现最佳的定制。
链接您的custom.css文件作为bootstrap.css下的最后一个条目。 Custom.css风格定义将覆盖bootstrap.css
HTML
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet">
复制custom.css中图例的所有样式定义，并在其中进行更改（如margin-bottom：5px; – 这将覆盖margin-bottom：20px;）
如果你打算做出任何相当大的改变，那么让它们直接自我引导并重build它可能是一个好主意。 那么你可以减less一大堆数据的加载。 有关build筑指南，请参阅GitHub上的Bootstrap 。
使用jQuery的css而不是css。 。 。 jQuery的优先比引导的CSS …
例如
$(document).ready(function(){ $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"}); ); instead of .mnu { font-family:myfnt; font-size:20px; color:#006699; }
