0

我有一个使用 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 中有一些东西可以让我一举恢复“常规”设置？

4

2 回答 2

5

您可以通过以下方式执行此操作：

创建一个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;
   }
于 2013-02-23T03:42:11.280 回答
1

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

PS我最终改变了主css中导航栏的css，因为我处于“播放”阶段。此外，bootstrap 有它自己的 css，它适用于整个页面的图像，所以要注意这一点。

于 2013-02-22T16:28:20.547 回答