114 votes

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?

134voto

Andres Ilich Points 41712

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.

30voto

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:

6voto

JGilmartin Points 1974

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>
 

4voto

Andrew Thomas Points 639

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

3voto

gauravmunjal Points 160

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: