web-dev-qa-db-fra.com

Changer la couleur de la barre de navigation dans Twitter bootstrap 2.0.4

Je me demandais si quelqu'un savait comment changer la couleur de la barre de navigation dans bootstrap v2.0.4

J'ai essayé cette solution qui ne semble pas fonctionner: couleur de la barre de navigation dans Twitter Bootstrap

D'autres solutions? J'ai essayé les packages personnalisés bootstrap, mais je suis si loin dans le développement que je peux faire un changement comme ça.

Code:

.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);}
csshtml5twitter-bootstrap
33
jacobronniegeorge

La couleur de la barre de navigation provient des lignes .navbar-inner 3582 à 3589 dans bootstrap.css (pour la version 2.0.4)

.navbar-inner in boostrap.css

Les propriétés CSS sont appliquées dans un ordre spécifique

  • couleur de fond (reconnue par tous les navigateurs Web)
  • préfixes du fournisseur -moz, -ms, -webkit, -o (pour servir un navigateur Web spécifique)
  • la norme (mais pas encore implémentée)

Exemple de remplacement de la couleur d'arrière-plan dans boostrap.css avec Chrome:

background-color:#ffffff; a été remplacé par background-color:#eab92d directement dans boostrap.css (ce n'est pas recommandé mais c'est juste pour illustrer le point).

background-color: #EAB92D est appliqué en premier

-moz-linear-gradient et -ms-linear-gradient sont ignorés

-webkit-gradient couverture background: #EAB92D (retour au dégradé par défaut)

-webkit-linear-gradient remplace -webkit-gradient

-o-linear-gradient et linear-gradient sont ignorés

.navbar-inner with backgroud-color replaced

.navbar-inner with backgroud-color replaced result

Changer la couleur de .navbar-inner de colorzilla

Vous pouvez facilement créer un dégradé multi-navigateur avec colorzilla

Créer un <style> faire <head> après l'appel de bootstrap.css.

Copiez ensuite le css généré par colorzilla dans .navbar-inner {} à l'intérieur de <style> tag.

.navbar-inner {
  background: #eab92d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}

Le css généré par colorzilla remplace toutes les propriétés css de boostrap.css comme vous pouvez le voir ci-dessous

.navbar-inner large

.navbar-inner smallenter image description here

Changer '.navbar-inner' ne suffit pas, il faut changer quelques autres bits.

.navbar .btn-navbar (le bouton pour ouvrir le menu lorsque la largeur <768px) partage les mêmes propriétés que .navbar-inner

.navbar-inner, .navbar .btn-navbar {
    background: #eab92d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
    }

.divider-vertical (le séparateur vertical) utilise les mêmes couleurs que celles utilisées dans le dégradé

.navbar .divider-vertical {
    background-color: #c79810;
    border-right: 1px solid #eab92d;
    }

.active (le point culminant de la page active) correspond à la couleur sombre du dégradé

.navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: #c79810;
    }

la couleur du lien dans le menu doit également être modifiée, dans ce cas, 75% de la couleur claire du dégradé au blanc.

.navbar .nav > li > a {
    color: #f9ed9d;
    }

Et enfin la couleur du .brand, dans ce cas, 50% de la couleur claire du dégradé au blanc.

.navbar-fixed-top .brand {
    color: #634c08;color: #f4dc87;
    }

La couleur de survol des liens n'a pas été modifiée mais peut être avec:

.navbar .nav > li > a:hover {color:white;}

Idem pour la couleur du lien actif

.navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}

.navbar-inner result large.navbar-inner result small

65
baptme

Une méthode simple (avec le même résultat qui a été baptisé): je l'utilise dans Rails pour la disposition conditionnelle, (avec gem bootstrap-sass).

dans votre fichier scss, avant d'importer bootstrap, définissez quelques variables:

$navbarBackground:                #c79810 ;
$navbarBackgroundHighlight:       #eab92d ;
$navbarText:                      #f9ed9d ;
$navbarLinkColor:                 #f9ed9d ;
$navbarSearchPlaceholderColor:    #EEC844 ;

@import 'bootstrap' ;

Et je l'ai eu :)

14
Traz

Vous pouvez également utiliser le générateur de thème Twitter Bootstrap sur http://stylebootstrap.info/ et personnaliser facilement vos thèmes.

5
Matoeil

Si vous souhaitez uniquement utiliser la version précédente de Bootstrap dark look pour navbars, vous pouvez ajouter la classe .navbar-inverse à l'élément navbar.

<div class="navbar navbar-inverse">
1
Johann

Jetez un œil à l'aide de Firebug. Vous pouvez cliquer sur la barre de navigation exacte en question et voir exactement quels styles CSS s'y appliquent.

0
darkAsPitch

Extension de la réponse super concise @Traz pour MOINS pour les personnes utilisant la gemme Twitter-bootstrap-Rails

@navbarBackground:                #c79810 ;
@navbarBackgroundHighlight:       #eab92d ;
@navbarText:                      #f9ed9d ;
@navbarLinkColor:                 #f9ed9d ;
@navbarSearchPlaceholderColor:    #EEC844 ;
0
Nilesh