couleur de la barre de navigation dans Twitter Bootstrap

Question

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?

Answer 1

Vous pouvez remplacer le bootstrap de couleurs, y compris l' .navbar-inner classe, par cibler dans votre propre feuille de style plutôt que de modifier le fichier de bootstrap.la feuille de style 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 avez juste à modifier l'ensemble de ces styles avec votre propre et ils vont te chercher, comme quelque chose comme ceci par exemple, où j'ai d'éliminer tous les effets de dégradé et il suffit de mettre un noir solide background-color:

.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 des outils tels que la Colorzilla Éditeur de Dégradé et de créer votre propre dégradé de couleurs pour tous les navigateurs et remplacer les couleurs de l'original avec votre propre.

Et comme je l'ai mentionné sur les commentaires, je ne voudrais pas vous recommandons de modifier le fichier de bootstrap.la feuille de style css directement comme l'ensemble de vos changements seront perdus une fois la feuille de style est mis à jour (version actuelle est la ^v2.0.2) donc, il est préférable que vous comprennent l'ensemble de vos modifications à l'intérieur de votre propre feuille de style, en tandem avec le bootstrap.la feuille de style css. Mais n'oubliez pas de remplacer toutes les propriétés appropriées pour assurer la cohérence entre les différents navigateurs.

Answer 2

Une excellente ressource pour voir comment le thème bootstrap est: bootswatch.com. Il a de beaux exemples et montre le code. En bref, ils utilisent lessc de recompiler le bootstrap.css de votre nouvelle couleur de thème.css. La bonne chose de leur approche est que c'est bâtir sur le dessus de bootstrap, de sorte que lorsque le bootstrap est mis à jour, vous venez de le recompiler.

Liens sur l'utilisation de lessc et bootstrap:

• En utilisant bootstrap avec moins de
• Lessc.org

Answer 3

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.

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

Answer 4

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

Answer 5

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.