couleur de la barre de navigation dans Twitter Bootstrap


113

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?


1
Résolu. Modifications apportées à bootstrap.css .navbar-inner {background-color: # 2c2c2c; changé la couleur de fond, commenté tout le reste. Merci.
Gattoo

12
ne vous recommande pas de modifier la feuille de style css principale de bootstrap simplement parce que lorsque vous mettez à jour la feuille de style, toutes vos modifications seront perdues, alors incluez simplement la modification dont vous avez besoin dans votre propre feuille de style.
Andres Ilich

Merci Andres, Quels sont les autres moyens de changer le comportement du Bootstrap? La barre de navigation est une douleur pour la plupart des sites car ils ne sont tout simplement pas capables de croire que le Web est aussi bon pour l'esthétique que pour la fonctionnalité.
Gattoo

4
Vous pouvez en fait écraser la plupart des règles d'amorçage dans votre propre feuille de style, vous n'avez pas du tout besoin de toucher la feuille de style bootstrap.css. De cette façon, lorsque le bootstrap est mis à jour, vous pouvez simplement le mettre à jour immédiatement et toutes vos modifications resteront, et de cette manière, vous pouvez également écraser les styles de boostrap pour répondre à vos besoins (qu'il s'agisse de polices ou de couleurs) de votre site.
Andres Ilich

Réponses:


134

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.


2
background-image: none;six fois?
Nowaker

2
@DamianNowak woh, je viens de remarquer que, merci pour le conseil: D ultime pet de cerveau.
Andres Ilich

Je vous remercie. Cela me rendait fou de ne pas pouvoir définir la couleur d'arrière-plan sur quoi que ce soit et que cela s'applique à l'ensemble de la barre de navigation.
Automatico

30

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:


Merveilleuses ressources Alexander. Merci beaucoup.
Gattoo

1
Merci pour le lien bootswatch :)
Akshat Jiwan Sharma

6

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>


4

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

3

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.


2

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 *


2

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


1

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


1

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
}

1

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.



0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.