Πώς μπορώ να τροποποιήσω το CSS για να αλλάξω το χρώμα της γραμμής πλοήγησης στο Twitter Bootstrap;
tl;dr - TWBSColor - Δημιουργήστε τη δική σας γραμμή πλοήγησης Bootstrap >, Σημειώσεις έκδοσης:
- Ηλεκτρονικό εργαλείο: 3.3.2+ / 4.0.0+.
- Αυτή η απάντηση: Bootstrap 3.0.x
Έχετε δύο βασικές γραμμές πλοήγησης:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Εδώ είναι τα κύρια χρώματα και η χρήση τους:
#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]
Και ο κώδικας 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
[Ενημέρωση]: <br/>, [Ενημέρωση]: <br/>, [Ενημέρωση]: TWBSColor υποστηρίζει τώρα τον χρωματισμό αναπτυσσόμενων μενού [Ενημέρωση]: (Προστέθηκε υποστήριξη του Bootstrap 4)
Ανανεωμένο 2018 για το Bootstrap 4
Η αλλαγή του χρώματος της γραμμής πλοήγησης είναι διαφορετική (και λίγο πιο εύκολη) στο Bootstrap 4. Μπορείτε να δημιουργήσετε μια προσαρμοσμένη κλάση navbar και στη συνέχεια να την αναφέρετε για να αλλάξετε τη navbar χωρίς να επηρεάσετε άλλες navs του Bootstrap..
<nav class="navbar navbar-custom">...</nav>
<hr>,
Bootstrap 4.0
Τα CSS που απαιτούνται για την αλλαγή της γραμμής πλοήγησης είναι πολύ λιγότερα στο Bootstrap 4...
.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
Η αλλαγή του χρώματος φόντου του ενεργού / υπερυψωμένου συνδέσμου λειτουργεί επίσης με το ίδιο CSS, αλλά πρέπει να προσαρμόσετε το padding αν θέλετε το χρώμα bg να γεμίσει όλο το ύψος του συνδέσμου...
py-0
για να αφαιρέσετε το κάθετο padding από ολόκληρη τη γραμμή πλοήγησης...
<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 Change Link and Background Color Demo
Δείτε επίσης: https://stackoverflow.com/questions/42586729/
<hr>,
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;
}
Custom Navbar Demo στο Bootply
<hr>,
Εάν η γραμμή πλοήγησης έχει dropdowns, προσθέστε τα ακόλουθα για να αλλάξετε το χρώμα(α) των dropdowns:
/* 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;
}
<hr>,
Θα μπορούσατε επίσης να σκεφτείτε να μεταγλωττίσετε τη δική σας έκδοση. Δοκιμάστε το 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 για την προσαρμοσμένη γραμμή πλοήγησης. Προαιρετικά, μπορείτε επίσης να προσθέσετε χρώματα διαβάθμισης και πλαίσια στη γραμμή πλοήγησης.