Anpassen der Bootstrap-CSS-Vorlage

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:

1. Ä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.
2. 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.
3. 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.

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 deklarieren bootstrap.css, wird alles überschrieben, was Sie möchten.

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.cssDatei abgelegt, sodass die Datei bootstrap.cssunverändert bleibt. Der Verweis auf das custom.cssFolgende nach dem, bootstrap.cssdamit die Überschreibungen funktionieren ...

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

Fügen Sie einfach alle erforderlichen Änderungen im benutzerdefinierten CSS hinzu. Beispielsweise...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Vor ( bootstrap.css)

Nach (mit custom.css)

Wenn Sie Anpassungen vornehmen, sollten Sie die CSS-Spezifität verstehen . Überschreibt die custom.cssNotwendigkeit, Selektoren zu verwenden, die so spezifisch sind wie die bootstrap.css.

Beachten Sie, dass die Verwendung !importantim benutzerdefinierten CSS nicht erforderlich ist , es sei denn, Sie überschreiben eine der Bootstrap Utility-Klassen . Die CSS-Spezifität funktioniert immer für eine CSS-Klasse, um eine andere zu überschreiben.

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 werden custom.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

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Dies funktioniert auch, um neue benutzerdefinierte Klassen zu erstellen . Zum Beispiel, hier füge ich purplezu den Themenfarben , die erstellt alle für die CSS btn-purple, text-purple, bg-purple, alert-purple, etc ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

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

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:

Laden Sie die neuesten Less.js herunter und fügen Sie den Pfad dazu (und Bootstrap) in das Feld ein <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Um die .less-Dateien neu zu kompilieren, speichern Sie sie einfach und laden Sie Ihre Seite neu. Less.js kompiliert sie und speichert sie im lokalen Speicher.

Oder wenn Sie es vorziehen, eine neue bootstrap.css statisch mit Ihren benutzerdefinierten Stilen zu kompilieren (für Produktionsumgebungen):

Installieren Sie das LESS-Befehlszeilentool über Node und führen Sie den folgenden Befehl aus:

$ lessc ./less/bootstrap.less > bootstrap.css

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.

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.

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:

1. Klonen Sie den Bootstrap in Ihren Stammordner: git clone https://github.com/twbs/bootstrap.git
2. Benennen Sie es in "Bootstrap" um
3. Erstellen Sie eine package.json-Datei: https://gist.github.com/jide/8440609
4. Erstellen Sie eine Gruntfile.js: https://gist.github.com/jide/8440502
5. Erstellen Sie einen "weniger" Ordner
6. Kopieren Sie bootstrap / less / variables.less in den Ordner "less"
7. Ändern Sie den Schriftpfad: @icon-font-path: "../bootstrap/fonts/";
8. Erstellen Sie eine benutzerdefinierte style.less-Datei im Ordner "less", die bootstrap.less und Ihre benutzerdefinierte variable.less-Datei importiert: https://gist.github.com/jide/8440619
9. Lauf npm install
10. Lauf 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

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:

• Bewahren Sie eine makellose Kopie des Bootstraps auf und überschreiben Sie sie extern.
• Ändern Sie eine Datei (bootstrap's variables.less) so, dass sie Ihre eigenen Variablen enthält.
• Machen Sie Ihre Site-Datei @include bootstrap.less und dann Ihre Überschreibungen.

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:

• Ändern Sie die Farbe der Navigationsleiste mit @ navbar-inverse-bg in Ihren Variablen.less (keine Bootstraps)
• Fügen Sie Ihren bootstrap_overrides.less Ihre eigenen Navigationsleistenstile hinzu und überschreiben Sie dabei alles, was Sie brauchen.
• Glück.

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 .

Verwenden Sie WENIGER mit Bootstrap ...

Hier sind die Bootstrap-Dokumente zur Verwendung von LESS

(Sie sind seit früheren Antworten umgezogen.)