Wie verwende ich bootstrap-theme.css mit bootstrap 3?

174

Nachdem ich ein komplettes Paket von Bootstrap 3 von http://getbootstrap.com heruntergeladen hatte , stellte ich fest, dass es eine separate CSS-Datei für das Thema gibt. Wie kann man davon Gebrauch machen? Bitte erkläre?

Ich habe bootstrap-theme.cssin mein vorhandenes Bootstrap-Projekt aufgenommen, aber es gibt keinen Unterschied in der Ausgabe.

html css twitter-bootstrap-3 Yuvaraj P.
quelle

Antworten:

382

Beim Herunterladen von Bootstrap 3.x erhalten Sie bootstrap.css und bootstrap-theme.css (ganz zu schweigen von den minimierten Versionen dieser Dateien, die ebenfalls vorhanden sind).

bootstrap.css

bootstrap.cssist komplett gestylt und gebrauchsfertig, wenn dies Ihr Wunsch ist. Es ist vielleicht ein bisschen schlicht, aber es ist fertig und es ist da.

Sie müssen bootstrap-theme.css nicht verwenden, wenn Sie nicht möchten, und die Dinge werden in Ordnung sein.

bootstrap-theme.css

bootstrap-theme.cssist genau das, was der Name der Datei andeutet: Es ist ein Thema für Bootstrap, das kreativ als "DAS Bootstrap-Thema" betrachtet wird. Der Name der Datei verwirrt die Dinge nur ein wenig, da auf die Basis bootstrap.cssbereits das Styling angewendet wurde und ich diese Stile als Standard betrachten würde. Diese Schlussfolgerung ist jedoch angesichts der Aussagen im Beispielabschnitt der Bootstrap-Dokumentation zu dieser bootstrap-theme.cssDatei anscheinend falsch :

"Laden Sie das optionale Bootstrap-Design für eine visuell verbesserte Erfahrung."

Das obige Zitat finden Sie hier http://getbootstrap.com/getting-started/#examples auf einer Miniaturansicht, die auf diese Beispielseite http://getbootstrap.com/examples/theme/ verweist . Die Idee ist, dass bootstrap-theme.csses DAS Bootstrap-Thema ist UND es optional ist.

Themen bei BootSwatch.com

Über die Themen bei BootSwatch.com: Diese Themen sind nicht wie implementiert bootstrap-theme.css. Die BootSwatch-Designs sind modifizierte Versionen des Originals bootstrap.css. Sie sollten also auf keinen Fall gleichzeitig ein Thema von BootSwatch UND die bootstrap-theme.cssDatei verwenden.

Benutzerdefiniertes Thema

Informationen zu Ihrem eigenen benutzerdefinierten Thema: Sie können Änderungen vornehmen, bootstrap-theme.csswenn Sie ein eigenes Thema erstellen. Dies kann es einfacher machen, Änderungen am Styling vorzunehmen, ohne versehentlich die integrierte Bootstrap-Qualität zu beeinträchtigen.

Witz
quelle
68
Dies sollte die ausgewählte Antwort sein.
Patrick Cullen
11
Hinweis zu Bootswatch.com ist sehr hilfreich. Vielen Dank.
Daniel Kmak
@ Daniel ... aber es sollte entsprechend twbs / bootstrap neue Richtung überarbeitet werden, um eine stabile, konsistente Funktion für seine Themenkunden zu haben
Luca G. Soave
Ist die Datei bootstrap-theme.css nicht eher eine Überschreibung, dh bootstrap.css richtet Sie so ein, dass Sie bootstrap mit allen relevanten Stilen verwenden können. Bootstrap-theme.css dient dazu, Stile zu überschreiben, ohne die Basis-CSS-Datei zu ändern. Die Wichtigkeit hierbei ist, dass Sie beim Upgrade auf Bootstrap XX die Basis-CSS-Datei ersetzen und sich nicht darum kümmern müssen, alle Ihre Anpassungen zu verlieren. Möglicherweise müssen Sie Ihre Themendatei optimieren, aber das ist weit weniger ein Problem. Vielleicht was du gesagt hast.
Jacques
2
Das verwirrendste daran ist, dass wenn Sie die Customizing-Funktion auf der Bootstrap-Site ( getbootstrap.com/customize ) verwenden, Ihre Anpassungen in der Datei bootstrap.css und nicht in der Themendatei abgelegt werden. Diese Seite enthält auch keine Optionen zum Ändern von Elementen im Zusammenhang mit The Theme (tm). Soweit ich sehen kann, fügt die Themendatei nur eine Reihe von Verläufen und Schatten hinzu und macht sonst wenig.
C.List
90

Ein Beispiel für die CSS-Stile finden Sie unter: http://getbootstrap.com/examples/theme/

Wenn Sie sehen möchten, wie das Beispiel ohne die Datei bootstrap-theme.css aussieht, öffnen Sie die Browser-Entwicklertools und löschen Sie den Link aus dem <head> des Beispiels. Anschließend können Sie ihn vergleichen.

Ich weiß, dass dies eine alte Frage ist, habe sie aber nur für den Fall gepostet, dass jemand nach einem Beispiel sucht, wie es aussieht, als wäre ich es.

Aktualisieren

bootstrap.css = Haupt-CSS-Framework (Gitter, Grundstile usw.)

bootstrap-theme.css= erweitertes Styling (3D-Schaltflächen, Farbverläufe usw.). Diese Datei ist optional und beeinträchtigt die Funktionalität von Bootstrap überhaupt nicht. Sie verbessert nur das Erscheinungsbild.

Update 2

Mit der Veröffentlichung von v3.2.0 hat Bootstrap eine Option hinzugefügt, um das Thema CSS auf den Dokumentseiten anzuzeigen. Wenn Sie zu einer der Dokumentseiten ( CSS , Komponenten , Javascript ) gehen, sollte unten im Seitennavigation ein Link "Vorschau des Themas" angezeigt werden, über den Sie das Thema CSS ein- und ausschalten können.

Joshhunt
quelle
Vielen Dank, dass Sie sich damit befasst haben, da Ihre Antwort am sinnvollsten war. Ich habe mich gefragt, bootstrap.cssob ich den Inhalt einfach durch ein Thema von Bootswatch.com ersetzen würde, wie auf der Website angegeben, und das ich bootstrap-theme.cssauch mit einem Bottswatch-Thema verwenden könnte.
Refracted Paladin
3
bootstrap.css = Haupt-CSS-Framework (Gitter, Grundstile usw.) bootstrap-theme.css = erweitertes Styling (3D-Schaltflächen usw.) Ich habe es nie verwendet, habe es mir aber nur angesehen und Bootswatch scheint die Datei bootstrap.css zu bearbeiten um ihren eigenen Bedürfnissen gerecht zu werden. Um es zu verwenden, müssen Sie lediglich die Datei bootstrap.css von Bootswatch herunterladen und verwenden. Verwenden Sie bootstrap-theme.css nicht, da dies wahrscheinlich zu Konflikten mit dem CSS von Bootswatch führen kann.
Joshhunt
Danke Mann, schätze die Antwort! Das ist mir auch aufgefallen, dass ich es hier nicht zurück geschafft habe. Ohne Modifikation können Sie nicht bootstrap-thememit Bootswatch verwenden. Es hat meine Seite sowieso durcheinander gebracht.
Refracted Paladin
72

Erstens bootstrap-theme.cssist nichts anderes als das Äquivalent zum Bootstrap 2.x-Stil in Bootstrap 3. Wenn Sie es wirklich verwenden möchten, fügen Sie es einfach ALONG mit hinzu bootstrap.css(die minimierte Version funktioniert auch).

Androphon
quelle
4
Bitte denken Sie daran, dass Sie, wenn Sie Bootstrap-Theme-CSS-Dateien von Drittanbietern verwenden, die offizielle bootstrap-theme.css besser auskommentieren sollten.
Cheung
163
Wie kommt es, dass dies eine akzeptierte Antwort ist? Es ist nicht einmal eine Antwort. Es tut uns leid. Dies bedeutet lediglich, dass dies der Datei in Bootstrap 2 entspricht. Jeder, der nicht mit Bootstrap 2 vertraut ist, muss nun nach einer anderen Antwort suchen, um herauszufinden, was diese Datei bewirkt.
Mario Awad
4
Aber es ist alles was ich wissen will.
Uladzimir
9
Stimmen Sie @MarioAwad zu, dies ist keine Antwort. Es ist auch verwirrend, da ich dachte, es sei nur die Unterstützung des alten Bootstrap-CSS, was nur teilweise zutrifft.
Yannis Dran
1
In BS 3.2 ändert das Einbeziehen des Themas CSS tatsächlich das Erscheinungsbild, indem Schaltflächen und anderen Dingen 3D-Schattierungen hinzugefügt werden. Siehe Antwort von Joshhunt für Details.
RajV
31

Bootstrap-theme.css ist die zusätzliche CSS-Datei, die Sie optional verwenden können. Es gibt 3D-Effekte auf die Schaltflächen und einige andere Elemente.

Jowen
quelle
14

Wie von anderen angegeben, ist der Dateiname bootstrap-theme.css sehr verwirrend. Ich hätte so etwas wie bootstrap-3d.css oder bootstrap-fantasie.css gewählt, was aussagekräftiger wäre, was es tatsächlich tut. Was die Welt als "Bootstrap-Thema" sieht, können Sie von BootSwatch erhalten, einem völlig anderen Tier.

Trotzdem sind die Effekte sehr schön - Farbverläufe und Schatten und so weiter. Leider wird diese Datei bei BootSwatch-Themen Chaos anrichten, daher habe ich mich entschlossen, herauszufinden, was nötig ist, damit sie gut mit ihnen spielt.

WENIGER

Bootstrap-theme.css wird aus der Datei theme.less in der Bootstrap-Quelle generiert . Die betroffenen Elemente sind (ab Bootstrap v3.2.0):

  • Elemente auflisten
  • Tasten
  • Bilder
  • Dropdowns
  • Navbars
  • Warnungen
  • Fortschrittsbalken
  • Gruppen auflisten
  • Panels
  • Wells

Die Datei theme.less hängt ab von:

@import "variables.less";
@import "mixins.less";

Der Code verwendet Farben, die in Variablen definiert sind. An mehreren Stellen sind sie beispielsweise nicht vorhanden:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

Aus diesem Grund bringt bootstrap-theme.css die BootSwatch-Themes völlig durcheinander. Die gute Nachricht ist, dass BootSwatch-Designs auch aus Variablen.less-Dateien erstellt werden, sodass Sie einfach ein bootstrap-theme.css für Ihr BootSwatch-Design erstellen können.

Erstellen von bootstrap-theme.css

Der richtige Weg, dies zu tun, besteht darin, den Theme-Erstellungsprozess zu aktualisieren, aber hier ist der schnelle und schmutzige Weg. Ersetzen Sie die Datei variables.less in der Bootstrap-Quelle durch die Datei aus Ihrem Bootswatch-Design und erstellen Sie sie. Voila, Sie haben eine Datei bootstrap-theme.css für Ihr Bootswatch-Design.

Bootstrap selbst erstellen

Das Erstellen von Bootstrap mag entmutigend klingen, ist aber eigentlich sehr einfach:

  1. Laden Sie den Bootstrap-Quellcode herunter
  2. Laden Sie NodeJS herunter und installieren Sie es
  3. Öffnen Sie eine Eingabeaufforderung und navigieren Sie zum Bootstrap-Quellordner. Geben Sie "npm install" ein. Dadurch wird der Ordner "node_modules" zum Projekt hinzugefügt und alle benötigten Node-Inhalte heruntergeladen.
  4. Installieren Sie grunt global (die Option -g), indem Sie "npm install -g grunt-cli" eingeben.
  5. Benennen Sie den Ordner "dist" in "dist-orig" um und erstellen Sie ihn neu, indem Sie "grunt dist" eingeben. Überprüfen Sie nun, ob es einen neuen "dist" -Ordner gibt, der alles enthält, was Sie zur Verwendung Ihres benutzerdefinierten Bootstrap-Builds benötigen.

Getan. Sehen Sie, das war einfach, nicht wahr?

Dieser Typ
quelle
2

Ich weiß, dass dieser Beitrag ein bisschen alt ist, aber ...

  Wie "Witz" betonte.

Über Ihre eigenen kundenspezifischen Themen könnten Sie wählen Bootstrap-theme.css ändern , wenn Sie Ihr eigenes Design zu schaffen. Dies kann es einfacher machen, Änderungen am Styling vorzunehmen, ohne versehentlich die integrierte Bootstrap-Qualität zu beeinträchtigen.

  Ich sehe es so, wie Bootstrap im Laufe der Jahre gesehen hat, dass jeder etwas anderes als die Kernstile will. Während Sie bootstrap.css ändern können, kann dies zu Problemen führen und das Aktualisieren auf eine neuere Version zu einem echten Problem und zeitaufwändig machen. Das Herunterladen von einer ‚Thema‘ Seite erkennen Sie auf warten müssen , wenn diese Schöpfer Updates das Thema, groß , wenn manchmal, nicht wahr?

  Einige erstellen ihre eigene 'custom.css'-Datei und das ist in Ordnung, aber wenn Sie' bootstrap-theme.css 'verwenden, sind bereits viele Dinge erstellt, und so können Sie Ihr eigenes Thema schneller rollen, ohne den Kern von Bootstrap zu stören .css. Ich jedenfalls mag die 3D-Schaltflächen und Farbverläufe die meiste Zeit nicht, also ändere sie mit bootstrap-theme.css. In Margen oder Polsterung, ändern Sie den Radius auf Ihre Tasten, und so weiter ...

user1946683
quelle