Comment remplacer les styles CSS Bootstrap?

234

Je dois modifier bootstrap.csspour s'adapter à mon site Web. Je pense qu'il vaut mieux créer un custom.cssfichier séparé au lieu de le modifier bootstrap.cssdirectement, l'une des raisons étant que cela devrait bootstrap.cssobtenir une mise à jour, je souffrirai d'essayer de ré-inclure toutes mes modifications. Je sacrifierai un peu de temps de chargement pour ces styles, mais c'est négligeable pour les quelques styles que je remplace.

Comment remplacer bootstrap.csspour supprimer le style d'une ancre / classe? Par exemple, si je souhaite 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 bootstrap.css, mais si ma compréhension des meilleures pratiques sur le remplacement de CSS est correcte, que dois-je faire à la place?

Pour être clair, je veux supprimer tous ces styles de légende et utiliser les valeurs CSS des parents. 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 aurait un moyen de faire quelque chose comme ceci :)

legend {
  clear: all;
}
html css twitter-bootstrap Alex
la source

Réponses:

491

L'utilisation !importantn'est pas une bonne option, car vous voudrez probablement remplacer vos propres styles à l'avenir. Cela nous laisse des priorités CSS.

Fondamentalement, chaque sélecteur a son propre «poids» numérique:

  • 100 points pour les identifiants
  • 10 points pour les classes et pseudo-classes
  • 1 point pour les sélecteurs de balises et les pseudo-éléments
  • Remarque: Si l'élément a un style en ligne qui gagne automatiquement (1000 points)

Parmi deux styles de sélecteur, le navigateur 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 de remplacer Bootstrap.

Votre option consiste à inspecter les sources Bootstrap, à découvrir comment exactement un style spécifique est défini et à copier ce sélecteur afin que votre élément ait la même priorité. Mais nous perdons un peu toute la douceur de Bootstrap dans le processus.

Le moyen le plus simple de résoudre ce problème consiste à attribuer un ID arbitraire supplémentaire à l'un des éléments racine de votre page, comme ceci: <body id="bootstrap-overrides">

De cette façon, vous pouvez simplement préfixer n'importe quel sélecteur CSS avec votre ID, en ajoutant instantanément 100 points de poids à l'élément et en remplaçant les définitions de 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;
}
contrebandierFlynn
la source
puisque les identifiants ne peuvent être utilisés qu'une seule fois, pourquoi ne pas créer #bootstrap-overridesune classe?
chharvey
2
@chharvey: parce que vous finiriez par devoir mieux calculer. s'il s'agissait d'une classe dans cet exemple, ce serait prio 11 et si la définition css était après le bootstrap.css alors nous serions prêts à partir. Cependant, ce serait assez proche et le définir comme un identifiant qui augmente considérablement le prio, nous n'avons pas à nous soucier de calculer le prio et de tester aussi dur si nous l'avons toujours raison. plus facile avec un identifiant si vous voulez écraser définitivement la valeur par défaut.
hogan
Ça a fait ma journée. Je le sais et je suis toujours coincé à essayer de comprendre pourquoi mes styles ne sont pas interprétés.
hogan
3
Les points que vous avez mentionnés (100 pour les identifiants, 10 pour les classes / pseudo-classes, 1 pour les sélecteurs de balises / pseudo-éléments) sont-ils littéraux, ou avez-vous simplement créé ces valeurs pour cet exemple?
Kyle Vassella
2
Votre explication est bonne, elle a du sens comme moyen de l'expliquer à quelqu'un de nouveau au CSS, mais elle est trompeuse. Le nom correct pour ce que vous avez mentionné est css specificityqui définit le "poids" de chaque sélecteur css. Voici plus de détails à ce sujet: css-tricks.com/specifics-on-css-specificity/…
Adriano
85

Dans la section head de votre html, placez votre custom.css sous bootstrap.css.

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

Ensuite, dans custom.css, vous devez utiliser exactement le même sélecteur pour l'élément que vous souhaitez remplacer. Dans le cas, legendil reste simplement legenddans votre custom.css parce que bootstrap n'a pas de sélecteurs plus spécifiques.

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 h1par exemple, vous devez prendre soin des sélecteurs plus spécifiques comme .jumbotron h1parce que

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

ne remplacera 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 n'est qu'une question de copier / coller et de modifier les styles.

Markus Kottländer
la source
28

Cela ne devrait pas affecter le temps de chargement car vous remplacez des parties de la feuille de style de base.

Voici quelques bonnes pratiques que je suis personnellement:

  1. Chargez toujours le CSS personnalisé après le fichier CSS de base (ne répond pas).
  2. Évitez d'utiliser !importantsi possible. Cela peut remplacer certains styles importants des fichiers CSS de base.
  3. Chargez toujours bootstrap-responsive.css après custom.css si vous ne voulez pas perdre les requêtes multimédias. - DOIT SUIVRE
  4. Préférez modifier les propriétés requises (pas toutes).
Rahul Patil
la source
10
puisqu'il bootstrap-responsive.cssn'existe plus, est-ce toujours vrai, ou n'est-ce plus pertinent?
Shaun Wilson
20

Liez votre fichier custom.css comme dernière entrée sous le fichier bootstrap.css. Les définitions de style Custom.css remplaceront bootstrap.css

Html

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

Copiez toutes les définitions de style de légende dans custom.css et apportez-y des modifications (comme margin-bottom: 5px; - Cela remplacera margin-bottom: 20px;)

Paramasivan
la source
Oui, je l'ai déjà fait. Désolé ma question n'était pas claire. Ma question demandait quoi faire dans custom.css pour remplacer les styles de bootstrap.min.css.
Alex
Et si j'utilise également bootstrap-theme.min.css?
Quasaur
A fonctionné pour moi, même avec min css
mimi
5

Pour réinitialiser les styles définis legenddans bootstrap, vous pouvez effectuer les opérations suivantes dans votre fichier css:

legend {
  all: unset;
}

Réf: https://css-tricks.com/almanac/properties/a/all/

La propriété all dans CSS réinitialise toutes les propriétés de l'élément sélectionné, à l'exception des propriétés direction et unicode-bidi qui contrôlent la direction du texte.

Les valeurs possibles sont: initial, inheritet unset.

Note latérale: la clearpropriété est utilisée en relation avec float( https://css-tricks.com/almanac/properties/c/clear/ )

Vivek Athalye
la source
3

Si vous prévoyez d'apporter des modifications assez importantes, il peut être judicieux de les faire directement dans le bootstrap lui-même et de le reconstruire. Ensuite, vous pouvez réduire la quantité de données chargées.

Veuillez vous référer à Bootstrap sur GitHub pour le guide de construction.

Victor Häggqvist
la source
Selon l'étendue de la personnalisation requise, cela pourrait être l'option la plus simple. Par exemple, changer les couleurs d'un thème nécessiterait tellement de remplacements que je préférerais opter pour un changement de modèle et une construction personnalisée.
David Kirkland,
@alex Bump sources et reconstruire?
Victor Häggqvist
3

Voir https://bootstrap.themes.guide/how-to-customize-bootstrap.html

  1. Pour les remplacements CSS simples, vous pouvez ajouter un fichier custom.css sous le fichier bootstrap.css

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

  2. Pour des modifications plus importantes, SASS est la méthode recommandée.

    • créez votre propre custom.scss
    • importer Bootstrap après les modifications de custom.scss

    • Par exemple, changeons la couleur d'arrière-plan du corps en gris clair #eeeeee et changeons la couleur contextuelle principale bleue en variable $ purple de Bootstrap ...

      /* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
konyak
la source
2

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

.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>
mr5
la source
-1
  1. Inspectez le bouton cible sur la console.
  2. Accédez à l'onglet Éléments, puis survolez le code et assurez-vous de trouver l'ID ou la classe par défaut utilisée par le bootstrap.
  3. Utilisez jQuery / javascript pour remplacer le style / texte en appelant la fonction.

Voir cet exemple:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });
Anand Chaudhary
la source
-1

J'ai découvert que (bootstrap 4) mettre votre propre CSS derrière bootstrap.css et .js est la meilleure solution.

Recherchez l'élément que vous souhaitez modifier (inspecter l'élément) et utilisez la même déclaration exacte, puis il remplacera.

Cela m'a pris un peu de temps pour comprendre cela.

Henri
la source
-3

Donnez l'ID à la légende et appliquez le CSS. Comme ajouter id bonjour à legend () le 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;
}
Amar Gaur
la source
-9

Utilisez jquery css au lieu de css. . . jquery a priorité que css bootstrap ...

par exemple

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


);

 instead of

.mnu
{

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

}
Ajeet Sankhwal
la source
6
HTML doit être utilisé pour fournir une structure, CSS doit être utilisé pour fournir un style et Javascript (y compris jQuery) ne doit être utilisé que pour fournir l'interactivité. L'utilisation de jQuery pour remplacer les styles est contraire aux principes d'une bonne architecture et sera extrêmement déroutante pour quiconque essaie de travailler sur le code dans 6 mois.
Stephen R. Smith