Hogyan módosíthatnám a CSS-t a Twitter Bootstrapben a navigációs sáv színének megváltoztatásához?
tl;dr - TWBSColor - Generálja a saját Bootstrap navibárját
Versziós megjegyzések:
- Online eszköz: Bootstrap 3.3.2+ / 4.0.0+.
- Ez a válasz: Bootstrap 3.0.x
Két alapvető navibárral rendelkezik:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Itt vannak a fő színek és használatuk:
#F8F8F8F8
: navibár háttere#E7E7E7
: navigációs sáv szegélye#777
: alapértelmezett szín#333
: hover szín (#5E5E5E5E
a .nav-brand
esetében)#555
: aktív szín#D5D5D5D5
: aktív háttérHa egyéni stílust szeretnél, itt van a CSS, amit meg kell változtatnod:
/* 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;
}
}
Íme négy példa az egyéni színes navibárra:
[JSFiddle link][2]
És az SCSS kód:
$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; }}}
}
Én'most csináltam egy szkriptet, amivel létrehozhatod a témádat: TWBSColor - Generálja a saját Bootstrap navbarját
[Frissítés]: A TWBSColor most már SCSS/SASS/Less/CSS kódot generál.
[Frissítés]: Mostantól a TWBSColor által biztosított alapértelmezett nyelvként használhatja a Less-t
[Frissítés]: TWBSColor mostantól támogatja a legördülő menük színezését
[Frissítés]: TWBSColor mostantól lehetővé teszi a verzió kiválasztását (Bootstrap 4 támogatás hozzáadva) *
Frissítve 2018-ban a Bootstrap 4 számára
A Navbar színének megváltoztatása más (és egy kicsit egyszerűbb) a Bootstrap 4-ben. Létrehozhat egy egyéni navbar osztályt, majd hivatkozhat rá a navbar megváltoztatásához anélkül, hogy ez hatással lenne a többi Bootstrap navra...
<nav class="navbar navbar-custom">...</nav>
Bootstrap 4.0
A Bootstrap 4-ben sokkal kevesebb CSS szükséges a Navbar megváltoztatásához...
.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
Az aktív/hover link háttér színének megváltoztatása ugyanezzel a CSS-szel szintén működik, de a paddingot be kell állítanod, ha azt akarod, hogy a bg szín kitöltse a link teljes magasságát...
py-0
a függőleges kitöltés eltávolításához a teljes navibárból...
<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- és háttérszínváltoztatási bemutató
Lásd még: 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;
}
Egyéni navigációs sáv bemutató a Bootply-n
Ha a Navbarnak vannak legördülő gombjai, akkor a következőkkel változtassa meg a legördülő gombok színét (színeit):
/* 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;
}
Azt is fontolóra veheted, hogy lefordítod a saját verziódat. Próbáld ki a http://getbootstrap.com/customize/ (amely külön szekcióban tartalmazza a Navbars beállításait (Default navbar és Inverted Navbar)), vagy töltsd le a saját példányodat a https://github.com/twbs/bootstrap oldalról.
A navbar beállításokat a variables.less
állományban találod. A navbar.less
a navbar lefordítására szolgál (függ a variables.less
és a mixins.less
állományoktól).
Másold ki a 'navbar-default section' -t, és töltsd ki a saját színbeállításaidat. A variables.less
változóinak megváltoztatása lesz a legegyszerűbb (az alapértelmezett vagy fordított navbar megváltoztatása nem lesz probléma, mivel oldalanként csak egy navbar van).
A legtöbb esetben nem fogod'nk az összes beállítást megváltoztatni:
// 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;
Megpróbálhatod a http://twitterbootstrap3navbars.w3masters.nl/ címet is. Ez az eszköz CSS kódot generál az egyéni navibárhoz. Opcionálisan gradiens színeket és szegélyeket is hozzáadhat a navibárhoz.