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.
Réponses:
Ajoutez votre propre classe, ex:, <div class="sidebar right"></div>avec le CSS comme
.sidebar.right {
float:right
} 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.
!importantc'est que vous ne pourrez plus jamais le remplacer à l'avenir.
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)
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:
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 .
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.
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/
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.
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
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