在Twitter Bootstrap中覆盖CSS属性

时间:2012-11-18 17:34:51

标签: css twitter-bootstrap

我想改变Twitter Bootstrap的外观。我基本上知道这是如何工作的,并且设置了所有东西。工作

默认情况下,.navbar-inner具有边框半径。看看它是如何在下面声明的 - 它们使用了前缀。

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

现在让我说我不希望border-radius。我必须像这样写吗

.navbar-inner {
    border-radius: 0;
}

或者像这样

.navbar-inner {
    -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

确保最大程度的浏览器兼容性?

使用第一个选项适用于我,它看起来比使用所有前缀更好,但我担心某些浏览器不会理解它。

1 个答案:

答案 0 :(得分:2)

如果要覆盖所有旧浏览器,则必须使用前缀。这就是bootstrap开始包含前缀的原因。

如果您只使用未加前缀的版本,那么只实现前缀版本的旧浏览器将无法正确解释未加前缀的版本,也不会更改/清零。