couleur de la barre de navigation dans Twitter Bootstrap

Comment puis-je changer la couleur de fond de la barre de navigation de Twitter Bootstrap 2.0.2? Comment puis-je changer la couleur de tous les éléments de la barre de navigation pour refléter la couleur d’arrière-plan?

Vous pouvez écraser les couleurs du bootstrap, y compris la classe .navbar-inner , en le ciblant dans votre propre feuille de style plutôt que de modifier la feuille de style bootstrap.css, comme ceci:

 .navbar-inner { background-color: #2c2c2c; /* fallback color, place your own */ /* Gradients for modern browsers, replace as you see fit */ background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); background-repeat: repeat-x; /* IE8-9 gradient filter */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); } 

Vous devez simplement modifier tous ces styles avec les vôtres et ils seront captés, comme par exemple, où j’élimine tous les effets de dégradé et définissez simplement une couleur de fond noire:

 .navbar-inner { background-color: #000; /* background color will be black for all browsers */ background-image: none; background-repeat: no-repeat; filter: none; } 

Vous pouvez utiliser des outils tels que l’ Éditeur de dégradé Colorzilla et créer vos propres couleurs de dégradé pour tous les navigateurs et remplacer les couleurs d’origine par les vôtres.

Et comme je l’ai mentionné dans les commentaires, je ne vous recommande pas de modifier directement la feuille de style bootstrap.css car toutes vos modifications seront perdues une fois la feuille de style mise à jour (la version actuelle est la v2.0.2 ). vos modifications dans votre propre feuille de style, en tandem avec la feuille de style bootstrap.css. Mais n’oubliez pas de remplacer toutes les propriétés appropriées pour avoir une cohérence entre les navigateurs.

Une excellente source d’information sur le thème du bootstrap est: bootswatch.com . Il a de bons exemples et montre aussi du code. En bref, ils utilisent lessc pour recomstackr le fichier bootstrap.css dans votre nouveau fichier color-theme.css. La bonne chose de leur approche est qu’elle est construite sur le bootstrap, donc quand le bootstrap est mis à jour, vous ne faites que recomstackr.

Liens sur l’utilisation de lessc et bootstrap:

  • Utiliser bootstrap avec moins
  • Lessc.org

Si vous n’avez pas le temps d’apprendre “moins” ou de le faire correctement, voici un sale coup …

Ajoutez ceci ci-dessus où vous rendrez la barre de navigation bootstrap HTML – mettez à jour les couleurs si nécessaire.

  

Vous pouvez télécharger une version personnalisée de bootstrap et définir @navbarBackground sur la couleur souhaitée.

http://twitter.github.com/bootstrap/customize.html

J’utilise la version 3.2.0 de Bootstrap et il semble que .navbar-inner n’existe plus.

Les solutions proposées ici qui suggèrent un dépassement de .navbar-inner ne fonctionnaient pas pour moi – la couleur est restée la même.

La couleur n’a changé que lorsque j’ai remplacé .navbar comme indiqué ci-dessous:

 .navbar { background-color: #A4C8EC; background-image: none; } 

La meilleure façon de faire la même chose actuellement serait d’installer le compilateur de ligne de commande LESS en utilisant

 $ npm install -g less jshint recess uglify-js 

Une fois que vous avez fait cela, allez dans le dossier moins dans le répertoire, puis modifiez les variables du fichier.less et vous pouvez changer beaucoup de variables en fonction de vos besoins, y compris la couleur de la barre de navigation

 @navbarCollapseWidth: 979px; @navbarHeight: 40px; @navbarBackgroundHighlight: #ffffff; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBorder: darken(@navbarBackground, 12%); @navbarText: #777; @navbarLinkColor: #777; @navbarLinkColorHover: @grayDark; @navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 5%); 

Une fois cela fait, allez dans votre répertoire bootstrap et exécutez la commande make.

Si vous utilisez LESS, vous pouvez utiliser Mixins pour moins de code. Ici, je vais append un dégradé, une bordure et un rayon de bordure:

 .navbar-inner { #gradient > .vertical(#ffffff, #ECECEC); border: #E2E2E2; .border-radius(6px); } 

* Si vous utilisez les rails gem, twitter-bootstrap-rails, je le fais directement dans le fichier bootstrap_and_overrides.css.less *

c’est ce que je fais

 .navbar-inverse .navbar-inner { background-color: #E27403; /* it's flat*/ background-image: none; } .navbar-inverse .navbar-inner { background-image: -ms-linear-gradient(top, #E27403, #E49037); background-image: -webkit-linear-gradient(top, #E27403, #E49037); background-image: linear-gradient(to bottom, #E27403, #E49037); } 

ça marche bien pour tous les navigateurs on peut voir la démo ici http://caverne.fr en haut

Dans la ligne bootstrap.css 4784, on voit:

 .navbar-inverse .navbar-inner { background-color: #FFFFFFF; background-image: -moz-linear-gradient(top, #222222, #111111); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); background-image: -webkit-linear-gradient(top, #222222, #111111); background-image: -o-linear-gradient(top, #222222, #111111); background-image: linear-gradient(to bottom, #222222, #111111); background-repeat: repeat-x; border-color: #252525; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); } 

Vous devez supprimer toutes les déclarations de propriété ‘background-image’ pour obtenir l’effet souhaité.

Le razor de Occam n’aurait-il pas dit de faire cela jusqu’à ce que vous ayez besoin de quelque chose de plus complexe? C’est un peu un piratage, mais peut convenir aux besoins de quelqu’un qui veut une solution rapide.

 .navbar-default .container-fluid{ background-color:#62ADD7; // Change the color margin: -1px -1px 10px -1px; // Get rid of the border } 

Si vous utilisez la version MOINS ou SASS du Bootstrap. Le moyen le plus efficace est de changer le nom de la variable, dans le fichier LESS ou SASS.

 $navbar-default-color: #FFFFFF !default; $navbar-default-bg: #36669d !default; $navbar-default-border: $navbar-default-bg !default; 

C’est de loin le moyen le plus simple et le plus efficace de modifier la barre de navigation Bootstraps. Vous n’avez pas besoin d’écrire des substitutions et le code rest propre.

Vous pouvez personnaliser votre propre version sur le site officiel de Bootstrap .

Je ne fais que remplacer tout ce que je veux changer dans le site.css, vous devriez charger le site.css après le bootstrap pour qu’il écrase les classes. Ce que j’ai fait maintenant, c’est de créer mes propres classes avec mon propre petit thème bootstrap. Des petites choses comme ça

 .navbar-nav li a{ color: #fff; font-size: 15px; margin-top: 9px; } .navbar-nav li a:hover{ background-color: #18678E; height: 61px; } 

J’ai également modifié les erreurs de validation de la même manière.