web-dev-qa-db-fra.com

Comment écraser le style sur Twitter Bootstrap

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

csstwitter-bootstrap
128
John

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

.sidebar.right { 
    float:right
}
41
motoxer4533

Toutes ces astuces fonctionneront, mais une méthode plus simple pourrait consister à 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 c’est ainsi que vous incluez 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 fichier site-specific.css]):

.sidebar {
    float: right;
}

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

234
citelao

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

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

<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 rappeler la hiérarchie de la spécificité. Ça va comme ça:

  • Donne un élément avec un identifiant mentionné 100 points
  • Donne un élément avec une classe mentionnée 10 points
  • Attribuez à un élément simple un seul 1 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 */

Ainsi, même si vous avez défini le .navbar a après .navbar ul li a, il sera toujours remplacé par une couleur rouge, au lieu d'un vert, car la spécificité est supérieure (13 points).

En gros, tout ce que vous avez à faire est de calculer les points de l'élément pour lequel vous souhaitez modifier le fichier css, via l'élément inspect de votre navigateur. Ici, bootstrap a spécifié sa 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 le fichier bootstrap.css qui contient la ligne suivante:

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

ça va toujours être rendu comme # 999. Afin de résoudre ce problème, bootstrap a 22 points (calculez-le vous-même). Nous avons donc besoin de quelque chose de plus que cela. Ainsi, j’ai ajouté des identifiants personnalisés aux éléments, à savoir home-menu-container et home-menu. 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 à ceci lien MDN .

58
kaizer1v

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'à BODY si vous avez besoin de:

body .sidebar { ... } annulera pratiquement tout.

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

20
Diodeus - James MacFarlane

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">

9
Gothburz

Si vous voulez écraser n'importe quel css dans bootstrap, utilisez! Important

Supposons que la classe d'en-tête de page dans bootstrap ait une marge de 40 pixels en haut, que mon client ne l'aime pas et qu'il souhaite que ce 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é class dans mon fichier site.css avec le même nom, comme ceci

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

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

6
Ali Adravi

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

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

Changer l'un d'eux, tels que:

$bodyBackground: red;
@import "bootstrap";

Sinon, s'il n'y a pas de variable disponible pour ce que vous voulez changer, 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'actif SCSS appropriée dans Rails

3
AJcodez

Je sais que c’est une vieille question, mais j’ai rencontré un problème similaire et j’ai réalisé que mon code css "ne fonctionnait pas" dans mon fichier bootstrapOverload.css avait été écrit après le media queries. quand je l'ai déplacé au-dessus des requêtes multimédia, il a commencé à fonctionner.

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

2
md1hunox