Αλλαγή χρώματος γραμμής πλοήγησης στο Twitter Bootstrap

Πώς μπορώ να τροποποιήσω το CSS για να αλλάξω το χρώμα της γραμμής πλοήγησης στο Twitter Bootstrap;

Zim
Επεξεργασμένη ερώτηση Κάνε Φεβρουάριος 2018 в 8:37
Προγραμματισμός
css twitter-bootstrap-3 twitter-bootstrap bootstrap-4 navbar
Κάνε Αύγουστος 2013 в 9:19
23 προβολές
Λύση

tl;dr - [TWBSColor - Δημιουργήστε τη δική σας γραμμή πλοήγησης Bootstrap][1] &gt, Σημειώσεις έκδοσης:

  • Ηλεκτρονικό εργαλείο: 3.3.2+ / 4.0.0+.
  • Αυτή η απάντηση: Bootstrap 3.0.x

Διαθέσιμες γραμμές πλοήγησης

Έχετε δύο βασικές γραμμές πλοήγησης:

Προεπιλεγμένη χρήση χρώματος

Εδώ είναι τα κύρια χρώματα και η χρήση τους:

  • #F8F8F8: φόντο γραμμής πλοήγησης
  • #E7E7E7: πλαίσιο γραμμής πλοήγησης
  • #777: προεπιλεγμένο χρώμα
  • #333: χρώμα hover (#5E5E5E για το .nav-brand)
  • #555: ενεργό χρώμα
  • #D5D5D5: ενεργό φόντο

Προεπιλεγμένο στυλ

Αν θέλετε να βάλετε κάποιο προσαρμοσμένο στυλ, εδώ είναι το CSS που πρέπει να αλλάξετε:

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

Παραδείγματα προσαρμοσμένης έγχρωμης γραμμής πλοήγησης

Ακολουθούν τέσσερα παραδείγματα μιας προσαρμοσμένης έγχρωμης γραμμής πλοήγησης:

[Σύνδεσμος JSFiddle][2]

![Εισάγετε την περιγραφή της εικόνας εδώ][3]

Και ο κώδικας 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; }}}
}

Και τέλος, ένα μικρό δώρο

Μόλις έφτιαξα ένα σενάριο που θα σας επιτρέψει να δημιουργήσετε το θέμα σας: [TWBSColor - Δημιουργήστε τη δική σας γραμμή πλοήγησης Bootstrap][1]

[Ενημέρωση]:

zessx
Επεξεργασμένη απάντηση Κάνε Ιούνιος 2017 в 9:14
Σχόλια (14)

Ανανεωμένο 2018 για το Bootstrap 4

Η αλλαγή του χρώματος της γραμμής πλοήγησης είναι διαφορετική (και λίγο πιο εύκολη) στο Bootstrap 4. Μπορείτε να δημιουργήσετε μια προσαρμοσμένη κλάση navbar και στη συνέχεια να την αναφέρετε για να αλλάξετε τη navbar χωρίς να επηρεάσετε άλλες navs του Bootstrap..

...
Zim
Επεξεργασμένη απάντηση Κάνε Δεκέμβριος 2018 в 3:32
Σχόλια (6)

Χρησιμοποιώντας λιγότερα

Θα μπορούσατε επίσης να σκεφτείτε να μεταγλωττίσετε τη δική σας έκδοση. Δοκιμάστε το http://getbootstrap.com/customize/ (το οποίο έχει ένα ξεχωριστό τμήμα για τις ρυθμίσεις των Navbars (Default navbar και Inverted Navbar)) ή κατεβάστε το δικό σας αντίγραφο από το https://github.com/twbs/bootstrap.

Θα βρείτε τις ρυθμίσεις των navbars στο αρχείο variables.less. Το navbar.less χρησιμοποιείται για τη μεταγλώττιση του navbar (εξαρτάται από τα variables.less και mixins.less).

Αντιγράψτε το τμήμα 'navbar-default' και συμπληρώστε τις δικές σας ρυθμίσεις χρώματος. Η αλλαγή των μεταβλητών στο variables.less θα είναι ο ευκολότερος τρόπος (η αλλαγή της προεπιλεγμένης ή της αντίστροφης navbar δεν θα'ειναι πρόβλημα επειδή έχετε μόνο μία navbar ανά σελίδα).

Στις περισσότερες περιπτώσεις δεν θα αλλάξετε όλες τις ρυθμίσεις:

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

Θα μπορούσατε επίσης να δοκιμάσετε το http://twitterbootstrap3navbars.w3masters.nl/. Αυτό το εργαλείο παράγει κώδικα CSS για την προσαρμοσμένη γραμμή πλοήγησης. Προαιρετικά, μπορείτε επίσης να προσθέσετε χρώματα διαβάθμισης και πλαίσια στη γραμμή πλοήγησης.

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2017 в 10:45
Σχόλια (0)