Ich fange gerade mit Bootstrap von Twitter an und frage mich, was die "Best Practices" für die Anpassung sind. Ich möchte ein System entwickeln, das die gesamte Leistungsfähigkeit einer CSS-Vorlage (Bootstrap oder andere) nutzt, vollständig (und leicht) modifizierbar, nachhaltig ist (dh - wenn die nächste Version von Bootstrap von Twitter veröffentlicht wird, muss ich nicht). Ich muss nicht von vorne anfangen.
Zum Beispiel möchte ich der oberen Navigation Hintergrundbilder hinzufügen. Es sieht so aus, als gäbe es drei Möglichkeiten:
- Ändern Sie die .topbar-Klassen in bootstrap.css. Ich mag das nicht besonders, weil ich viele .topbar-Elemente haben werde und sie nicht unbedingt alle auf die gleiche Weise ändern möchte.
- Erstellen Sie neue Klassen mit meinen Hintergrundbildern und wenden Sie beide Stile an (den neuen und den Bootstrap auf mein Element). Dies kann zu Stilkonflikten führen, die vermieden werden können, indem die .topbar-Klasse in separate Klassen aufgeteilt und dann nur die Teile verwendet werden, auf die meine benutzerdefinierte Klasse nicht tritt. Auch dies erfordert mehr Arbeit, als ich für notwendig halte, und obwohl es flexibel ist, kann ich bootstrap.css nicht einfach aktualisieren, wenn Twitter die nächste Rate veröffentlicht.
- Verwenden Sie Variablen in .LESS, um die Anpassung zu erreichen. Auf Anhieb scheint dies ein guter Ansatz zu sein, der jedoch nicht verwendet wurde. WENIGER Ich habe Bedenken hinsichtlich der Kompilierung von CSS auf dem Client und hinsichtlich der Nachhaltigkeit des Codes.
Obwohl ich Bootstrap verwende, kann diese Frage auf jede CSS-Vorlage verallgemeinert werden.
Vielen Dank im Voraus für die Eingabe.
Antworten:
Das beste zu tun ist.
1. Twitter-Bootstrap von Github abspalten und lokal klonen.
Sie ändern die Bibliothek / das Framework sehr schnell (sie unterscheiden sich intern. Einige bevorzugen die Bibliothek, ich würde sagen, dass es sich um ein Framework handelt, da Sie Ihr Layout ab dem Zeitpunkt ändern, an dem Sie es auf Ihre Seite laden). Nun ... mit Forking / Cloning können Sie die neuen Versionen einfach abrufen.
2. Ändern Sie die Datei bootstrap.css nicht
Es wird Ihr Leben komplizieren, wenn Sie Bootstrap aktualisieren müssen (und Sie müssen es tun).
3. Erstellen Sie Ihre eigene CSS-Datei und überschreiben Sie sie, wann immer Sie Original-Bootstrap-Inhalte benötigen
Wenn sie beispielsweise eine Oberleiste mit festlegen, diese
color: black;
aber weiß ist, erstellen Sie einen neuen, sehr spezifischen Selektor für diese Oberleiste und verwenden Sie diese Regel für die jeweilige Oberleiste. Für eine Tabelle wäre es zum Beispiel<table class="zebra-striped mycustomclass">
. Wenn Sie Ihre CSS-Datei danach deklarierenbootstrap.css
, wird alles überschrieben, was Sie möchten.quelle
Update 2019 - Bootstrap 4
Ich gehe noch einmal auf diese Frage zur Bootstrap-Anpassung für 4.x ein, bei der jetzt SASS anstelle von LESS verwendet wird. Im Allgemeinen gibt es zwei Möglichkeiten, Bootstrap anzupassen ...
1. Einfache CSS-Überschreibungen
Eine Möglichkeit zum Anpassen besteht darin, einfach CSS zu verwenden, um Bootstrap-CSS zu überschreiben. Aus Gründen der Wartbarkeit werden CSS-Anpassungen in einer separaten
custom.css
Datei abgelegt, sodass die Dateibootstrap.css
unverändert bleibt. Der Verweis auf dascustom.css
Folgende nach dem,bootstrap.css
damit die Überschreibungen funktionieren ...Fügen Sie einfach alle erforderlichen Änderungen im benutzerdefinierten CSS hinzu. Beispielsweise...
Vor (
bootstrap.css
)Nach (mit
custom.css
)Wenn Sie Anpassungen vornehmen, sollten Sie die CSS-Spezifität verstehen . Überschreibt die
custom.css
Notwendigkeit, Selektoren zu verwenden, die so spezifisch sind wie diebootstrap.css
.2. Mit SASS anpassen
Wenn Sie mit SASS vertraut sind (und diese Methode verwenden sollten), können Sie Bootstrap mit Ihrem eigenen anpassen
custom.scss
. In den Bootstrap-Dokumenten gibt es einen Abschnitt, in dem dies erläutert wird. In den Dokumenten wird jedoch nicht erläutert, wie vorhandene Variablen in Ihrem verwendet werdencustom.scss
. Lassen Sie uns zum Beispiel die Hintergrundfarbe des Körpers in ändern#eeeeee
und die blaue Kontextfarbe in die Variable von Bootstrap ändern / überschreiben ...primary
$purple
Dies funktioniert auch, um neue benutzerdefinierte Klassen zu erstellen . Zum Beispiel, hier füge ich
purple
zu den Themenfarben , die erstellt alle für die CSSbtn-purple
,text-purple
,bg-purple
,alert-purple
, etc ...https://www.codeply.com/go/7XonykXFvP
Mit SASS müssen Sie nach den Anpassungen @import bootstrap , damit sie funktionieren! Sobald der SASS zu CSS kompiliert wurde ( dies muss mit einem SASS-Compiler-Node-Sass, Gulp-Sass, npm-Webpack usw. erfolgen ), ist das resultierende CSS der angepasste Bootstrap. Wenn Sie mit SASS nicht vertraut sind, können Sie Bootstrap mit einem Tool wie dem von mir erstellten Theme Builder anpassen .
Benutzerdefinierte Bootstrap-Demo (SASS)
Hinweis: Im Gegensatz zu 3.x bietet Bootstrap 4.x kein offizielles Customizer-Tool. Sie können jedoch nur das Grid- CSS herunterladen oder ein anderes benutzerdefiniertes 4.x-Build-Tool verwenden , um das Bootstrap 4-CSS wie gewünscht neu zu erstellen.
Verwandte Themen:
Erweitern / Ändern (Anpassen) von Bootstrap 4 mit SASS
Wie ändere ich die Bootstrap-Primärfarbe?
Erstellen neuer Farbstile in Bootstrap 4 mit sass
Anpassen von Bootstrap
quelle
Ich denke, der offiziell bevorzugte Weg ist jetzt, Less zu verwenden und entweder die Datei bootstrap.css dynamisch zu überschreiben (mit less.js) oder die Datei bootstrap.css neu zu kompilieren (mit Node oder dem Less-Compiler).
In den Bootstrap-Dokumenten erfahren Sie , wie Sie die Stile bootstrap.css dynamisch überschreiben:
Oder wenn Sie es vorziehen, eine neue bootstrap.css statisch mit Ihren benutzerdefinierten Stilen zu kompilieren (für Produktionsumgebungen):
quelle
Seit Pabluez 'Antwort im Dezember gibt es jetzt eine bessere Möglichkeit, Bootstrap anzupassen.
Verwenden Sie: Bootswatch , um Ihre bootstrap.css zu generieren
Bootswatch erstellt den normalen Twitter-Bootstrap aus der neuesten Version (unabhängig davon, was Sie im Bootstrap-Verzeichnis installieren), importiert aber auch Ihre Anpassungen. Dies macht es einfach, die neueste Version von Bootstrap zu verwenden und gleichzeitig benutzerdefiniertes CSS beizubehalten, ohne dass Sie Änderungen an Ihrem HTML-Code vornehmen müssen. Sie können die Dateien boostrap.css einfach wiegen.
quelle
Sie können die Bootstrap-Vorlage von verwenden
http://www.initializr.com/
Dies beinhaltet alle Bootstrap .less-Dateien. Sie können dann Variablen ändern / die weniger Dateien aktualisieren, wie Sie möchten, und es wird automatisch das CSS kompiliert. Beim Bereitstellen kompilieren Sie die weniger Datei in CSS.
quelle
Die beste Option ist meiner Meinung nach, eine benutzerdefinierte WENIGER-Datei zu kompilieren, einschließlich bootstrap.less, einer benutzerdefinierten variables.less-Datei und Ihren eigenen Regeln:
git clone https://github.com/twbs/bootstrap.git
@icon-font-path: "../bootstrap/fonts/";
npm install
grunt watch
Jetzt können Sie die Variablen beliebig ändern, Bootstrap-Regeln in Ihrer benutzerdefinierten style.less-Datei überschreiben und eines Tages den gesamten Bootstrap-Ordner ersetzen, wenn Sie Bootstrap aktualisieren möchten!
BEARBEITEN: Ich habe mit dieser Technik ein Bootstrap-Boilerplate erstellt: https://github.com/jide/bootstrap-boilerplate
quelle
Ich habe kürzlich einen Beitrag darüber geschrieben, wie ich es in den letzten Jahren bei Udacity gemacht habe. Diese Methode hat dazu geführt, dass wir Bootstrap jederzeit aktualisieren konnten, ohne Konflikte zusammenzuführen, Arbeit wegzuwerfen usw. usw.
Der Beitrag geht ausführlicher auf Beispiele ein, aber die Grundidee ist:
Dies bedeutet, dass Sie LESS verwenden und es vor dem Versand an den Client in CSS kompilieren müssen (clientseitig LESS, wenn es schwierig ist, und ich vermeide es im Allgemeinen), aber es ist EXTREM gut für die Wartbarkeit / Aktualisierbarkeit, und das Kompilieren von LESS ist wirklich sehr einfach . Der verknüpfte Github-Code enthält ein Beispiel für die Verwendung von Grunzen, aber es gibt viele Möglichkeiten, dies zu erreichen - sogar GUIs, wenn das Ihr Ding ist.
Mit dieser Lösung würde Ihr Beispielproblem folgendermaßen aussehen:
Wenn es an der Zeit ist, Ihr Bootstrap zu aktualisieren, tauschen Sie einfach die makellose Bootstrap-Kopie aus und alles funktioniert weiterhin (wenn Bootstrap wichtige Änderungen vornimmt, müssen Sie Ihre Überschreibungen aktualisieren, müssen dies aber trotzdem tun).
Blogpost mit Durchgang ist hier .
Codebeispiel auf Github ist hier .
quelle
Verwenden Sie WENIGER mit Bootstrap ...
Hier sind die Bootstrap-Dokumente zur Verwendung von LESS
(Sie sind seit früheren Antworten umgezogen.)
quelle