Navbar-Farbe in Twitter Bootstrap

113

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?

Tätowierung
quelle
1
Gelöst. Änderungen in bootstrap.css vorgenommen .navbar-inner {Hintergrundfarbe: # 2c2c2c; Hintergrundfarbe geändert, alles andere kommentiert. Vielen Dank.
Tätowierung
12
Es wird nicht empfohlen, das Bootstrap-Haupt-CSS-Stylesheet einfach zu ändern, da beim Aktualisieren des Stylesheets alle Änderungen verloren gehen. Fügen Sie daher alle erforderlichen Änderungen in Ihr eigenes Stylesheet ein.
Andres Ilich
Danke Andres, wie kann man das Verhalten des Bootstraps auf andere Weise ändern? Die Navigationsleiste ist für die meisten Websites ein Problem, da die Benutzer einfach nicht glauben können, dass das Web für die Ästhetik genauso gut ist wie für die Funktionalität.
Tätowierung
4
Sie können die meisten Bootstrap-Regeln in Ihrem eigenen Stylesheet überschreiben. Sie müssen das Stylesheet bootstrap.css überhaupt nicht berühren. Auf diese Weise können Sie beim Aktualisieren des Bootstraps dies sofort aktualisieren und alle Ihre Änderungen bleiben erhalten. Auf diese Weise können Sie auch die Boostrap-Stile überschreiben, um Ihren Anforderungen (Schriftarten oder Farben) Ihrer Site zu entsprechen.
Andres Ilich
Viel einfachere Antwort: stackoverflow.com/questions/18529274/…
Chris Johnson

Antworten:

134

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.

Andres Ilich
quelle
2
background-image: none;sechsmal?
Nowaker
2
@ DamianNowak woh, habe gerade bemerkt, dass, danke für den Tipp: D ultimativer Hirnfurz.
Andres Ilich
Danke dir. Es machte mich verrückt, dass ich die Hintergrundfarbe für nichts festlegen und diese auf die gesamte Navigationsleiste anwenden konnte.
Automatico
30

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:

Alexander Poslavsky
quelle
Wunderbare Ressourcen Alexander. Vielen Dank.
Tätowierung
1
Danke für den Bootswatch Link :)
Akshat Jiwan Sharma
6

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>
JGilmartin
quelle
4

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;
}
paulo62
quelle
3

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.

gauravmunjal
quelle
2

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 *

Ryan
quelle
2

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

user2545728
quelle
1

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.

Roopkunwar
quelle
1

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
}
Krishan Gupta
quelle
1

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.

Ronak Jain
quelle
0

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.

Michael
quelle