128 votes

Comment faire pour remplacer le style de Twitter Bootstrap

Comment puis-je remplacer le stylings sur Twitter Bootstrap? Par exemple, je suis actuellement en utilisant un .barre latérale de la classe qui a la règle CSS 'float: left;" Comment puis-je changer cela pour que cela se passe à droite à la place? Je suis l'aide de HAML et SASS, mais je suis relativement nouveau pour le développement web.

234voto

citelao Points 1599

Tous ces conseils de travail, mais un moyen plus simple serait d'inclure votre feuille de style après le démarrage styles.

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 ce que vous incluez CSS dans votre <head>

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

Il vous suffit de bouger la barre latérale à droite par écrit (dans votre site-specific.css le fichier):

.sidebar {
    float: right;
}

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

59voto

kaizer1v Points 33

La réponse à cette question est CSS Spécificité. Vous devez être le plus "spécifique" dans votre CSS de sorte qu'elle peut annuler les propriétés css de bootstrap.

Par exemple, vous avez un exemple de code pour un bootstrap menu 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é. Il va comme ceci:

  • Donner un élément avec un id mentionnés 100 points
  • Donner un élément avec une classe 10 points
  • Donner un simple élément d'un seul 1 point

Donc, pour le 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 */

Donc, même si vous avez défini l' .navbar a après .navbar ul li a il est toujours en cours pour remplacer avec une couleur rouge au lieu de vert, puisque la spécificité est de plus en plus (13 points).

Donc, en gros, tout ce que vous devez faire est de calculer les points pour l'élément que vous êtes désireux de modifier le css pour, via inspecter l'élément sur votre navigateur. Ici, bootstrap a spécifié son css de l'élément

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

Ainsi, même si votre css est le chargement est en cours de chargement après bootstrap.css qui a la ligne suivante:

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

il va toujours être traduit en tant que #999. Pour résoudre ce problème, bootstrap a 22 points (calculez vous-même). De sorte que tous nous avons besoin est quelque chose de plus que cela. Donc, j'ai ajouté des Identifiants personnalisés pour les éléments à savoir la maison-menu-conteneur et la maison-menu. Maintenant le code css suivant:

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

Fait.

41voto

motoxer4533 Points 2119

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

.sidebar.right { 
    float:right
} 

20voto

Diodeus Points 67946

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

Vous allez le code HTML de l'arbre, et de spécifier les éléments parents:

div.sidebar { ... } plus précis que l' .sidebar { ... }

Vous pouvez aller tout le chemin jusqu'à CORPS si vous avez besoin de:

body .sidebar { ... } remplace pratiquement n'importe quoi.

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

6voto

Ali Adravi Points 932

Si vous souhaitez écraser le fichier css de bootstrap utiliser !important

Disons ici est la page d'en-tête de classe dans le bootstrap qui ont 40px de la marge du haut, mon client ne l'aime pas et il le veux à 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é de la classe dans mon site.css fichier avec le même nom comme ceci

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

Note le !important avec ma marge, qui va remplacer la marge de bootstarp page-en-tête de la classe de la marge.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: