Wie würde ich vorgehen, um das CSS zu ändern, um die Farbe der Navigationsleiste in Twitter Bootstrap zu ändern?
tl;dr - TWBSColor - Erzeugen Sie Ihre eigene Bootstrap-Navbar
Versionshinweise:
- Online-Tool: Bootstrap 3.3.2+ / 4.0.0+
- Diese Antwort: Bootstrap 3.0.x
Sie'haben zwei grundlegende Navigationsleisten:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Hier sind die wichtigsten Farben und ihre Verwendung:
#F8F8F8
: Hintergrund der Navigationsleiste#777
: Standardfarbe#333
: Hover-Farbe (#5E5E5E
für .nav-brand
)#555
: aktive Farbe#D5D5D5
: aktiver HintergrundWenn Sie einen benutzerdefinierten Stil verwenden möchten, müssen Sie folgendes CSS ändern:
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
Hier sind vier Beispiele für eine benutzerdefinierte farbige Navigationsleiste:
[JSFiddle-Link][2]
Und der SCSS-Code:
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}
Ich habe gerade ein Skript erstellt, mit dem man sein eigenes Theme generieren kann: TWBSColor - Generieren Sie Ihre eigene Bootstrap-Navbar
[Update]: TWBSColor generiert jetzt SCSS/SASS/Less/CSS-Code.
[Update]: Ab jetzt können Sie Less als Standardsprache von TWBSColor verwenden
[Update]: TWBSColor unterstützt jetzt die Einfärbung von Dropdown-Menüs
[Update]: TWBSColor erlaubt jetzt die Auswahl der Version (Bootstrap 4 Unterstützung hinzugefügt)
Aktualisiert 2018 für Bootstrap 4
Das Ändern der Navbar-Farbe ist in Bootstrap 4 anders (und ein wenig einfacher). Sie können eine benutzerdefinierte Navbar-Klasse erstellen und diese dann referenzieren, um die Navbar zu ändern, ohne andere Bootstrap-Navs zu beeinträchtigen.
<nav class="navbar navbar-custom">...</nav>
Bootstrap 4.0
Das CSS, das zum Ändern der Navbar erforderlich ist, ist in Bootstrap 4 viel weniger...
.navbar-custom {
background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
Bootstrap 4 Custom Navbar Demo
Das Ändern der *Hintergrundfarbe des aktiven/schwebenden Links funktioniert auch mit demselben CSS, aber Sie müssen das Padding anpassen, wenn Sie wollen, dass die Hintergrundfarbe die gesamte Höhe des Links ausfüllt...
py-0", um das vertikale Padding aus der gesamten Navbar zu entfernen...
<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>
/* change the link color and padding */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
padding: .75rem 1rem;
}
/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
background-color: #333;
}
Bootstrap 4 Link und Hintergrundfarbe ändern Demo
Siehe auch: https://stackoverflow.com/questions/42586729/
Bootstrap 3
<nav class="navbar navbar-custom">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
...
</nav>
.navbar-custom {
background-color:#229922;
color:#ffffff;
border-radius:0;
}
.navbar-custom .navbar-nav > li > a {
color:#fff;
}
.navbar-custom .navbar-nav > .active > a {
color: #ffffff;
background-color:transparent;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
text-decoration: none;
background-color: #33aa33;
}
.navbar-custom .navbar-brand {
color:#eeeeee;
}
.navbar-custom .navbar-toggle {
background-color:#eeeeee;
}
.navbar-custom .icon-bar {
background-color:#33aa33;
}
Benutzerdefinierte Navigationsleiste Demo auf Bootply
Wenn die Navbar Dropdowns hat, fügen Sie Folgendes hinzu, um die Farbe(n) der Dropdowns zu ändern:
/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a {
color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus {
color: #33aa33;
}
Sie können auch in Erwägung ziehen, Ihre eigene Version zu kompilieren. Versuchen Sie http://getbootstrap.com/customize/ (die einen eigenen Abschnitt für die Navbar-Einstellungen (Standard-Navbar und Inverted Navbar) hat) oder laden Sie Ihre eigene Kopie von https://github.com/twbs/bootstrap herunter.
Sie finden die Navbar-Einstellungen in variables.less
. Die Datei navbar.less
wird zum Kompilieren der Navbar verwendet (hängt von variables.less
und mixins.less
ab).
Kopieren Sie den Abschnitt 'navbar-default' und tragen Sie Ihre eigenen Farbeinstellungen ein. Das Ändern der Variablen in variables.less
ist der einfachste Weg (das Ändern der Standard-Navbar oder der inversen Navbar ist kein Problem, da Sie nur eine Navbar pro Seite haben).
In den meisten Fällen werden Sie nicht alle Einstellungen ändern:
// Navbar
// -------------------------
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
Sie können auch http://twitterbootstrap3navbars.w3masters.nl/ ausprobieren. Dieses Tool generiert CSS-Code für Ihre benutzerdefinierte Navigationsleiste. Optional können Sie der Navigationsleiste auch Farbverläufe und Rahmen hinzufügen.