1. 首頁
  2. 問答
  3. 更改導航欄的顏色2.0.4

更改導航欄的顏色2.0.4

2012-06-25 234 views
33

想知道是否有人知道如何更改導航欄的顏色在引導V2.0.4更改導航欄的顏色2.0.4

我想這個解決方案似乎不工作：navbar color in Twitter Bootstrap

任何其他解決方案？我已經嘗試過定製的引導程序包，但是我到目前爲止正在開發中，我可以做出這樣的開關。

代碼：

.navbar-inner { 
    background-color: #2c2c2c; /* fallback color, place your own */ 

    /* Gradients for modern browsers, replace as you see fit */ 
    background-image: -moz-linear-gradient(top, #333333, #222222); 
    background-image: -ms-linear-gradient(top, #333333, #222222); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); 
    background-image: -webkit-linear-gradient(top, #333333, #222222); 
    background-image: -o-linear-gradient(top, #333333, #222222); 
    background-image: linear-gradient(top, #333333, #222222); 
    background-repeat: repeat-x; 

/* IE8-9 gradient filter */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);}

來源

2012-06-25 jacobronniegeorge

+3

你是什麼意思，它似乎並沒有工作？如果您查看瀏覽器的devtools，您的樣式是否會被應用，然後被其他代碼覆蓋？ –

+2

無論你在哪裏，包括bootstrap.css和你自己的覆蓋引導的樣式表，都要確保你的樣式表包含在最後。 – Rooster

+1

欣賞你的評論，我已經覆蓋了'code'background-image，但不是漸變。只要我重寫了這些，我就沒事了，並且得到了我想要的顏色。其次，我已經改變了約翰建議 – jacobronniegeorge

回答

65

導航欄在bootstrap.css來自.navbar-內側線3582至3589的顏色（2.0.4版本）

.navbar-inner in boostrap.css

的CSS屬性包括以特定的順序施加

  • 背景色（所有網絡瀏覽器識別）
  • 供應商前綴-moz，-ms，-webkit，-O（服務於特定的網絡瀏覽器）
  • 標準（但是尚未實現）的背景顏色覆蓋

實施例中boostrap.css與鉻：

background-color:#ffffff;已被替換background-color:#eab92d直接進入boostrap.css（但不建議但它只是爲了說明這一點）。

background-color: #EAB92D施加第一

-moz-linear-gradient和-ms-linear-gradient被忽略

-webkit-gradientbackground: #EAB92D蓋（回默認梯度）

-webkit-linear-gradient覆蓋-webkit-gradient

-o-linear-gradient和linear-gradient被忽略

.navbar-inner with backgroud-color replaced

.navbar-inner with backgroud-color replaced result

變化.navbar-內從colorzilla

的顏色<head>後，您可以輕鬆地創建colorzilla

一個跨瀏覽器的梯度創建<style>標籤bootstrap.css被調用。

然後在<style>標記內複製colorzilla生成的css .navbar-inner {}。

.navbar-inner { 
    background: #eab92d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810',GradientType=0); /* IE6-8 */ 
}

通過colorzilla產生的CSS覆蓋從boostrap.css所有CSS屬性，你可以看到下面

.navbar-inner large

.navbar-inner small enter image description here

更改 '.navbar-內' 是沒有足夠的其他比特需要改變。

.navbar .btn-navbar作爲.navbar-inner

.navbar-inner, .navbar .btn-navbar { 
    background: #eab92d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810',GradientType=0); /* IE6-8 */ 
    }

.divider-vertical（垂直隔板）共享相同的屬性（打開時寬度< 768px菜單的按鈕）使用在梯度中使用的相同的顏色

.navbar .divider-vertical { 
    background-color: #c79810; 
    border-right: 1px solid #eab92d; 
    }

.active（活動頁上的亮點）是對應於梯度的深色

需要 
.navbar .nav .active > a, .navbar .nav .active > a:hover { 
    background-color: #c79810; 
    }

菜單上的鏈接的顏色爲從公平顏色漸變到白以及改變，在這種情況下爲75％。

.navbar .nav > li > a { 
    color: #f9ed9d; 
    }

最後的.brand的顏色，在這種情況下，50％來自於公平的顏色漸變爲白色。

.navbar-fixed-top .brand { 
    color: #634c08;color: #f4dc87; 
    }

的：鏈接懸停顏色沒有發生改變BU可以用：

.navbar .nav > li > a:hover {color:white;}

相同的活動鏈接

.navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}

.navbar-inner result large .navbar-inner result small的顏色

來源

2012-07-04 16:20:28 baptme

+1

優秀的答案！ –

+0

@denoir謝謝。 – baptme

+2

優秀的答案！我正在尋找如何改變文字顏色和其他，你的文章幫助了我很多。 – Bogdan

0

使用Firebug看看。你可以點擊確切的導航欄，並確切地看到哪些CSS樣式適用於它。

來源

2012-07-04 00:46:58 darkAsPitch

14

一個簡單的方法（與得到baptme相同的結果）： 我用它在軌有條件佈局，（創業板自舉SASS）。

在SCSS文件

，導入引導之前，定義一些變量：

$navbarBackground:    #c79810 ; 
$navbarBackgroundHighlight:  #eab92d ; 
$navbarText:      #f9ed9d ; 
$navbarLinkColor:     #f9ed9d ; 
$navbarSearchPlaceholderColor: #EEC844 ; 

@import 'bootstrap' ;

，得到它:)

來源

2012-08-18 03:44:32 Traz

+0

好乾淨的awnser！ – Francois

0

使用Twitter的引導護欄寶石

@navbarBackground:    #c79810 ; 
@navbarBackgroundHighlight:  #eab92d ; 
@navbarText:      #f9ed9d ; 
@navbarLinkColor:     #f9ed9d ; 
@navbarSearchPlaceholderColor: #EEC844 ;

來源

2013-01-26 22:36:44 Nilesh

1

擴展@Traz超的回答言簡意賅少的人如果你只想使用Bootsrap黑暗找導航欄的早期版本，您可以添加.navbar - 逆類導航欄元素。

<div class="navbar navbar-inverse">

來源

2013-03-22 09:50:32

相關問題

 相關問題