couleur de la barre de navigation dans Twitter Bootstrap

Comment puis-je changer la couleur d'arrière-plan 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 de bootstrap, y compris la .navbar-innerclasse, en la ciblant dans votre propre feuille de style au lieu 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);
}

Il vous suffit de modifier tous ces styles avec les vôtres et ils seront repris, comme quelque chose comme celui-ci par exemple, où j'élimine tous les effets de dégradé et définit simplement une couleur de fond noire solide:

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

Vous pouvez profiter d'outils tels que l' éditeur de dégradés 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 recommanderais 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 ^v2.0.2 ), il est donc préférable d'inclure tous les 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 assurer la cohérence entre les navigateurs.

Une excellente ressource pour voir comment thématiser le bootstrap est: bootswatch.com . Il a de beaux exemples et montre également du code. En bref, ils utilisent lessc pour recompiler le fichier bootstrap.css dans votre nouveau color-theme.css. La bonne chose de leur approche est qu'elle repose sur le bootstrap, donc lorsque le bootstrap est mis à jour, il vous suffit de recompiler.

Liens sur l'utilisation de lessc et bootstrap:

• Utiliser bootstrap avec moins
• Lessc.org

Si vous n'avez pas le temps d'en apprendre "moins" ou de le faire correctement, voici un sale hack ...

Ajoutez ceci ci-dessus à l'endroit où vous affichez le code HTML de la barre de navigation bootstrap - mettez à jour les couleurs si nécessaire.

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>

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 ici qui suggèrent de remplacer .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 actuellement de faire de même 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 less dans le répertoire, puis modifiez le fichier variables.less et vous pouvez changer beaucoup de variables en fonction de ce dont vous avez besoin, 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 que vous avez fait cela, 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 ajouter un dégradé, une bordure et un rayon de bordure:

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

* Si vous utilisez le gem rails, 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 vous pouvez voir la démo ici http://caverne.fr en haut

Dans la ligne bootstrap.css 4784, nous voyons:

.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 rasoir d'occam ne dirait-il pas de faire cela jusqu'à ce que vous ayez besoin de quelque chose de plus complexe? C'est un peu un hack, mais peut répondre 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 LESS ou SASS de 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 changer la barre de navigation Bootstraps. Vous n'avez pas besoin d'écrire des remplacements et le code reste propre.

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

En fait, je remplace tout ce que je veux changer dans site.css, vous devez charger le site.css après le démarrage pour qu'il écrase les classes. Ce que j'ai fait maintenant, c'est juste de créer mes propres cours avec mon propre petit thème de 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 changé les goûts des erreurs de validation de la même manière.