Comment remplacer le style dans Twitter Bootstrap

Comment puis-je remplacer les styles dans Twitter Bootstrap? Par exemple, j’utilise actuellement une classe .sidebar qui a la règle CSS ‘float: left;’ Comment puis-je changer cela pour qu’il se tourne plutôt vers la droite? J’utilise HAML et SASS mais je suis relativement nouveau dans le développement web.

Ajoutez votre propre classe, ex:

, avec le CSS comme

 .sidebar.right { float:right } 

Tous ces conseils fonctionneront, mais une manière plus simple pourrait être d’inclure votre feuille de style après les styles Bootstrap.

Si vous incluez votre css ( site-specific.css ) après Bootstrap ( bootstrap.css ), vous pouvez remplacer les règles en les redéfinissant.

Par exemple, si vous incluez CSS dans votre

   

Vous pouvez simplement déplacer la barre latérale vers la droite en écrivant (dans votre fichier site-specific.css ):

 .sidebar { float: right; } 

Pardonnez le manque de HAML et SASS, je ne les connais pas assez pour y écrire des tutoriels.

La réponse à cette question est la spécificité CSS. Vous devez être plus “spécifique” dans votre CSS pour pouvoir remplacer les propriétés css du bootstrap.

Par exemple, vous avez un exemple de code pour un menu bootstrap ici:

  

Ici, vous devez vous souvenir de la hiérarchie de la spécificité. Ça va comme ça:

  • Donner un élément avec un identifiant mentionné 100 points
  • Donner un élément avec une classe mentionnée 10 points
  • Donner un élément simple un seul point

Donc, pour ce qui précède, si votre css a quelque chose comme ça:

 .navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */ .navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */ 

Donc, même si vous avez défini le .navbar a après .navbar a .navbar ul li a il va toujours remplacer une couleur rouge au lieu d’un vert puisque la spécificité est plus grande (13 points).

Donc, fondamentalement, tout ce que vous avez à faire est de calculer les points pour l’élément pour lequel vous souhaitez modifier le css, via l’élément inspect de votre navigateur. Ici, bootstrap a spécifié son css pour l’élément comme

 .navbar-inverse .navbar-nav>li>a { /* Total = 22 points */ color: #999; } 

Donc, même si votre css est en cours de chargement, il est chargé après bootstrap.css qui a la ligne suivante:

 .navbar-nav li a { color: red; } 

il va encore être rendu comme # 999. Pour résoudre ce problème, bootstrap a 22 points (calculez-le vous-même). Donc, tout ce dont nous avons besoin est quelque chose de plus que cela. Ainsi, j’ai ajouté des identifiants personnalisés aux éléments, c’est-à-dire le conteneur de menu d’accueil et le menu d’accueil. Maintenant, le css suivant fonctionnera:

 #home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */ 

Terminé.

Vous pouvez vous référer à ce lien MDN .

Vous pouvez remplacer une classe CSS en la rendant plus spécifique.

Vous montez l’arborescence HTML et spécifiez les éléments parents:

div.sidebar { ... } est plus spécifique que .sidebar { ... }

Vous pouvez aller jusqu’à BODY si vous avez besoin de:

body .sidebar { ... } remplacera pratiquement tout.

Voir ce guide pratique: http://css-sortingcks.com/855-specifics-on-css-specificity/

Vous pouvez simplement vous assurer que votre fichier css parsing AFTER boostrap.css, comme ceci:


Si vous voulez écraser un css dans bootstrap, utilisez!

Disons que voici la classe d’en-tête de page dans bootstrap qui a une marge de 40px au dessus, mon client n’aime pas ça et il veut qu’il soit 15 en haut et 10 en bas seulement

 .page-header { border-bottom: 1px solid #EEEEEE; margin: 40px 0 20px; padding-bottom: 9px; } 

J’ai donc ajouté la classe dans mon fichier site.css avec le même nom

 .page-header { padding-bottom: 9px; margin: 15px 0 10px 0px !important; } 

Notez le! Important avec ma marge, qui remplacera la marge de la marge de la classe des en-têtes de page bootstarp.

Je suis arrivé en retard, mais je pense qu’il pourrait utiliser une autre réponse.

Si vous utilisez sass, vous pouvez réellement modifier les variables avant d’importer le bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Changez l’un d’eux, tel que:

 $bodyBackground: red; @import "bootstrap"; 

Si une variable n’est pas disponible pour ce que vous souhaitez modifier, vous pouvez également remplacer les styles ou append les vôtres.

Toupet:

 @import "bootstrap"; /* override anything manually, like rounded buttons */ .btn { border-radius: 0; } 

Voir aussi ceci: Structure d’actif SCSS appropriée dans les rails

Je sais que c’est une vieille question mais j’ai quand même rencontré un problème similaire et je me suis rendu compte que mon code CSS “ne fonctionnait pas” dans mon fichier bootstrapOverload.css avait été écrit après les media queries du media queries . quand je l’ai déplacé au-dessus des requêtes des médias, il a commencé à fonctionner.

Juste au cas où quelqu’un d’autre serait confronté au même problème