web-dev-qa-db-fra.com

Comment remplacer les styles CSS Bootstrap _?

J'ai besoin de modifier bootstrap.css pour l'adapter à mon site Web. Je pense qu'il est préférable de créer un fichier custom.css séparé au lieu de modifier directement bootstrap.css, notamment parce que bootstrap.css devrait obtenir une mise à jour, je vais essayer de ré-inclure toutes mes modifications. . Je vais sacrifier un peu de temps de chargement pour ces styles, mais c'est négligeable pour les quelques styles que je domine.

Hw puis-je remplacer bootstrap.css afin que je supprime le 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 en matière de substitution 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 du 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 un moyen de faire quelque chose comme ce qui suit :)

legend {
  clear: all;
}
htmlcsstwitter-bootstrap
210
Alex

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

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

  • 100 points pour les identifiants
  • 10 points pour les cours et pseudo-cours
  • 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)

Entre deux styles de sélecteur, le navigateur choisira toujours celui qui a le plus de poids. L'ordre des 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.

Vous avez le choix d’inspecter les sources Bootstrap, de déterminer comment un style spécifique est défini et de copier ce sélecteur afin que votre élément ait la même priorité. Mais nous perdons un peu toute la douceur [Bootstrap] _ dans le processus.

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

De cette façon, vous pouvez simplement préfixer votre identifiant sur n'importe quel sélecteur CSS, en ajoutant instantanément 100 points de poids à l'élément et en remplaçant 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;
}
445
smugglerFlynn

Dans la section head de votre code HTML, placez votre fichier custom.css sous le fichier bootstrap.css.

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

Ensuite, dans custom.css, vous devez utiliser le même sélecteur pour l'élément que vous souhaitez remplacer. Dans le cas de legend, il reste simplement legend dans votre fichier custom.css car 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 vous occuper des sélecteurs plus spécifiques comme .jumbotron h1 parce 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 est juste une question de copier/coller et éditer des styles.

80
Markus Kottländer

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

Voici certaines des meilleures pratiques que je suis personnellement:

  1. Chargez toujours les CSS personnalisés après le fichier CSS de base (non réactif).
  2. Évitez d’utiliser !important si 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 de support. - DOIT SUIVRE
  4. Préférez la modification des propriétés requises (pas toutes).
26
Rahul Patil

Liez votre fichier custom.css en tant que 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 la légende dans custom.css et apportez des modifications (comme margin-bottom: 5px; - Ceci écrasera margin-bottom: 20px;)

17
Paramasivan

Si vous envisagez d’apporter des modifications assez importantes, il peut être judicieux de les modifier directement dans bootstrap et de les reconstruire. Ensuite, vous pourriez réduire la quantité de données chargées.

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

3
Victor Häggqvist

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 de 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>
2
mr5

Pour réinitialiser les styles définis pour legend dans bootstrap, vous pouvez procéder comme suit 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, inherit & unset.

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

2
Vivek Athalye
  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é par le bootstrap.
  3. Utilisez jQuery/javascript pour écraser 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'); });

1
Anand Chaudhary

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

  1. Pour les substitutions 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 apportées à custom.scss

    • Par exemple, changeons la couleur de fond du corps en #eeeeee gris clair 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";
0
konyak