Twitter中的導航欄顏色引導程序

Question

如何更改Twitter Bootstrap 2.0.2的導航欄的背景顏色？如何更改導航欄中所有元素的顏色以反映背景顏色？

Answer 1

可以覆蓋引導顏色，包括.navbar-inner類，在你自己的樣式表靶向它，而不是修改bootstrap.css樣式表，如下所示：

.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); 
} 

你只需要修改所有的這些風格與自己的，他們將得到回升，像這樣的事情，例如，在這裏我消除所有漸變效果，只是定了堅實的黑色背景色：

.navbar-inner { 
    background-color: #000; /* background color will be black for all browsers */ 
    background-image: none; 
    background-repeat: no-repeat; 
    filter: none; 
} 

您可以利用Colorzilla Gradient Editor等工具，併爲所有瀏覽器創建自己的漸變顏色，並用自己的顏色替換原來的顏色。

正如我在評論中提到的，我不會建議您直接修改bootstrap.css樣式表，因爲一旦樣式表得到更新，所有更改都將丟失（當前版本爲^v2.0.2），所以它是建議您將所有更改包含在自己的樣式表中，並與bootstrap.css樣式表一起使用。但請記住覆蓋所有適當的屬性以在瀏覽器之間保持一致。

Answer 2

一個很好的資源，看如何主題引導是：bootswatch.com。它有很好的例子，並顯示代碼。簡而言之，他們使用lessc來將bootstrap.css重新編譯到新的color-theme.css中。他們的方法的好處是建立在bootstrap之上，所以當bootstrap更新時，你只需重新編譯。

鏈接有關使用lessc和引導：

• Using bootstrap with less
• Lessc.org

Answer 3

如果您使用LESS，則可以使用Mixins獲取更少的代碼。在這裏，我將添加一個漸變，邊框和邊界半徑：

.navbar-inner { 
    #gradient > .vertical(#ffffff, #ECECEC); 
    border: #E2E2E2; 
    .border-radius(6px); 
} 

*如果您使用的是軌道寶石，Twitter的引導護欄，我直接在文件bootstrap_and_overrides.css.less做到這一點*

Answer 4

您可以下載自定義版本的bootstrap並將@navbarBackground設置爲所需的顏色。

http://twitter.github.com/bootstrap/customize.html

Answer 5

目前做同樣會使用

$ npm install -g less jshint recess uglify-js 

安裝LESS命令行編譯器一旦你做到了這一點，然後去少的文件夾目錄，然後最好的方法編輯文件variables.less，你可以根據你需要改變很多變量，包括導航欄的顏色

@navbarCollapseWidth:    979px; 

@navbarHeight:     40px; 
@navbarBackgroundHighlight:  #ffffff; 
@navbarBackground:    darken(@navbarBackgroundHighlight, 5%); 
@navbarBorder:     darken(@navbarBackground, 12%); 

@navbarText:      #777; 
@navbarLinkColor:     #777; 
@navbarLinkColorHover:   @grayDark; 
@navbarLinkColorActive:   @gray; 
@navbarLinkBackgroundHover:  transparent; 
@navbarLinkBackgroundActive:  darken(@navbarBackground, 5%); 

完成此操作後，轉至引導目錄並運行make命令。

Answer 6

如果你還沒有得到時間來學習「少」或做正確，這裏有一個骯髒的黑客...

添加這上面，你渲染引導的導航欄HTML - 如需要更新的顏色..

<style type="text/css"> 

.navbar-inner { 
    background-color: red; 
    background-image: linear-gradient(to bottom, blue, green); 
    background-repeat: repeat-x; 
    border: 1px solid yellow; 
    border-radius: 4px 4px 4px 4px; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); 
    min-height: 40px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

.dropdown-menu { 
    background-clip: padding-box; 
    background-color: red; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 6px 6px 6px 6px; 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    display: none; 
    float: left; 
    left: 0; 
    list-style: none outside none; 
    margin: 2px 0 0; 
    min-width: 160px; 
    padding: 5px 0; 
    position: absolute; 
    top: 100%; 
    z-index: 1000; 
} 

.btn-group.open .btn.dropdown-toggle { 
    background-color: red; 
} 

.btn-group.open .btn.dropdown-toggle { 
    background-color:lime; 
} 

.navbar .nav li.dropdown.open > .dropdown-toggle, 
.navbar .nav li.dropdown.active > .dropdown-toggle, 
.navbar .nav li.dropdown.open.active > .dropdown-toggle { 
    color:white; 
    background-color:Teal; 
} 

.navbar .nav > li > a { 
    color: white; 
    float: none; 
    padding: 10px 15px; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #ffffff; 
} 

.navbar .brand { 
    display: block; 
    float: left; 
    padding: 10px 20px 10px; 
    margin-left: -20px; 
    font-size: 20px; 
    font-weight: 200; 
    color: white; 
    text-shadow: 0 0px 0 #ffffff; 
} 

.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover { 
    color: white; 
    text-decoration: none; 
    background-color: transparent; 
} 

.navbar-text { 
    margin-bottom: 0; 
    line-height: 40px; 
    color: white; 
} 

.dropdown-menu li > a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 20px; 
    color: white; 
    white-space: nowrap; 
} 

.navbar-link { 
    color: white; 
} 

.navbar-link:hover { 
    color: white; 
} 

</style> 

Answer 7

這是我做的

.navbar-inverse .navbar-inner { 
    background-color: #E27403; /* it's flat*/ 
background-image: none; 
} 

.navbar-inverse .navbar-inner { 
    background-image: -ms-linear-gradient(top, #E27403, #E49037); 
    background-image: -webkit-linear-gradient(top, #E27403, #E49037); 
    background-image: linear-gradient(to bottom, #E27403, #E49037); 
} 

它非常適用於所有導航 你可以看到演示這裏http://caverne.fr頂部

Answer 8

在bootstrap.css線4784，我們看到：

.navbar-inverse .navbar-inner { 
    background-color: #FFFFFFF; 
    background-image: -moz-linear-gradient(top, #222222, #111111); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); 
    background-image: -webkit-linear-gradient(top, #222222, #111111); 
    background-image: -o-linear-gradient(top, #222222, #111111); 
    background-image: linear-gradient(to bottom, #222222, #111111); 
    background-repeat: repeat-x; 
    border-color: #252525; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); 
} 

您需要刪除所有的「背景圖片」財產申報，以獲得所需的效果。

Answer 9

您可以在Bootstrap official website上自定義您自己的版本。

Answer 10

不會occam的剃鬚刀說，只是這樣做，直到你需要更復雜的東西？這有點破解，但可能適合需要快速修復的人的需求。

.navbar-default .container-fluid{ 
    background-color:#62ADD7; // Change the color 
    margin: -1px -1px 10px -1px; // Get rid of the border 
} 

Answer 11

我正在使用Bootstrap 3.2.0版，看起來好像.navbar-inner不再存在。

這裏建議覆蓋.navbar-inner的解決方案對我無效 - 顏色保持不變。

的顏色，當我推翻.navbar如下圖所示只改：

.navbar { 
    background-color: #A4C8EC; 
    background-image: none; 
} 

Answer 12

其實我只是簡單地覆蓋任何東西我想在的site.css改變，你應該加載引導後的site.css所以將覆蓋這些類。我現在所做的就是用我自己的小引導主題製作我自己的課程。像這樣的小東西

.navbar-nav li a{ 
    color: #fff; 
    font-size: 15px; 
    margin-top: 9px; 
} 
.navbar-nav li a:hover{ 

    background-color: #18678E; 
    height: 61px; 
} 

我也以同樣的方式改變了驗證錯誤之類的東西。

Answer 13

如果您使用Bootstrap的LESS或SASS版本。最有效的方法是在LESS或SASS文件中更改變量名稱。

$navbar-default-color:    #FFFFFF !default; 
$navbar-default-bg:     #36669d !default; 
$navbar-default-border:    $navbar-default-bg !default; 

這是迄今爲止最簡單和最有效的方法來改變Bootstraps導航欄。您不需要重寫，代碼仍然保持清潔。