2012-11-18 143 views
0

我想更改Twitter Bootstrap的外觀。我基本知道這是如何工作的,並設置了一切&工作。在Twitter中覆蓋CSS屬性引導

默認情況下,.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; 
} 

以確保最大的瀏覽器兼容性?

使用第一個選項適用於我,它看起來比所有前綴都好,但我擔心有些瀏覽器不會理解它。

+0

請點擊此處查看哪些瀏覽器實際需要這些供應商前綴,您可能會感到驚訝:http://caniuse.com/#search=border-radius –

+0

我不知道這是否只是我,但我可以找不到有關前綴的信息。然而,這個資源說它可以安全地使用沒有前綴,所以我想知道他們爲什麼仍然使用前綴。 http://html5please.com/#border-radius但我猜這是另一個問題。 – Sven

+0

點擊「顯示所有版本」。任何具有'-prefix'的單元格意味着該瀏覽器的版本需要它(現在沒有多少)。我實際上會說這兩個邊界半徑的前綴都不是必需的,但是取決於你。 –

回答

2

如果您想覆蓋所有舊版瀏覽器,則必須使用前綴。這就是bootstrap包含前綴的原因。

如果你只使用未加前綴的版本,即只實現了前綴的版本將不能正確地解釋未加前綴的版本並不會改變舊的瀏覽器/清零。