Comment puis-je outrepasser Bootstrap CSS styles?

je dois modifier bootstrap.css pour correspondre à mon site web. Je pense qu'il est préférable de créer un fichier séparé custom.css au lieu de modifier bootstrap.css directement, une raison étant que si bootstrap.css obtenir une mise à jour, je vais souffrir d'essayer de re-inclure toutes mes modifications. Je vais sacrifier un peu de temps pour ces styles, mais c'est négligeable pour les quelques styles que je supplante.

Hw dois-je remplacer bootstrap.css de sorte que je supprimer l' style d'une ancre / classe? Par exemple, si je veux supprimer toutes les règles de style pour legend : 

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

je peux simplement supprimer tout cela dans bootstrap.css , mais si ma compréhension des meilleures pratiques sur les CSS est correcte, que devrais-je faire à la place?

pour être clair, je veux supprimer tous ces styles de légende et utiliser les valeurs CSS de parent. Donc, en combinant la réponse de Pranav, vais-je faire ce qui suit? 

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(j'espérais qu'il y a moyen de faire quelque chose comme ce qui suit:) 

legend {
  clear: all;
}
180
demandé sur TylerH 2013-12-21 20:47:27

10 réponses

L'utilisation de !important n'est pas une bonne option, car vous voudrez très probablement outrepasser vos propres styles à l'avenir. Cela nous laisse avec des priorités CSS.

fondamentalement, chaque sélecteur a son propre "poids" numérique:

  • 100 points pour IDs
  • 10 points pour les classes et pseudo-classes
  • 1 point pour les sélecteurs d'étiquettes et les pseudo-éléments

parmi deux le navigateur selector styles choisira toujours celui qui a le plus de poids. L'ordre de vos feuilles de style n'a d'importance que lorsque les priorités sont égales - c'est pourquoi il n'est pas facile d'outrepasser Bootstrap.

votre option est d'inspecter les sources Bootstrap, trouver comment exactement un style spécifique est défini, et copier ce sélecteur pour que votre élément ait la même priorité. Mais on perd un peu la douceur du Bootstrap.

la façon la plus facile de surmonter cela est de assignez un identifiant arbitraire supplémentaire à l'un des éléments racine de votre page, comme ceci: <body id="bootstrap-overrides">

de cette façon, vous pouvez juste préfixer n'importe quel sélecteur CSS avec votre ID, ajoutant instantanément 100 points de poids à l'élément, et en outrepassant les définitions Bootstrap: 

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}
395
répondu smugglerFlynn 2018-08-28 02:23:21

dans la section tête de votre place html votre coutume.css en dessous de bootstrap.CSS. 

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

puis dans coutume.css vous devez utiliser exactement le même sélecteur pour l'élément que vous souhaitez remplacer. Dans le cas de legend il reste simplement legend dans votre personnalisé.css parce que bootstrap n'a pas de sélecteur plus spécifique. 

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

mais dans le cas de h1 par exemple, vous devez prendre soin des sélecteurs plus spécifiques comme .jumbotron h1 parce que 

h1 {
  line-height: 2;
  color: #f00;
}

n'annule pas 

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Voici une explication utile de la spécificité des sélecteurs css que vous devez comprendre pour savoir exactement quelles règles de style s'appliqueront à un élément. http://css-tricks.com/specifics-on-css-specificity /

Tout le reste est juste une question de copier/coller et modifier les styles.

71
répondu Markus Kottländer 2013-12-21 17:04:30

il ne devrait pas affecter le temps de charge beaucoup puisque vous êtes des parties prépondérantes de la feuille de style de base.

voici quelques bonnes pratiques que je suis personnellement:

  1. chargez toujours le fichier CSS personnalisé après le fichier CSS de base (non responsive).
  2. éviter d'utiliser !important si possible. Qui peut outrepasser certains styles importants des fichiers CSS de base.
  3. chargez toujours bootstrap-responsive.css après personnaliser.css si vous ne voulez pas perdre les requêtes des médias. - DOIT SUIVRE
  4. préfère modifier les propriétés requises (pas toutes).
26
répondu Rahul Patil 2018-08-28 02:24:16

liez votre coutume.fichier css comme dernière entrée sous le bootstrap.CSS. Personnaliser.les définitions de style css annuleront bootstrap.css

Html 

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

copier toutes les définitions de style de la légende dans la coutume.css et y apporter des modifications (comme margin-bottom:5px; -- Cela overrider margin-bottom:20px; )

15
répondu Paramasivan 2013-12-21 17:01:57

si vous planifiez d'effectuer des changements assez grands, il pourrait être une bonne idée de les faire démarrer directement et de le reconstruire. Vous pouvez alors réduire le nombre de données chargées. S'il vous plaît se référer à Bootstrap sur GitHub pour le guide de construction.

3
répondu Victor Häggqvist 2018-05-11 20:49:52

un peu tard, mais ce que j'ai fait est que j'ai ajouté une classe à la racine div puis étend tous les éléments bootstrap dans ma feuille de style personnalisé: 

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>
2
répondu mr5 2018-08-28 02:25:21

pour réinitialiser les styles définis pour legend dans bootstrap, vous pouvez faire ce qui suit dans votre fichier css: 

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all /

la propriété all dans CSS réinitialise tous les éléments sélectionnés propriétés, à l'exception des propriétés direction et unicode-bidi qui contrôle de l'orientation du texte.

les valeurs possibles sont: initial , inherit & unset .

note de Côté: "151950920 de la propriété" est utilisé en relation avec float ( https://css-tricks.com/almanac/properties/c/clear/ )

0
répondu Vivek Athalye 2018-08-28 04:57:24

j'ai découvert que (bootrap 4) Mettre votre css onw derrière bootstrap.css et .js est la meilleure solution.

trouvez l'article que vous voulez changer (inspecter l'élément) et utilisez la même déclaration exacte, puis il aura priorité.

Il m'a fallu peu de temps pour comprendre cela.

-1
répondu Henry 2017-11-25 10:21:03

donner une identification à la légende et appliquer css. Comme add id hello to legend() la css est comme suit: 

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
-2
répondu Amar Gaur 2018-05-25 07:10:44

utiliser jquery css au lieu de css . . . jquery ont la priorité sur bootstrap css...

E. g 

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}
-5
répondu Ajeet Sankhwal 2017-05-29 02:04:24