Kā man vajadzētu mainīt CSS, lai mainītu navigācijas joslas krāsu programmā Twitter Bootstrap?
tl;dr - TWBSColor - Izveidot savu Bootstrap navigācijas joslu
piezīmes par versiju:
- Tiešsaistes rīks: Bootstrap 3.3.2+ / 4.0.0+
- Šī atbilde: Bootstrap 3.0.x
Jums ir pieejamas divas pamata navigācijas joslas:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Šeit ir norādītas galvenās krāsas un to lietojums:
#F8F8F8F8
: navigācijas joslas fons#E7E7E7E7
: navigācijas joslas apmale#777
: noklusējuma krāsa#333
: hover krāsa (#5E5E5E5E
krāsai .nav-brand
)#555
: aktīvā krāsa#D5D5D5
: aktīvais fonsJa vēlaties ievietot kādu pielāgotu stilu, šeit ir CSS, kas jums jāmaina:
/* 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;
}
}
Šeit ir četri pielāgotas krāsainas navigācijas joslas piemēri:
[JSFiddle saite][2].
Un SCSS kods:
$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; }}}
}
Es'esmu tikko izveidojis skriptu, kas ļaus jums ģenerēt savu tēmu: TWBSColor - ģenerējiet savu Bootstrap navigācijas joslu.
[Atjauninājums]: TWBSColor tagad ģenerē SCSS/SASS/Less/CSS kodu.
[Atjauninājums]: No šī brīža kā TWBSColor piedāvāto noklusējuma valodu var izmantot Less
[Atjauninājums]: TWBSColor tagad atbalsta nolaižamo izvēlņu krāsošanu
[Atjauninājums]: TWBSColor tagad ļauj izvēlēties versiju (pievienots Bootstrap 4 atbalsts) *
Atjaunināts 2018, lai izmantotu Bootstrap 4
Bootstrap 4 navigācijas joslas krāsas maiņa ir atšķirīga (un nedaudz vienkāršāka). Varat izveidot pielāgotu navigācijas joslas klasi un pēc tam atsaukties uz to, lai mainītu navigācijas joslu, neietekmējot citas Bootstrap navigācijas joslas..
<nav class="navbar navbar-custom">...</nav>
Bootstrap 4.0
Bootstrap 4 ir daudz mazāk CSS, kas nepieciešams, lai mainītu navigācijas joslu...
.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 Demo1
Aktīvās/virsviras saites fona krāsas maiņa arī darbojas ar to pašu CSS, bet jums ir jāpielāgo izvietojums, ja vēlaties, lai bg krāsa aizpildītu visu saites augstumu...
py-0
, lai noņemtu vertikālo izvietojumu no visas navigācijas joslas...
<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 Mainīt saites un fona krāsu demonstrējums
Skatiet arī: 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;
}
Ja navigācijas joslā ir nolaižamās rūtiņas, pievienojiet tālāk norādīto, lai mainītu nolaižamo rūtiņu krāsu(-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;
}
Varētu arī apsvērt iespēju kompilēt savu versiju. Izmēģiniet http://getbootstrap.com/customize/ (kurā ir atsevišķa sadaļa, kas paredzēta navigācijas joslu iestatījumiem (noklusējuma navigācijas josla un apgrieztā navigācijas josla)) vai lejupielādējiet savu kopiju no https://github.com/twbs/bootstrap.
Navbar iestatījumus jūs atradīsiet vārdnīcas.less
. navbar.less
tiek izmantots, lai kompilētu navigācijas joslu (ir atkarīgs no variables.less
un mixins.less
).
Nokopējiet 'navbar-default sadaļu' un ierakstiet savus krāsu iestatījumus. Mainīgo mainīgo mainīgo mainīšana variables.less
būs vienkāršākais veids (mainīt noklusējuma vai apgriezto navigācijas joslu nebūs problēma, jo jums ir tikai viena navigācijas josla katrā lapā).
Vairumā gadījumu jūs nemainīsiet visus iestatījumus:
// 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;
Varētu arī izmēģināt http://twitterbootstrap3navbars.w3masters.nl/. Šis rīks ģenerē CSS kodu jūsu pielāgotajai navigācijas joslai. Pēc izvēles varat arī pievienot navigācijas joslai gradienta krāsas un apmales.