Wie kann ich Bootstrap-CSS-Stile überschreiben?

Lesezeit: 8 Minuten

Wie kann ich Bootstrap CSS Stile uberschreiben
Alex

Ich muss modifizieren bootstrap.css zu meiner Website passen. Ich denke, es ist besser, eine separate zu erstellen custom.css Datei statt zu modifizieren bootstrap.css direkt, ein Grund dafür sollte sein bootstrap.css ein Update erhalten, werde ich leiden, wenn ich versuche, alle meine Änderungen wieder aufzunehmen. Ich werde etwas Ladezeit für diese Stile opfern, aber es ist vernachlässigbar für die wenigen Stile, die ich überschreibe.

Wie überschreibe ich bootstrap.css sodass ich Löschen der Stil eines Ankers/einer Klasse? Wenn ich zum Beispiel alle Stilregeln für entfernen möchte 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;
}

Ich kann das alles einfach löschen bootstrap.cssaber wenn mein Verständnis der Best Practices zum Überschreiben von CSS richtig ist, was sollte ich stattdessen tun?

Um es klar zu sagen, ich möchte alle diese Legendenstile entfernen und die CSS-Werte der Eltern verwenden. Wenn ich also Pranavs Antwort kombiniere, werde ich Folgendes tun?

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;
}

(Ich hatte gehofft, dass es eine Möglichkeit gibt, so etwas zu tun:)

legend {
  clear: all;
}

Wie kann ich Bootstrap CSS Stile uberschreiben
SchmugglerFlynn

Verwenden !important ist keine gute Option, da Sie in Zukunft höchstwahrscheinlich Ihre eigenen Stile überschreiben möchten. Damit bleiben uns CSS-Prioritäten.

Grundsätzlich hat jeder Selektor sein eigenes numerisches „Gewicht“:

  • 100 Punkte für Ausweise
  • 10 Punkte für Klassen und Pseudoklassen
  • 1 Punkt für Tag-Selektoren und Pseudo-Elemente
  • Hinweis: Wenn das Element Inline-Styling hat das gewinnt automatisch (1000 Punkte)

Unter zwei Selektorstilen wählt der Browser immer den mit mehr Gewichtung aus. Die Reihenfolge Ihrer Stylesheets ist nur wichtig, wenn die Prioritäten gleich sind – deshalb ist es nicht einfach, Bootstrap zu überschreiben.

Sie können Bootstrap-Quellen überprüfen, herausfinden, wie genau ein bestimmter Stil definiert ist, und diesen Selektor kopieren, damit Ihr Element die gleiche Priorität hat. Aber wir verlieren dabei irgendwie alle Bootstrap-Süße.

Der einfachste Weg, dies zu umgehen, besteht darin, einem der Stammelemente auf Ihrer Seite eine zusätzliche willkürliche ID zuzuweisen, wie folgt: <body id="bootstrap-overrides">

Auf diese Weise können Sie einfach jedem CSS-Selektor Ihre ID voranstellen, dem Element sofort 100 Gewichtspunkte hinzufügen und Bootstrap-Definitionen überschreiben:

/* 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;
}

  • Da IDs nur einmal verwendet werden können, warum nicht machen #bootstrap-overrides eine Klasse?

    – Charvey

    19. August 2015 um 3:07 Uhr

  • @chharvey: weil du am Ende besser rechnen müsstest. Wenn es in diesem Beispiel eine Klasse wäre, wäre es Prio 11, und wenn die CSS-Definition nach bootstrap.css wäre, dann wären wir startklar. Dies wäre jedoch ziemlich nah und es als eine ID festzulegen, die das Prio stark erhöht. Wir müssen uns nicht darum kümmern, das Prio zu berechnen und so hart zu testen, ob wir es immer richtig haben. einfacher mit einer ID, wenn Sie die Voreinstellung endgültig überschreiben möchten.

    – hogan

    11. September 2015 um 6:15 Uhr

  • hat mir gerade den Tag versüßt. Ich weiß das und versuche immer noch herauszufinden, warum meine Stile nicht interpretiert werden.

    – hogan

    11. September 2015 um 6:17 Uhr

  • Sind die von Ihnen erwähnten Punkte (100 für IDs, 10 für Klassen/Pseudoklassen, 1 für Tag-Selektoren/Pseudoelemente) wörtlich oder haben Sie diese Werte für dieses Beispiel nur erfunden?

    – Kyle Vasella

    20. Juli 2017 um 19:17 Uhr


  • Ihre Erklärung ist gut, sie ist sinnvoll, um sie jemandem zu erklären, der neu in CSS ist, aber irreführend. Der korrekte Name für das, was Sie erwähnt haben, ist css specificity die das “Gewicht” jedes CSS-Selektors definiert. Hier noch ein paar Details dazu: css-tricks.com/specifics-on-css-specificity/…

    – Adriano

    16. Oktober 2018 um 6:11 Uhr

1646321531 769 Wie kann ich Bootstrap CSS Stile uberschreiben
Markus Kottländer

Februar 2022: Da ich gelegentlich noch Upvotes zu dieser Antwort bekomme … https://tailwindcss.com 🙏


Platzieren Sie im Head-Bereich Ihres HTML-Codes Ihre custom.css unterhalb von bootstrap.css.

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

Dann müssen Sie in custom.css genau denselben Selektor für das Element verwenden, das Sie überschreiben möchten. Im Falle des legend es bleibt einfach legend in Ihrer custom.css, da Bootstrap keine spezifischeren Selektoren hat.

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

Aber im Falle von h1 zum Beispiel müssen Sie sich um die spezifischeren Selektoren wie kümmern .jumbotron h1 da

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

wird nicht überschrieben

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

Hier ist eine hilfreiche Erläuterung der Besonderheiten von CSS-Selektoren, die Sie verstehen müssen, um genau zu wissen, welche Stilregeln für ein Element gelten.
http://css-tricks.com/specifics-on-css-specificity/

Alles andere ist nur eine Frage des Kopierens/Einfügens und Bearbeitens von Stilen.

Wie kann ich Bootstrap CSS Stile uberschreiben
Raul Patil

Es sollte die Ladezeit nicht stark beeinflussen, da Sie Teile des Basis-Stylesheets überschreiben.

Hier sind einige Best Practices, die ich persönlich befolge:

  1. Laden Sie benutzerdefiniertes CSS immer nach der Basis-CSS-Datei (nicht responsiv).
  2. Vermeide das Benutzen !important wenn möglich. Dadurch können einige wichtige Stile aus den Basis-CSS-Dateien überschrieben werden.
  3. Laden Sie bootstrap-responsive.css immer nach custom.css, wenn Sie Medienabfragen nicht verlieren möchten. – MUSS FOLGEN
  4. Ändern Sie lieber die erforderlichen Eigenschaften (nicht alle).

  • seit bootstrap-responsive.css nicht mehr, gilt das noch, oder ist das nicht mehr relevant?

    – ShaunWilson

    31. Januar 2017 um 0:38 Uhr

1646321534 982 Wie kann ich Bootstrap CSS Stile uberschreiben
Paramasivan

Verknüpfen Sie Ihre custom.css-Datei als letzten Eintrag unterhalb der bootstrap.css. Custom.css-Stildefinitionen überschreiben bootstrap.css

HTML

<link href="https://stackoverflow.com/questions/20721248/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Kopieren Sie alle Stildefinitionen der Legende in custom.css und nehmen Sie Änderungen daran vor (wie margin-bottom:5px; — Dies überschreibt margin-bottom:20px; )

1646321534 177 Wie kann ich Bootstrap CSS Stile uberschreiben
Zim

Update 2021 – Bootstrap 4 und Bootstrap 5

Beim Überschreiben von Bootstrap CSS sind 3 Regeln zu befolgen.

  1. importieren/einbeziehen bootstrap.css vor Ihren CSS-Regeln (Überschreibungen)
  2. Verwenden Sie mehr CSS-Spezifität (oder gleich) als die Bootstrap-CSS-Selektoren
  3. Wenn eine Regel außer Kraft gesetzt wird, verwenden Sie das Attribut !important, um Ihre Regeln zu erzwingen. Wenn Sie die Regeln 1 und 2 befolgen, sollte dies nicht erforderlich sein, außer wenn Sie Bootstrap-Hilfsklassen verwenden, die häufig !important enthalten, wie hier erläutert

Ja, Überschreibungen sollten separat abgelegt werden styles.css (oder custom.css)-Datei, sodass die bootstrap.css bleibt unverändert. Dies macht es einfacher, die Bootstrap-Version zu aktualisieren, ohne die Überschreibungen zu beeinträchtigen. Der Verweis auf die styles.css folgt nach dem der bootstrap.css damit die Overrides funktionieren.

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

Fügen Sie einfach alle erforderlichen Änderungen im benutzerdefinierten CSS hinzu. Zum Beispiel:

legend {
  display: block;
  width: inherit;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: initial;
}

Notiz: Es ist keine gute Praxis, es zu verwenden !important im Überschreibungs-CSS, es sei denn, Sie überschreiben eine der Bootstrap Utility-Klassen. CSS-Spezifität
funktioniert immer, wenn eine CSS-Klasse eine andere überschreibt. Stellen Sie nur sicher, dass Sie einen CSS-Selektor verwenden, der mit oder identisch ist spezifischer als die bootstrap.css

Betrachten Sie zum Beispiel die dunkle Navbar-Linkfarbe von Bootstrap 4. Hier ist die bootstrap.css

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

Um also die Linkfarbe der Navbar zu überschreiben, können Sie denselben Selektor oder einen spezifischeren Selektor verwenden, wie zum Beispiel:

#mynavbar .navbar-nav .nav-link {
    color: #ffcc00;
}

Zum Beispiel: https://codeply.com/p/FyQapHImHg

Wenn die CSS-Selektoren gleich sind, hat der letzte Vorrang, weshalb die styles.css sollte dem folgen bootstrap.css.

  • Das scheint nichts Neues zu sagen; In mehreren vorhandenen Antworten wird erläutert, wie Sie Ihre Stile in eine neue CSS-Datei einfügen, die nach den Bootstrap-CSS-Dateien geladen wird.

    – TylerH

    28. August 2018 um 2:26 Uhr

  • #mynavbar ist die ID der Navigationsleiste 😀 für Neueinsteiger

    – Zunair

    9. Dezember 2021 um 15:11 Uhr

  • @Zunair #mynavbar ist die ID der navbarund das Elternteil des navbar-nav

    – Sim

    9. Dezember 2021 um 15:41 Uhr

1646321534 136 Wie kann ich Bootstrap CSS Stile uberschreiben
Vivek Athalye

Zum Zurücksetzen der für definierten Stile legend In Bootstrap können Sie Folgendes in Ihrer CSS-Datei tun:

legend {
  all: unset;
}

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

Die Eigenschaft all in CSS setzt alle Eigenschaften des ausgewählten Elements zurück, mit Ausnahme der Eigenschaften direction und unicode-bidi, die die Textrichtung steuern.

Mögliche Werte sind: initial, inherit & unset.

Randnotiz: clear Eigentum wird im Zusammenhang mit verwendet float (https://css-tricks.com/almanac/properties/c/clear/)

  • Das scheint nichts Neues zu sagen; In mehreren vorhandenen Antworten wird erläutert, wie Sie Ihre Stile in eine neue CSS-Datei einfügen, die nach den Bootstrap-CSS-Dateien geladen wird.

    – TylerH

    28. August 2018 um 2:26 Uhr

  • #mynavbar ist die ID der Navigationsleiste 😀 für Neueinsteiger

    – Zunair

    9. Dezember 2021 um 15:11 Uhr

  • @Zunair #mynavbar ist die ID der navbarund das Elternteil des navbar-nav

    – Sim

    9. Dezember 2021 um 15:41 Uhr

1646321536 879 Wie kann ich Bootstrap CSS Stile uberschreiben
konyak

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

  1. Für einfache CSS-Überschreibungen können Sie unterhalb der bootstrap.css eine custom.css hinzufügen

    <link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/20721248/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    
  2. Für umfangreichere Änderungen ist SASS die empfohlene Methode.

    • Erstellen Sie Ihre eigene custom.scss
    • importieren Sie Bootstrap nach den Änderungen in custom.scss
    • Ändern wir beispielsweise die Hintergrundfarbe des Körpers in hellgrau #eeeeee und ändern Sie die blaue primäre kontextbezogene Farbe in die Bootstrap-Variable $purple …

      /* 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";
      

924810cookie-checkWie kann ich Bootstrap-CSS-Stile überschreiben?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy