Bootstrap-CSS überschreiben
Dieser Artikel handelt von einem berühmten CSS-UI-Framework namens Bootstrap. Wir werden den Prozess des Überschreibens des Bootstrap-CSS mit unserem benutzerdefinierten Styling besprechen.
Überblick über Bootstrap
Eine responsive Website lässt sich mit Bootstrap CSS schneller und einfacher erstellen als mit reinem CSS.
Dies liegt daran, dass dieses Open-Source-Toolkit vorgefertigte Vorlagen und Komponenten bietet, mit denen Sie schnell und einfach Layouts mit wichtigen Designkomponenten wie Bootstrap-Schaltflächen, Formularen und Tabellen erstellen können.
Das Verfahren ist jedoch nicht so einfach wie das Kopieren und Einfügen dieser Teile wiederverwendbaren Codes. Zunächst sollten Sie die Bootstrap-Vorlagen und -Komponenten anpassen, um zu bestätigen, dass die Website Ihr unverwechselbares Branding genau darstellt.
Beispielsweise könnten Sie eine benutzerdefinierte Farbe einer der zehn Farbdienstleistungsklassen von Bootstrap vorziehen. Alternativ möchten Sie möglicherweise die Haltepunkte des Rasterlayouts in Bootstrap ändern.
Möglicherweise möchten Sie auch benutzerdefinierte Klassen wie die Klasse .btn-cstm für eindeutige Schaltflächen einbeziehen. Obwohl es nicht ratsam ist, können Sie die Bootstrap-Core-Dateien direkt bearbeiten, um Anpassungen an Ihrer Website vorzunehmen.
Bootstrap-CSS ändern
Direkte Änderungen am Bootstrap-Standard-Stylesheet werden zu einer Herausforderung. Es erschwert das Abrufen Ihrer Änderungen und macht das Aktualisieren auf eine überarbeitete Version von Bootstrap viel schwieriger.
Da Sie beim Upgrade die Kerndateien ersetzen müssen, gehen alle Personalisierungen verloren. Es ist jedoch möglich, Änderungen vorzunehmen, ohne den Bootstrap-Quellcode zu ändern.
Sehen wir uns das Verfahren genauer an.
Bootstrap-Styling überschreiben
Fügen Sie ein weiteres externes Stylesheet hinzu, wenn Ihre Website ein anderes benutzerdefiniertes Design als Bootstrap hinzufügen muss. Es wendet diese überschriebenen Stile auf Ihre Klassen und ID-Selektoren an, je nachdem, wie Sie die beiden Stylesheets laden:
- Der mit Bootstrap.
- Das mit Ihrem benutzerdefinierten Stylesheet.
Beispielsweise gibt es in Bootstrap eine Klasse für Buttons, nämlich btn-primary. Für diese Klasse ist die vom Bootstrap-CSS festgelegte Schriftgröße 16px. Wir können diese Klasse in unserem benutzerdefinierten Stylesheet überschreiben, wenn wir die Schriftgröße auf 21px ändern müssen.
Der erste Schritt besteht darin, ein benutzerdefiniertes Stylesheet zu erstellen, sagen wir customStyles.css. Das Stylesheet sieht folgendermaßen aus:
.btn-primary{
font-size:21px;
}
Sie können dieses Blatt in Ihre HTML-Seite einfügen, nachdem Sie das Bootstrap-CSS wie folgt eingefügt haben:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="customStyling.css">
</head>
<body>
<h1>Custom Bootstrap demo</h1>
<button class="btn-primary">Demo</button>
</body>
</html>
Sie können der Ausgabe entnehmen, dass andere Eigenschaften als font-size vom Standard-Bootstrap-CSS geerbt werden und nur die Eigenschaft font-size auf einen neuen Wert aktualisiert wird.
Es ist einer der einfachsten Ansätze, das Bootstrap-CSS zu überschreiben und Ihrer Website Ihr benutzerdefiniertes Design hinzuzufügen.