Question

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

我可以通过更改navlink类中的属性来轻松覆盖字体颜色，填充等。但是，导航栏列表中的链接（例如默认情况下在Twitter Bootstrap中具有大量文本阴影/渐变属性）。唯一的方法是覆盖这些以将每个属性设置为某个默认级别，或者CSS中是否存在允许我恢复＆＃34;常规＆＃34;设置一举？

Answer 1

您可以通过以下方式完成此操作：

创建一个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">

现在要删除导航栏上的所有background box-shadow或border property和border-radius，您可以执行以下操作：

.navbar-inner{
 background:none;
 filter:none;
 box-shadow:none;
 border-radius:0px;
 border:none;
}

要自定义navbar links，您可以执行以下操作（此处设置任何值或此处的任何新属性将覆盖默认值）：

.navbar .nav > li > a{

    padding:5px;
text-shadow:none;
  }

要自定义hover和focus样式：

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
     color: #333333;
     text-decoration: none;
     background-color: transparent;
 }

为链接自定义active课程：

.navbar .nav .active > a{
color:#ccc;
background:none;
box-shadow:none;
   }

 .navbar .nav .active > a:hover{
background:none;
box-shadow:none;
   }

Answer 2

有一个关于这个的视频（我刚刚发现了几天前的Bootstrap），他们解释说不要改变提供的css，而是覆盖你自己的样式表中的css。他们还提到这个样式表必须在调用bootstrap样式表之后才能使覆盖工作，你当然会在覆盖中调用相同的名字。该视频是在Pluralsight上进行的。

P.S。因为我正在“玩”阶段，我最终改变了主css中导航栏的css。此外，bootstrap有自己的css，它适用于整个页面的图像，所以要小心。

重置Bootstrap CSS属性的最简单方法？

2 个答案: