2013-02-22 40 views
0

我一直在使用Twitter的引導創建一個導航欄:最簡單的方法來重置引導CSS屬性?

<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,讓我一舉恢復「常規」設置?

+0

不改變引導風格但是你可以在bootstrap.css之後調用你的樣式表,它會覆蓋樣式引導程序 – 2013-02-22 16:42:23

回答

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"> 

我們刪除任何backgroundbox-shadowborder propertyborder-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; 
    } 

要定製hoverfocus風格:

.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; 
    } 
+0

輝煌,這是我使用的overides的巨大改進。謝謝! – 2013-06-27 17:40:09

1

有一個關於這個的視頻(我剛剛發現了Bootstrap幾天前),他們解釋說不會改變提供的CSS,而是覆蓋自己樣式表中的CSS。他們還提到這個樣式表必須在調用引導樣式表之後才能使覆蓋起作用,並且您當然會在覆蓋中調用相同的名稱。視頻在Pluralsight上。

P.S.自從我進入「玩」階段後,我最終在主CSS中更改了導航欄的CSS。此外,引導程序有它自己的css它適用於整個頁面的圖像,所以請注意。

相關問題