Comment pourrais-je modifier le CSS pour changer la couleur de la barre de navigation dans Twitter Bootstrap?
711
Comment pourrais-je modifier le CSS pour changer la couleur de la barre de navigation dans Twitter Bootstrap?
tl; dr - TWBSColor - Générez votre propre barre de navigation Bootstrap
Notes de version: - Outil en ligne: Bootstrap 3.3.2+ / 4.0.0+ - Cette réponse: Bootstrap 3.0.x
Vous avez deux barres de navigation de base:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>Voici les principales couleurs et leur utilisation:
#F8F8F8: arrière-plan de la barre de navigation#E7E7E7: bordure de la barre de navigation#777: couleur par défaut#333: couleur de survol ( #5E5E5Epour .nav-brand)#555: couleur active#D5D5D5: fond actifSi vous souhaitez mettre un style personnalisé, voici le CSS que vous devez changer:
/* 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;
}
}Voici quatre exemples de barre de navigation colorée personnalisée:
Et le code 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; }}}
}Je viens de faire un script qui vous permettra de générer votre thème: TWBSColor - Générez votre propre barre de navigation Bootstrap
[Mise à jour]: TWBSColor génère désormais du code SCSS / SASS / Less / CSS.
[Mise à jour]: À partir de maintenant, vous pouvez utiliser Less comme langue par défaut fournie par TWBSColor
[Mise à jour]: TWBSColor prend désormais en charge la colorisation des menus déroulants
[Mise à jour]: TWBSColor permet désormais de choisir votre version (prise en charge de Bootstrap 4 ajoutée)
!importantà la fin de chacune des instructions CSS générées semble avoir résolu le problème. Exemple:color: #ffffff;devientcolor: #ffffff !important;.Mise à jour 2020
Changer la couleur de la barre de navigation est différent (et un peu plus facile) dans Bootstrap 4 . Vous pouvez créer une classe de barre de navigation personnalisée, puis la référencer pour modifier la barre de navigation sans affecter les autres navigations Bootstrap.
Bootstrap 4.3+
Le CSS requis pour changer la Navbar est beaucoup moins dans Bootstrap 4 ...
Démonstration personnalisée de la barre de navigation Bootstrap 4
La modification de la couleur d' arrière - plan du lien actif / survolé fonctionne également avec le même CSS, mais vous devez ajuster le remplissage si vous souhaitez que la couleur bg remplisse toute la hauteur du lien ...
py-0pour supprimer le rembourrage vertical de toute la barre de navigation ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Démonstration de Bootstrap 4 Modifier le lien et la couleur d'arrière-plan
Voir aussi: Bootstrap 4 Change Hamburger Toggler Color
Bootstrap 3
Démo Navbar personnalisée sur Bootply
Si la barre de navigation comporte des listes déroulantes, ajoutez les éléments suivants pour modifier la ou les couleurs de la liste déroulante:
Démo avec Dropdown
la source
Cela m'a pris du temps, mais j'ai découvert que l'inclusion des éléments suivants permettait de changer la couleur de la barre de navigation:
la source
background-imageajouté, ce qui empêcherait TWBSColor de fonctionner. Puis-je connaître la version de votre Bootstrap et votre environnement s'il vous plaît? (thème supplémentaire, bibliothèques CSS ...)Utiliser moins
Vous pouvez également envisager de compiler votre propre version. Essayez http://getbootstrap.com/customize/ (qui comporte une section distincte pour les paramètres Navbars (barre de navigation par défaut et barre de navigation inversée)) ou téléchargez votre propre copie depuis https://github.com/twbs/bootstrap .
Vous trouverez les paramètres de la barre de navigation dans
variables.less.navbar.lessest utilisé pour compiler la barre de navigation (dépend devariables.lessetmixins.less).Copiez la «section par défaut de la barre de navigation» et remplissez vos propres paramètres de couleur. Changer les variables en
variables.lesssera le moyen le plus simple (changer la barre de navigation par défaut ou inverse ne sera pas un problème car vous avez une seule barre de navigation par page).Vous ne modifierez pas tous les paramètres dans la plupart des cas:
Vous pouvez également essayer http://twitterbootstrap3navbars.w3masters.nl/ . Cet outil génère du code CSS pour votre barre de navigation personnalisée. Facultativement, vous pouvez également ajouter des couleurs dégradées et des bordures à la barre de navigation.
la source
Ajoutez simplement un identifiant à la barre de navigation HTML, tel que:
Avec cet identifiant, vous pouvez styliser la couleur de la barre de navigation, mais aussi les liens et les listes déroulantes
Exemples appliqués à différents types de barres de navigation
Noir
Jaune
Bleu foncé
Cerise rouge)
Vert foncé
Voici le CSS
la source
Devez-vous changer directement le CSS? Qu'en est-il de...
la source
Essayez cela aussi. Cela a fonctionné pour moi.
la source
S'il ne s'agit que de changer la couleur de la Navbar, ma suggestion serait d'utiliser: Bootstrap Magic . Vous pouvez modifier les valeurs des différentes propriétés de la barre de navigation et voir un aperçu.
Téléchargez le résultat sous forme de feuille de style CSS personnalisée ou sous forme de fichier de variables Less. Vous pouvez modifier les valeurs avec des champs de saisie et des sélecteurs de couleurs.
la source
Dans ce CSS de barre de navigation, défini sur sa propre couleur:
la source
Exemple
Essayez-le comme ceci:
Fichier
navabr.cssLes principales couleurs utilisées par défaut sont les suivantes:
Vous pouvez en savoir plus dans Pour changer la couleur de la barre de navigation dans Twitter Bootstrap 3 .
la source
La mention de nom de classe inverse et par défaut dans Twitter Bootstrap les fait être de couleur noir et blanc.
Mieux, vous ne devriez pas remplacer cela et ajouter une classe près de cela et vous écrire un style particulier pour cela:
la source
Utilisation:
Code de menus de navigation Bootstrap 25+
la source