Kaip galėčiau pakeisti CSS, kad pakeisčiau "Twitter Bootstrap" navbar'o spalvą?
tl;dr - TWBSColor - Sukurti savo Bootstrap navbar
Pažymos apie versiją:
- Internetinis įrankis: Bootstrap 3.3.2+ / 4.0.0+
- Šis atsakymas: "Bootstrap 3.0.x": - Atsakymas: - "Bootstrap 3.0.x".
Jūs'turite dvi pagrindines navbar'us:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Čia pateikiamos pagrindinės spalvos ir jų naudojimas:
#F8F8F8F8
: navbar fonas#E7E7E7
: navbar border##777
: numatytoji spalva#333
: užvedimo spalva (#5E5E5E5E
- .nav-brand
)#555
: aktyvi spalva#D5D5D5
: aktyvusis fonasJei norite įvesti pasirinktinį stilių, štai CSS, kurį reikia pakeisti:
/* 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;
}
}
Pateikiame keturis pasirinktinės spalvotos navbar pavyzdžius:
[JSFiddle nuoroda][2]
Ir SCSS kodas:
$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; }}}
}
Ką tik sukūriau scenarijų, kuris leis jums sugeneruoti savo temą: TWBSColor - sukurkite savo Bootstrap navbar
[Atnaujinti]: Dabar TWBSColor generuoja SCSS/SASS/Less/CSS kodą
[Atnaujinta]: Nuo šiol galite naudoti "Less" kaip numatytąją TWBSColor teikiamą kalbą
[Atnaujinta]: Nuo šiol TWBSColor palaiko išskleidžiamųjų meniu spalvinimą
[Atnaujinimas]: Dabar TWBSColor leidžia pasirinkti versiją (pridėtas Bootstrap 4 palaikymas)
*Atnaujinta 2018 m. "Bootstrap 4"**
Navigacijos juostos spalvos keitimas "Bootstrap 4" yra kitoks (ir šiek tiek paprastesnis). Galite sukurti pasirinktinę navbar klasę, o tada, norėdami pakeisti navbar spalvą ir nedarydami poveikio kitoms "Bootstrap" navbar klasėms, pateikti nuorodą į ją..
<nav class="navbar navbar-custom">...</nav>
Bootstrap 4.0
Naudojant "Bootstrap 4" reikia daug mažiau CSS, kad būtų galima pakeisti Navbar...
.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
Keisti aktyvios ir (arba) viršutinės nuorodos fono spalvą taip pat galima naudojant tą pačią CSS, tačiau turite koreguoti užpildymą, jei norite, kad bg spalva užpildytų visą nuorodos aukštį...
py-0
, jei norite pašalinti vertikalų visos navbar juostos užpildą...
<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 nuorodų ir fono spalvos keitimo demonstracinė versija
Taip pat žiūrėkite: 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;
}
Jei Navigacijos juostoje yra išskleidžiamųjų langelių, pridėkite toliau nurodytus veiksmus, kad pakeistumėte išskleidžiamųjų langelių spalvą (-as):
/* 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;
}
Demo su išskleidžiamosiomis sritimis
Taip pat galite apsvarstyti galimybę susikurti savo versiją. Išbandykite http://getbootstrap.com/customize/ (joje yra atskiras Navbar nustatymų skyrius (Default navbar ir Inverted Navbar)) arba atsisiųskite savo kopiją iš https://github.com/twbs/bootstrap.
Navbar nustatymus rasite variables.less
. Navbar.less
naudojamas navbarams kompiliuoti (priklauso nuo variables.less
ir mixins.less
).
Nukopijuokite 'navbar-default skyrių' ir įrašykite savo spalvų nustatymus. Pakeisti kintamuosius variables.less
bus paprasčiausia (pakeisti numatytąją arba atvirkštinę navbar'ą nebus'problemų, nes kiekviename puslapyje turite tik vieną navbar'ą).
Daugeliu atvejų visų nustatymų nepakeisite:
// 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;
Taip pat galite pabandyti http://twitterbootstrap3navbars.w3masters.nl/. Ši priemonė generuoja CSS kodą jūsų pasirinktinei naršymo juostai. Pasirinktinai į navbarą taip pat galite pridėti gradiento spalvų ir rėmų.