Comment puis-je écraser les styles dans Twitter Bootstrap ? Par exemple, j'utilise actuellement une classe .sidebar dont la règle CSS est " float : left ; ". Comment puis-je la modifier pour qu'elle soit plutôt orientée vers la droite ? J'utilise HAML et SASS, mais je suis relativement novice en matière de développement Web.
Réponses
Trop de publicités?
citelao
Points
1599
Toutes ces astuces fonctionneront, mais une manière plus simple serait d'inclure votre feuille de style après les styles Bootstrap.
Si vous incluez votre css ( site-specific.css ) après celui de Bootstrap ( bootstrap.css ), vous pouvez remplacer les règles en les redéfinissant.
Par exemple, si c'est de cette manière que vous incluez le CSS dans votre fichier <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />Vous pouvez tout simplement déplacer la barre latérale vers la droite en écrivant (dans votre fichier site-specific.css ) :
.sidebar {
float: right;
}Pardonnez l'absence de HAML et de SASS, je ne les connais pas assez bien pour écrire des tutoriels dans ces langues.
kaizer1v
Points
33
La réponse à cette question est la spécificité des CSS. Vous devez être plus "spécifique" dans votre CSS pour qu'il puisse remplacer les propriétés CSS de bootstrap.
Par exemple, vous avez un exemple de code pour un menu bootstrap 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 rappeler la hiérarchie de la spécificité. C'est comme ça :
- Donner un élément avec un id mentionné 100 points
- Donner un élément avec une classe mentionnée 10 points
- Donnez à un élément simple un seul 1 point
Donc, pour l'exemple ci-dessus, 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 */Ainsi, même si vous avez défini le .navbar a après .navbar ul li a il va toujours passer outre avec une couleur rouge, au lieu d'un vert puisque la spécificité est plus grande (13 points).
Ainsi, tout ce que vous devez faire, c'est calculer les points pour l'élément dont vous voulez modifier la CSS, via inspecter l'élément dans votre navigateur. Ici, bootstrap a spécifié son css pour l'élément en tant que
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}Ainsi, même si votre css est chargé 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 dispose de 22 points (calculez-le vous-même). Nous avons donc besoin de quelque chose de plus que cela. Ainsi, j'ai ajouté des ID personnalisés aux éléments, c'est-à-dire home-menu-container et home-menu. Maintenant le css suivant va fonctionner :
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */C'est fait.
Vous pouvez vous référer à ce Lien MDN .
Diodeus
Points
67946
Vous pouvez écraser une classe CSS en la rendant "plus spécifique".
Vous remontez l'arbre HTML et spécifiez les éléments parents :
div.sidebar { ... } est plus spécifique que .sidebar { ... }
Vous pouvez aller jusqu'à BODY si vous le souhaitez :
body .sidebar { ... } remplacera pratiquement tout.
Consultez ce guide pratique : http://css-tricks.com/855-specifics-on-css-specificity/
Ali Adravi
Points
932
Si vous voulez écraser tout css dans le bootstrap, utilisez !important
Disons que voici la classe d'en-tête de page dans bootstrap qui a une marge de 40px en haut, mon client ne l'aime pas et il veut qu'elle soit de 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é une classe 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, qui écrasera la marge de la classe page-header de bootstarp.
