Navbar-Farbe in Twitter Bootstrap

Wie kann ich die Hintergrundfarbe der Navigationsleiste des Twitter Bootstrap 2.0.2 ändern? Wie kann ich die Farbe aller Elemente der Navigationsleiste ändern, um die Hintergrundfarbe wiederzugeben?

Sie können die Bootstrap-Farben, einschließlich der .navbar-innerKlasse, überschreiben , indem Sie sie in Ihrem eigenen Stylesheet als Ziel festlegen, anstatt das Bootstrap.css-Stylesheet wie folgt zu ändern:

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

Sie müssen nur alle diese Stile mit Ihren eigenen ändern, und sie werden aufgenommen, wie zum Beispiel so etwas, bei dem ich alle Verlaufseffekte eliminiere und einfach eine feste schwarze Hintergrundfarbe einstelle:

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

Sie können Tools wie den Colorzilla- Verlaufseditor verwenden, eigene Verlaufsfarben für alle Browser erstellen und die Originalfarben durch Ihre eigenen ersetzen.

Und wie ich in den Kommentaren erwähnt habe, würde ich nicht empfehlen, das Stylesheet bootstrap.css direkt zu ändern, da alle Ihre Änderungen verloren gehen, sobald das Stylesheet aktualisiert wird (aktuelle Version ist ^v2.0.2 ). ^Daher wird bevorzugt, dass Sie alle ^einbeziehen Ihre Änderungen in Ihrem eigenen Stylesheet zusammen mit dem Stylesheet bootstrap.css. Denken Sie jedoch daran, alle entsprechenden Eigenschaften zu überschreiben, um die Konsistenz zwischen den Browsern zu gewährleisten.

Eine ausgezeichnete Quelle, um zu sehen, wie man Bootstrap thematisiert, ist: bootswatch.com . Es hat schöne Beispiele und zeigt auch Code. Kurz gesagt, sie verwenden lessc, um die Datei bootstrap.css in Ihre neue color-theme.css neu zu kompilieren. Das Schöne an ihrem Ansatz ist, dass er auf Bootstrap aufbaut. Wenn also Bootstrap aktualisiert wird, kompilieren Sie ihn einfach neu.

Links zur Verwendung von Lessc und Bootstrap:

• Verwenden von Bootstrap mit weniger
• Lessc.org

Wenn Sie keine Zeit haben, "weniger" zu lernen oder es richtig zu machen, ist hier ein schmutziger Hack ...

Fügen Sie dies oben hinzu, wo Sie das HTML der Bootstrap-Navigationsleiste rendern - aktualisieren Sie die Farben nach Bedarf.

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

Sie können eine benutzerdefinierte Version von Bootstrap herunterladen und @navbarBackground auf die gewünschte Farbe einstellen.

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

Ich verwende Bootstrap Version 3.2.0 und es sieht so aus, als ob .navbar-inner nicht mehr existiert.

Die Lösungen hier, die darauf hindeuten, .navbar-inner zu überschreiben, haben bei mir nicht funktioniert - die Farbe blieb gleich.

Die Farbe hat sich nur geändert, als ich .navbar wie unten gezeigt überschrieben habe:

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

Der derzeit beste Weg, dies zu tun, besteht darin, den LESS-Befehlszeilencompiler mit zu installieren

$ npm install -g less jshint recess uglify-js

Wenn Sie dies getan haben, gehen Sie in den Ordner less im Verzeichnis und bearbeiten Sie die Datei variables.less. Sie können viele Variablen entsprechend Ihren Anforderungen ändern, einschließlich der Farbe der Navigationsleiste

@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%);

Sobald Sie dies getan haben, gehen Sie zu Ihrem Bootstrap-Verzeichnis und führen Sie den Befehl make aus.

Wenn Sie WENIGER verwenden, können Sie Mixins für weniger Code verwenden. Hier füge ich einen Verlauf, einen Rand und einen Randradius hinzu:

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

* Wenn Sie das Rails-Juwel Twitter-Bootstrap-Rails verwenden, mache ich dies direkt in der Datei bootstrap_and_overrides.css.less *

das ist was ich mache

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

Es funktioniert gut für alle Navigatoren. Sie können die Demo hier http://caverne.fr oben sehen

In der Zeile 4784 von bootstrap.css sehen wir:

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

Sie müssen alle Eigenschaftsdeklarationen für das Hintergrundbild entfernen, um den gewünschten Effekt zu erzielen.

Würde Occams Rasiermesser nicht sagen, dass Sie dies nur tun sollen, bis Sie etwas Komplexeres benötigen? Es ist ein bisschen wie ein Hack, kann aber den Bedürfnissen von jemandem entsprechen, der eine schnelle Lösung wünscht.

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

Wenn Sie die LESS- oder SASS-Version des Bootstraps verwenden. Am effizientesten ist es, den Variablennamen in der Datei LESS oder SASS zu ändern.

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

Dies ist bei weitem die einfachste und effizienteste Möglichkeit, die Bootstraps-Navigationsleiste zu ändern. Sie müssen keine Überschreibungen schreiben, und der Code bleibt sauber.

Sie können Ihre eigene Version auf der offiziellen Bootstrap-Website anpassen .

Ich überschreibe eigentlich nur alles, was ich in der site.css ändern möchte. Sie sollten die site.css nach dem Bootstrap laden, damit die Klassen überschrieben werden. Was ich jetzt getan habe, ist, meine eigenen Klassen mit meinem eigenen kleinen Bootstrap-Thema zu machen. Kleinigkeiten wie diese

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

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

Auf die gleiche Weise habe ich auch die Art der Validierungsfehler geändert.