Jak powinienem zmodyfikować CSS, aby zmienić kolor paska nawigacyjnego w programie Bootstrap na Twitterze?
tl; dr - TWBSColor - Wygeneruj własny pasek nawigacyjny Bootstrap
Uwagi do wersji: - Narzędzie online: Bootstrap 3.3.2+ / 4.0.0+ - Ta odpowiedź: Bootstrap 3.0.x
Masz dwa podstawowe paski nawigacyjne:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Oto główne kolory i ich użycie:
#F8F8F8: tło paska nawigacyjnego#E7E7E7: granica paska nawigacyjnego#777: domyślny kolor#333: kolor aktywacji ( #5E5E5Edla .nav-brand)#555: aktywny kolor#D5D5D5: aktywne tłoJeśli chcesz umieścić niestandardowy styl, oto CSS, który musisz zmienić:
/* 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;
}
}
Oto cztery przykłady niestandardowego kolorowego paska nawigacyjnego:
I kod SCSS:
$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; }}}
}
Właśnie stworzyłem skrypt, który pozwoli Ci wygenerować motyw: TWBSColor - Wygeneruj własny pasek nawigacyjny Bootstrap
[Aktualizacja]: TWBSColor generuje teraz kod SCSS / SASS / Less / CSS.
[Aktualizacja]: Od teraz możesz używać Less jako domyślnego języka dostarczanego przez TWBSColor
[Aktualizacja]: TWBSColor obsługuje teraz kolorowanie menu rozwijanych
[Aktualizacja]: TWBSColor pozwala teraz wybrać wersję (dodano obsługę Bootstrap 4)
!importantWydaje się, że dodanie na końcu każdej z wygenerowanych instrukcji CSS rozwiązało problem. Przykład:color: #ffffff;staje sięcolor: #ffffff !important;.Aktualizacja 2020
Zmiana koloru paska nawigacyjnego jest inna (i nieco łatwiejsza) w Bootstrap 4 . Możesz utworzyć niestandardową klasę paska nawigacyjnego, a następnie odwołać się do niej, aby zmienić pasek nawigacyjny bez wpływu na inne nawigacje Bootstrap
Bootstrap 4.3+
CSS wymagany do zmiany paska nawigacyjnego jest znacznie mniejszy w Bootstrap 4 ...
Bootstrap 4 Niestandardowa wersja paska nawigacyjnego
Zmiana koloru tła aktywnego / najechania kursorem działa również z tym samym CSS, ale musisz dostosować wypełnienie, jeśli chcesz, aby kolor bg wypełniał pełną wysokość łącza ...
py-0aby usunąć pionowe wypełnienie z całego paska nawigacyjnego ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Bootstrap 4 Zmień link i demonstrację koloru tła
Zobacz także: Bootstrap 4 Zmień kolor Hamburger Toggler
Bootstrap 3
Niestandardowa wersja demonstracyjna paska nawigacyjnego podczas uruchamiania
Jeśli pasek nawigacyjny ma menu rozwijane, dodaj następujące elementy, aby zmienić kolory rozwijane:
Demo z rozwijanym menu
źródło
Zajęło mi to trochę czasu, ale odkryłem, że włączenie następujących elementów umożliwiło zmianę koloru paska nawigacyjnego:
źródło
background-imagedodany, co uniemożliwiłoby działanie TWBSColor. Czy mogę znać wersję twojego Bootstrap i twoje środowisko? (dodatkowy motyw, biblioteki CSS ...)Używając mniej
Możesz również rozważyć skompilowanie własnej wersji. Spróbuj http://getbootstrap.com/customize/ (który ma osobną sekcję dla ustawień Paski nawigacyjne (domyślny pasek nawigacyjny i odwrócony pasek nawigacyjny)) lub pobierz własną kopię z https://github.com/twbs/bootstrap .
Ustawienia paska nawigacyjnego znajdziesz w
variables.less.navbar.lesssłuży do kompilacji paska nawigacyjnego (zależy odvariables.lessimixins.less).Skopiuj „domyślną sekcję paska nawigacyjnego” i wprowadź własne ustawienia kolorów. Zmiana zmiennych
variables.lessbędzie najłatwiejszym sposobem (zmiana domyślnego lub odwrotnego paska nawigacyjnego nie będzie problemem, ponieważ masz tylko jeden pasek nawigacyjny na stronę).W większości przypadków nie zmienisz wszystkich ustawień:
Możesz także spróbować http://twitterbootstrap3navbars.w3masters.nl/ . To narzędzie generuje kod CSS dla niestandardowego paska nawigacyjnego. Opcjonalnie możesz również dodać kolory i obramowania gradientu do paska nawigacyjnego.
źródło
Wystarczy dodać identyfikator do paska nawigacyjnego HTML, na przykład:
Za pomocą tego identyfikatora możesz stylizować kolor paska nawigacyjnego, ale także łącza i listy rozwijane
Przykłady zastosowane do różnych typów pasków nawigacyjnych
czarny
Żółty
Ciemny niebieski
Czerwona wiśnia)
Ciemnozielony
Oto CSS
źródło
Czy musisz bezpośrednio zmienić CSS? Co powiesz na...
źródło
Spróbuj tego też. To zadziałało dla mnie.
źródło
Jeśli chodzi tylko o zmianę koloru paska nawigacyjnego, sugerowałbym użycie: Bootstrap Magic . Możesz zmienić wartości różnych właściwości paska nawigacyjnego i wyświetlić podgląd.
Pobierz wynik jako niestandardowy arkusz stylów CSS lub jako plik Mniej zmiennych. Możesz zmieniać wartości za pomocą pól wprowadzania i selektorów kolorów.
źródło
W tym pasku nawigacyjnym CSS ustaw własny kolor:
źródło
Przykład
Po prostu spróbuj tego w następujący sposób:
Plik
navabr.cssDomyślne główne zastosowania kolorów są następujące:
Możesz dowiedzieć się więcej w Aby zmienić kolor paska nawigacyjnego w Twitter Bootstrap 3 .
źródło
Odwrotna i domyślna nazwa klasy w Twitter Bootstrap powoduje, że są one czarno-białe.
Lepiej, nie powinieneś nadpisywać tego i dodawać do niego klasę i pisać do tego szczególny styl:
źródło
Posługiwać się:
25+ Kod menu Bootstrap Nav
źródło