Muuta navigaattoripalkin väriä Twitter Bootstrapissa

Miten muuttaisin CSS:ää vaihtaakseni Twitter Bootstrapin navigaattoripalkin väriä?

Zim
Muokattu kysymysT33 helmikuu 2018 в 8:37
Ohjelmointi
css twitter-bootstrap-3 twitter-bootstrap bootstrap-4 navbar
T44 elokuu 2013 в 9:19
22 näkymät
Ratkaisu

tl;dr - TWBSColor - Luo oma Bootstrap-navapalkki

Version huomautukset:

  • Online-työkalu: Bootstrap 3.3.2+ / 4.0.0+.
  • Tämä vastaus: Bootstrap 3.0.x

Käytettävissä olevat navigaattoripalkit

Sinulla on kaksi perusnavapalkkia:

Oletusvärin käyttö

Tässä ovat tärkeimmät värit ja niiden käyttö:

  • #F8F8F8: navigaattoripalkin tausta
  • #E7E7E7: navigaattoripalkin reunus
  • #777: oletusväri
  • #333: hover-väri (#5E5E5E kohdassa .nav-brand)
  • #555: aktiivinen väri
  • #D5D5D5: aktiivinen tausta

Oletustyyli

Jos haluat käyttää jotain mukautettua tyyliä, tässä on CSS, jota sinun täytyy muuttaa:

/* 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;
    }
}

Esimerkkejä mukautetusta värillisestä navigaattoripalkista

Tässä on neljä esimerkkiä mukautetusta värillisestä navigaattoripalkista:

[JSFiddle-linkki][2]

4

Ja SCSS-koodi:

$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; }}}
}

Ja lopuksi, pieni lahja

Olen juuri tehnyt skriptin, jonka avulla voit luoda teemasi: TWBSColor - Luo oma Bootstrap-navapalkki

[Päivitys]:
[Päivitys]: Tästä lähtien voit käyttää Lessiä TWBSColorin tarjoamana oletuskielenä
[Päivitys]: TWBSColor tukee nyt pudotusvalikoiden väritystä [Päivitys]: (Bootstrap 4 -tuki lisätty): TWBSColor sallii nyt version valinnan (Bootstrap 4 -tuki lisätty)*

zessx
Muokattu vastausta T33 kesäkuu 2017 в 9:14
Kommentit (14)

Päivitetty 2018 Bootstrap 4:lle

Navbarin värin vaihtaminen on erilaista (ja hieman helpompaa) Bootstrap 4:ssä. Voit luoda mukautetun navigaattoriluokan ja viitata siihen muuttaaksesi navigaattoripalkkia vaikuttamatta muihin Bootstrap-navigaattoreihin...

...

Bootstrap 4.0

Navbarin muuttamiseen tarvittava CSS on paljon vähemmän Bootstrap 4:ssä...

.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

Aktiivisen/hover-linkin taustan värin muuttaminen toimii myös samalla CSS:llä, mutta sinun on säädettävä pehmusteita, jos haluat bg-värin täyttävän linkin koko korkeuden...

py-0 poistaa pystysuuntaisen pehmusteen koko navigaattoripalkista...

..

/* 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 Linkin ja taustavärin vaihto -demo

Katso myös: https://stackoverflow.com/questions/42586729/

Bootstrap 3


  <div class="navbar-header">
    ...

    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...


.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;
}

Custom Navbar Demo on Bootply

Jos navigaattoripalkissa on pudotusvalikoita, lisää seuraavat tiedot vaihtaaksesi pudotusvalikoiden väriä (värejä):

/* 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, jossa on pudotusvalikko

Zim
Muokattu vastausta T55 joulukuu 2018 в 3:32
Kommentit (6)

Vähemmän käyttäminen

Voit myös harkita oman version kääntämistä. Kokeile http://getbootstrap.com/customize/ (jossa on erillinen osio Navbars-asetuksille (Default navbar ja Inverted Navbar)) tai lataa oma kopiosi osoitteesta https://github.com/twbs/bootstrap.

Navbar-asetukset löytyvät tiedostosta variables.less. navbar.less:ää käytetään navipalkin kääntämiseen (riippuu variables.less:stä ja mixins.less:stä).

Kopioi 'navbar-default section' ja täytä omat väriasetuksesi. Muuttujien muuttaminen variables.less:ssä on helpoin tapa (oletus- tai käänteisnavapalkin muuttaminen ei ole ongelma, koska sinulla on vain yksi navapalkki per sivu).

Et muuta kaikkia asetuksia useimmissa tapauksissa:

// 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;

Voit myös kokeilla http://twitterbootstrap3navbars.w3masters.nl/. Tämä työkalu luo CSS-koodia mukautettua navigaattoripalkkia varten. Vaihtoehtoisesti voit myös lisätä navigaattoripalkkiin värisävyjä ja reunuksia.

Peter Mortensen
Muokattu vastausta T22 maaliskuu 2017 в 10:45
Kommentit (0)