web-dev-qa-db-fra.com

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 de fond?

colorstwitter-bootstrapnavbar
114
Gattoo

Vous pouvez écraser les couleurs d'amorçage, y compris la classe .navbar-inner, en le ciblant dans votre propre feuille de style, par opposition à la modification de la feuille de style bootstrap.css, comme suit:

.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 le vôtre et ils seront repris, comme par exemple, où j'élimine tous les effets de dégradés et crée 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 tirer parti d'outils tels que Colorzilla Gradient Editor 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 que la feuille de style aura été mise à jour (la version actuelle est v2.0.2) il est donc préférable d’inclure toutes vos modifications dans votre propre feuille de style, en tandem avec la feuille de style bootstrap.css. Mais n'oubliez pas d'écraser toutes les propriétés appropriées pour assurer la cohérence entre les navigateurs.

134
Andres Ilich

Une excellente ressource pour savoir comment initialiser le thème est: bootswatch.com . Il a de beaux exemples et montre le code aussi. En bref, ils utilisent lessc pour recompiler le fichier bootstrap.css dans votre nouveau fichier color-theme.css. La bonne chose à faire de leur approche est de construire sur le dessus de bootstrap, donc quand le bootstrap est mis à jour, il vous suffit de recompiler.

Liens sur l'utilisation de lessc et bootstrap: 

30
Alexander Poslavsky

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

Ajoutez ce qui précède lorsque vous rendez le code HTML de la barre de navigation d’amorçage - mettez à jour les couleurs selon les besoins.

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

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

Les solutions suggérant de surcharger .navbar-inner n'ont pas fonctionné pour moi - la couleur est restée la même.

La couleur n'a changé que lorsque j'ai remplacé la barre .nav, comme indiqué ci-dessous:

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

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

4
Andrew Thomas

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

$ npm install -g less jshint recess uglify-js

Une fois que cela est fait, allez dans le dossier less du répertoire, puis éditez le fichier variables.less et vous pourrez 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 que cela est fait, allez dans votre répertoire d’initialisation et lancez la commande make.

3
gauravmunjal

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

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

* Si vous utilisez la gemme Rails, Twitter-bootstrap-Rails, je le fais directement dans le fichier bootstrap_and_overrides.css.less *

2
Ryan

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);
}

cela fonctionne bien pour tout navigateur vous pouvez voir la démo ici http://caverne.fr sur le dessus

2
user2545728

Dans la ligne 4784 de bootstrap.css, 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é.

1
Roopkunwar

Si vous utilisez la version LESS 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 les remplacements et le code reste propre.

1
Ronak Jain

Le rasoir d'Occam ne dirait-il pas de faire ceci jusqu'à ce que vous ayez besoin de quelque chose de plus complexe? C'est un peu un bidouillage, 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
}
1
Krishan Gupta

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

0
Samuel

En fait, je viens d'écraser tout ce que je veux changer dans le 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 classes avec mon propre petit thème bootstrap. 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.

0
Michael