Wie kann ich Bootstrap-CSS-Stile überschreiben?

234

Ich muss Änderungen bootstrap.cssan meiner Website vornehmen. Ich denke, es ist besser, eine separate custom.cssDatei zu erstellen, als sie bootstrap.cssdirekt zu ändern . Ein Grund dafür ist, dass bootstrap.cssich ein Update erhalten sollte. Ich werde 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 bootstrap.cssich , damit ich den Stil eines Ankers / einer Klasse entferne ? Zum Beispiel, wenn ich alle Styling-Regeln entfernen möchte für 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.css, aber wenn mein Verständnis der Best Practices zum Überschreiben von CSS korrekt ist, was soll ich stattdessen tun?

Um klar zu sein, möchte ich 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 einen Weg gibt, so etwas wie das Folgende zu tun :)

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

Antworten:

491

Die Verwendung !importantist keine gute Option, da Sie höchstwahrscheinlich in Zukunft Ihre eigenen Stile überschreiben möchten. Das lässt uns mit CSS-Prioritäten.

Grundsätzlich hat jeder Selektor sein eigenes numerisches "Gewicht":

  • 100 Punkte für IDs
  • 10 Punkte für Klassen und Pseudoklassen
  • 1 Punkt für Tag-Selektoren und Pseudoelemente
  • Hinweis: Wenn das Element ein Inline-Design hat , das automatisch gewinnt (1000 Punkte)

Unter zwei Auswahlstilen wählt der Browser immer den mit mehr Gewicht aus. Die Reihenfolge Ihrer Stylesheets ist nur wichtig, wenn die Prioritäten gerade sind. Deshalb ist es nicht einfach, Bootstrap zu überschreiben.

Sie können Bootstrap-Quellen untersuchen, 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 die ganze Bootstrap-Süße.

Der einfachste Weg, dies zu überwinden, 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 jedem CSS-Selektor einfach 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;
}
SchmugglerFlynn
quelle
Da IDs nur einmal verwendet werden können, warum nicht #bootstrap-overrideseine Klasse erstellen ?
Chharvey
2
@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 der Datei bootstrap.css steht, können wir loslegen. Dies wäre jedoch ziemlich nah und würde es als ID festlegen, die das Prio stark steigert. Wir müssen uns nicht darum kümmern, das Prio zu berechnen und so genau zu testen, ob wir es immer richtig haben. Einfacher mit einer ID, wenn Sie die Standardeinstellung endgültig überschreiben möchten.
Hogan
habe gerade meinen Tag gemacht. Ich weiß das und stecke immer noch fest, um herauszufinden, warum meine Stile nicht interpretiert werden.
Hogan
3
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 nur für dieses Beispiel erfunden?
Kyle Vassella
2
Ihre Erklärung ist gut, es ist sinnvoll, 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, das das "Gewicht" jedes CSS-Selektors definiert. Hier noch ein paar Details dazu: css-tricks.com/specifics-on-css-specificity/…
Adriano
85

Platzieren Sie im Kopfbereich Ihres HTML-Codes Ihre custom.css unter bootstrap.css.

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

Dann müssen Sie in custom.css genau den gleichen Selektor für das Element verwenden, das Sie überschreiben möchten. In diesem Fall legendbleibt es einfach legendin 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 h1zum Beispiel müssen Sie sich um die spezifischeren Selektoren wie .jumbotron h1weil kümmern

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

wird nicht überschreiben

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

Hier finden Sie eine hilfreiche Erläuterung der Spezifität 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 Bearbeiten von Stilen.

Markus Kottländer
quelle
28

Dies sollte die Ladezeit nicht wesentlich 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 (reagiert nicht).
  2. Vermeiden Sie nach !importantMöglichkeit die Verwendung. Dies kann einige wichtige Stile aus den Basis-CSS-Dateien überschreiben.
  3. Laden Sie bootstrap-responsive.css immer nach custom.css, wenn Sie keine Medienabfragen verlieren möchten. - MUSS FOLGEN
  4. Ändern Sie lieber die erforderlichen Eigenschaften (nicht alle).
Rahul Patil
quelle
10
Da dies bootstrap-responsive.cssnicht mehr existiert, gilt dies immer noch oder ist dies nicht mehr relevant?
Shaun Wilson
20

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

Html

<link href="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 (z. B. Rand unten: 5 Pixel; - Dies überschreibt Rand unten: 20 Pixel;)

Paramasivan
quelle
Ja, das habe ich schon gemacht. Entschuldigung, meine Frage war nicht klar. Meine Frage war, was in custom.css zu tun ist, um Stile aus bootstrap.min.css zu überschreiben.
Alex
Was ist, wenn ich auch bootstrap-theme.min.css verwende?
Quasaur
Arbeitete für mich, auch mit min css
mimi
5

Um die legendin Bootstrap definierten Stile zurückzusetzen , können Sie in Ihrer CSS-Datei Folgendes 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: clearEigenschaft wird in Bezug auf float( https://css-tricks.com/almanac/properties/c/clear/ ) verwendet.

Vivek Athalye
quelle
3

Wenn Sie größere Änderungen vornehmen möchten, ist es möglicherweise eine gute Idee, diese direkt im Bootstrap selbst vorzunehmen und neu zu erstellen. Dann können Sie die geladene Datenmenge reduzieren.

Die Build-Anleitung finden Sie unter Bootstrap auf GitHub .

Victor Häggqvist
quelle
Je nach Umfang der erforderlichen Anpassung kann dies die einfachste Option sein. Das Ändern von Themenfarben würde beispielsweise so viele Überschreibungen erfordern, dass ich mich lieber für eine Vorlagenänderung und eine benutzerdefinierte Erstellung entscheiden würde.
David Kirkland
@alex Bump Quellen und neu erstellen?
Victor Häggqvist
3

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

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

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

  2. Für umfangreichere Änderungen wird SASS empfohlen.

    • Erstellen Sie Ihre eigene custom.scss
    • Importieren Sie Bootstrap nach den Änderungen in custom.scss

    • Lassen Sie uns zum Beispiel die Hintergrundfarbe des Körpers in hellgrau #eeeeee ändern und die blaue primäre Kontextfarbe in die Variable $ lila von Bootstrap ändern ...

      /* 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
quelle
2

Ein bisschen spät, aber ich habe dem Stamm eine Klasse hinzugefügt und divdann alle Bootstrap-Elemente in meinem benutzerdefinierten Stylesheet erweitert:

.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
quelle
-1
  1. Überprüfen Sie die Zieltaste auf der Konsole.
  2. Gehen Sie zur Registerkarte "Elemente" und bewegen Sie den Mauszeiger über den Code. Stellen Sie sicher, dass Sie die vom Bootstrap verwendete Standard-ID oder -Klasse finden.
  3. Verwenden Sie jQuery / Javascript, um den Stil / Text durch Aufrufen der Funktion zu überschreiben.

Siehe dieses Beispiel:

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

Ich fand heraus, dass (Bootstrap 4) Ihr eigenes CSS hinter sich lässt bootstrap.css und .js die beste Lösung ist.

Suchen Sie das Element, das Sie ändern möchten (inspect element), und verwenden Sie genau dieselbe Deklaration, die dann überschrieben wird.

Ich brauchte etwas Zeit, um das herauszufinden.

Henry
quelle
-3

Geben Sie der Legende eine ID und wenden Sie CSS an. Wie add hallo zu legend () ist das CSS wie folgt:

#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
quelle
-9

Verwenden Sie jquery css anstelle von css. . . jquery hat Priorität als bootstrap css ...

z.B

$(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
quelle
6
HTML sollte verwendet werden, um Struktur bereitzustellen, CSS sollte verwendet werden, um Stil bereitzustellen, und Javascript (einschließlich jQuery) sollte nur verwendet werden, um Interaktivität bereitzustellen. Die Verwendung von jQuery zum Überschreiben von Stilen widerspricht den Prinzipien einer guten Architektur und ist für jeden, der in 6 Monaten versucht, an dem Code zu arbeiten, äußerst verwirrend.
Stephen R. Smith