Anpassen der Bootstrap-CSS-Vorlage

108

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.

Anne
quelle
Hallo @Pabluez, ja du hast geantwortet, siehe unten. Entschuldigung für die verspätete Antwort - ich war im Urlaub beschäftigt.
Anne
Ich glaube, dieser Artikel wird Ihnen helfen stolzparrot.com/blog/archive/2014/6/…
VJAI
1
Dieser Thread ist informativ stackoverflow.com/questions/10451317/…
Zim

Antworten:

127

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.

Pabluez
quelle
15
+1 Gute Antwort. Nur um seinen dritten Punkt zu ergänzen: Sie können entweder eine neue Klasse erstellen, die zusätzlich zur alten Klasse angewendet werden soll, oder einfach die Eigenschaften überschreiben / hinzufügen, die Sie ändern möchten.
Wex
das war es, was ich mit mycustomcss meinte ... ich werde es in mycustomclass bearbeiten, abgesehen von Zebrastreifen (Bootstrap-Klasse)
Pabluez
1
Gibt es etwas, das Sie hinzufügen können, um dies auf die "neue" Weise zu tun? dh: wie kann man einen "Bootstrap" -Stil unterordnen? erbe alle + augment. Ich muss mich noch darum kümmern, ob dies ein Mix-In und eine Erweiterung ist oder ein ?? Es tut mir leid, dumm zu sein.
Alex Gray
1
+ 1Danke für die Antwort. Ich habe das getan und es funktioniert, aber es scheint einfach nicht die nachhaltigste Antwort zu sein. Wenn ich eine aktualisierte Datei bootstrap.css erhalte, muss ich möglicherweise meine benutzerdefinierten Überschreibungsklassen ändern, um sie an Änderungen anzupassen. Wie @alexgray möchte ich einen Weg verstehen, dies mit weniger oder Mixins zu tun. Oder noch besser eine Möglichkeit, eine Sandbox ohne angewendeten Bootstrap zu erstellen, damit ich meine Stile verwenden kann, ohne den Bootstrap überschreiben zu müssen. Wenn jemand ein gutes Tutorial da draußen hat, geben Sie es weiter
Anne
2
Was bringt es, Bootstrap zu forken, wenn Sie nur Änderungen an Ihrer eigenen CSS-Datei hinzufügen möchten?
31

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)

Geben Sie hier die Bildbeschreibung ein

Nach (mit custom.css)

Geben Sie hier die Bildbeschreibung ein

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

Zim
quelle
Noice - Wie wäre es mit einer benutzerdefinierten Farbe für Hintergrund, Rahmen und Schriftart für die neue benutzerdefinierte Schaltfläche?
Digout
Ist es normal, dass die generierte CSS-Datei ungefähr 160 KB (komprimiert 130 KB) ist? Ist es beispielsweise möglich, nur eine Primärfarbe zu überschreiben?
Evgeny
@Zim Ich schätze den Theme Builder, den du erstellt hast!
Kareem Jeiroudi
Hinweis: Denken Sie daran, den Autoprefixer nach der Kompilierung zu verwenden
kanlukasz
20

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
Symmetrisch
quelle
Dies ist der bevorzugte Weg :)
Srivathsa
10

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.

mdashx
quelle
Könnten Sie näher erläutern, wie Sie dies am besten nutzen können? Ich habe Bootswatch heruntergeladen und mein CSS mit Grunt Swatch: Theme erstellt, aber ich bin immer noch verwirrt darüber, welche Dateien ich wo ablegen soll. Ich versuche, zu einer Situation zu gelangen, in der ich eine aktualisierte Version von Bootstrap oder ein Bootwatch-Thema herunterladen und verwenden kann, aber trotzdem meine benutzerdefinierten Variablen verwende. (Ich arbeite in VisualStudio2013 Pro, wenn das einen Unterschied macht). Ich möchte kein Javascript zum Kompilieren verwenden. Im Moment kann ich einen Build-Befehl ausführen. Später werde ich versuchen, eine gute Methode zur Automatisierung zu finden. Danke Mark
mark1234
5

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.

Tom
quelle
3

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

Jide
quelle
3

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 .

Betaorbust
quelle
0

Verwenden Sie WENIGER mit Bootstrap ...

Hier sind die Bootstrap-Dokumente zur Verwendung von LESS

(Sie sind seit früheren Antworten umgezogen.)

Zwölf24
quelle
3
Wenn die Dokumente verschoben wurden, bearbeiten Sie die anderen Antworten, um dies widerzuspiegeln
DeadChex
Ironischerweise ist der Link in dieser Antwort tot.
Zacharydl