Comment écraser le style dans Twitter Bootstrap

128

Comment puis-je écraser 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 aille vers la droite à la place? J'utilise HAML et SASS mais je suis relativement nouveau dans le développement Web.

css twitter-bootstrap John
la source
Voir aussi: stackoverflow.com/questions/8596794/…
Zim

Réponses:

41

Ajoutez votre propre classe, ex:, <div class="sidebar right"></div>avec le CSS comme

.sidebar.right { 
    float:right
}
motoxer4533
la source
1
Pas une bonne pratique: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
Damjan Pavlica
2
@DamjanPavlica Honnêtement? Vous vous souciez toujours d'IE 6? Sans oublier que, je pense, le bootstrap utilise le chaînage.
Błażej Michalik
233

Tous ces conseils fonctionneront, mais un moyen 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's ( bootstrap.css), vous pouvez remplacer les règles en les redéfinissant.

Par exemple, si c'est ainsi que vous incluez le CSS dans votre <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

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

.sidebar {
    float: right;
}

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

Citelao
la source
7
@ClaudiuConstantin Je ne vois aucune raison pourquoi pas. La règle de base est que le deuxième style l' emportera toujours sur le premier si deux d'entre eux ont le même niveau de spécificité. Tant que votre style vient après, il prévaudra.
citelao
3
@Kreker Cela a probablement beaucoup à voir avec la spécificité. Vous pouvez en savoir plus ici (ancien article), mais il .sidebar.rightest fondamentalement plus spécifique que .sidebar. C'est probablement le problème. Utilisez l'inspecteur Web pour déterminer ce qui le remplace.
citelao
2
@Kreker yup, c'est l'idée. Le problème, !importantc'est que vous ne pourrez plus jamais le remplacer à l'avenir.
citelao
5
My Site.cssest regroupé et répertorié dans Bundle.configet rendu physiquement après, bootstrap.css mais les styles ne sont toujours pas remplacés. J'ai dû retirer la site.cssréférence du bundle de modernisation et la mettre manuellement après le bootstrap.css(et appuyez sur Ctrl + F5 une fois le débogage pour vider le cache)
atconway
1
Cela pourrait fonctionner, mais ce ne serait pas la meilleure pratique pour la production. Chargez 1 feuille de style par site à moins qu'il n'y ait une grande raison de ne pas le faire. #sitespeed
Ben Racicot
58

La réponse à cela est la spécificité CSS. Vous devez être plus "spécifique" dans votre CSS afin qu'il puisse remplacer les propriétés css bootstrap.

Par exemple, vous avez un exemple de code pour un menu d'amorçage ici:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

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
  • Donnez un élément avec une classe mentionnée 10 points
  • Donner à un élément simple un seul 1 point

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

.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 l' .navbar aaprès, .navbar ul li ail va toujours être remplacé par une couleur rouge, au lieu d'un vert puisque la spécificité est plus (13 points).

Donc, en gros, tout ce que vous avez à faire est de calculer les points pour l'élément pour lequel vous souhaitez modifier le css, via inspect element sur 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;
}

Ainsi, 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 sera toujours 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, c'est quelque chose de plus que cela. Ainsi, j'ai ajouté des identifiants personnalisés aux éléments, à savoir 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 .

kaizer1v
la source
1
Et s'ils sont à égalité?
Confus
2
Cela n'a pas d'importance, par exemple «.abc.xyz» signifie qu'il y a un élément avec la classe «abc» et «xyz» - il le prendra toujours comme un élément unique avec une classe. Ainsi, 10 points. il en va de même pour une pièce d'identité.
kaizer1v
1
Bien écrit! Je vous remercie!
GobSmack
1
C'était le truc pour moi. J'avais du mal à maîtriser le blockquotestyle dans le CSS Bootstrap. Étrangement, c'était faux pour les blockquotes normaux mais avait l'air correct pour et <ul> dans un blockquote. La clé était de mettre à jour mon CSS blockquote p, ce qui donnait une priorité suffisante. Le <ul> faisait cela pour l'autre section de la page.
Adam Wuerl
20

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

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

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

Vous pouvez aller jusqu'au BODY si vous avez besoin de:

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

Consultez ce guide pratique: http://css-tricks.com/855-specifics-on-css-specificity/

Diodeus - James MacFarlane
la source
C'est en fait la meilleure réponse
CodyBugstein
9

Vous pouvez simplement vous assurer que votre fichier css analyse APRÈS boostrap.css, comme ceci:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">

Gothburz
la source
6

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

Disons que voici la classe d'en-tête de page dans bootstrap qui a une marge de 40 px en haut, mon client ne l'aime pas et il veut qu'elle soit 15 en haut et 10 en bas uniquement

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

J'ai donc ajouté une classe dans mon fichier site.css avec le même nom comme celui-ci

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

Notez le! Important avec ma marge, qui écrasera la marge de la marge de la classe d'en-tête de page bootstarp.

Ali Adravi
la source
impressionnant! C'est ce que je veux. Merci
Gisway
2
Notez que l'utilisation de! Important est en quelque sorte un anti-pattern. En savoir plus ici: james.padolsey.com/css/dont-use-important
mayatron
3

Je suis tombé sur ce tard, mais je pense que cela pourrait utiliser une autre réponse.

Si vous utilisez sass, vous pouvez en fait modifier les variables avant d'importer bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Modifiez l'un d'entre eux, par exemple:

$bodyBackground: red;
@import "bootstrap";

Sinon, s'il n'y a pas de variable disponible pour ce que vous souhaitez modifier, vous pouvez remplacer les styles ou ajouter les vôtres.

Toupet:

@import "bootstrap";

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

Voir aussi ceci: Structure d'actifs SCSS appropriée dans les rails

AJcodez
la source
2

Je sais que c'est une vieille question mais quand même, je suis tombé sur un problème similaire et je me suis rendu compte que mon code css "ne fonctionnant pas" dans mon bootstrapOverload.cssfichier a été écrit après le media queries. quand je l'ai déplacé au-dessus des requêtes médiatiques, il a commencé à fonctionner.

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

md1hunox
la source