twitter-bootstrap 重置 Bootstrap CSS 属性的最简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15028702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easiest Way to Reset Bootstrap CSS attributes?
提问by user1427661
I have a navbar created using Twitter Bootstrap:
我有一个使用 Twitter Bootstrap 创建的导航栏：
<div class="navbar-inner navlinks">
<ul class="nav">
<li><a class="brand" href="#"><img src="img/logo.png" /></a></li>
<li><a href="#">Accueil</a></li>
<li><a href="#">Ouvrez</a></li>
<li><a href="#">Decouvrir</a></li>
</ul>
</div>
I can override the font colors, padding, etc. easily enough by changing attributes in my navlinkclass. However, links within a navbar list such as this have a ton of text shadowing/gradient attributes by default in Twitter Bootstrap. Is the only way to override these to set each attribute to some default level, or is there something in CSS that will allow me to restore the "regular" settings in one fell swoop?
通过更改我的navlink类中的属性，我可以很容易地覆盖字体颜色、填充等。但是，默认情况下，在 Twitter Bootstrap 中，像这样的导航栏列表中的链接具有大量的文本阴影/渐变属性。是覆盖这些以将每个属性设置为某个默认级别的唯一方法，还是 CSS 中的某些内容可以让我一举恢复“常规”设置？
回答by Shail
You can do it in the following way :
您可以通过以下方式进行：
Create a new css fileand place it after the bootstrap.css file so that it can override any default property you dont wanna use .Like the example below :-
创建一个new css file并将其放在 bootstrap.css 文件之后，以便它可以覆盖您不想使用的任何默认属性。如下例所示：-
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
Now to remove any backgroundbox-shadowor border propertyand border-radius, on your navbar you can do the following :
现在要删除任何backgroundbox-shadow或border property和border-radius，在导航栏上，您可以执行以下操作：
.navbar-inner{
background:none;
filter:none;
box-shadow:none;
border-radius:0px;
border:none;
}
To customize navbar links, you can do the following(set any values here or any new property here will override the default) :
要自定义navbar links，您可以执行以下操作（在此处设置任何值或此处的任何新属性将覆盖默认值）：
.navbar .nav > li > a{
padding:5px;
text-shadow:none;
}
To customize hoverand on focusstyles :
要自定义hover和focus样式：
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #333333;
text-decoration: none;
background-color: transparent;
}
To customize activeclass for links :
自定义active链接类：
.navbar .nav .active > a{
color:#ccc;
background:none;
box-shadow:none;
}
.navbar .nav .active > a:hover{
background:none;
box-shadow:none;
}
回答by Savanetech
There was a video about this (I just found out about Bootstrap a few days ago) and they explained to not alter the supplied css and instead override the css in your own stylesheet. They also mentioned this stylesheet has to come AFTER the bootstrap style sheet is called in order for the override to work, and you of course would call the same names in your override. The video was on Pluralsight.
有一个关于这个的视频（我几天前才发现 Bootstrap），他们解释说不要改变提供的 css，而是在你自己的样式表中覆盖 css。他们还提到这个样式表必须在调用引导样式表之后才能使覆盖起作用，并且您当然会在覆盖中调用相同的名称。该视频在 Pluralsight 上。
P.S. I ended up altering the css for navbar in the main css since I'm in the "playing" stage. Also, bootstrap has it's own css it applies for images for your entire page, so watch out for that.
PS 我最终在主 css 中更改了导航栏的 css，因为我处于“播放”阶段。此外，bootstrap 有它自己的 css，它适用于整个页面的图像，所以要注意这一点。
