Bootstrap 3 Kurz gesagt Bootstrap 3 anpassen

Und schließlich kommen wir zum letzten Tutorial der Serie, in dem Sie erfahren, wie Sie benutzerdefinierte Farbsätze erstellen.

Wenn Sie sich an den Anfang erinnern, als wir die großen Änderungen durchliefen, erwähnte ich, dass die BS-Autoren eine zusätzliche Datei zur Verfügung gestellt hatten, damit BS3 genau wie BS2 aussieht, anstatt das flache Aussehen zu verwenden.

In dieser Serie haben wir den standardmäßigen BS3-Flat-Look verwendet. Wenn Sie jedoch die vorgefertigte JavaScript-Version von BS3 von der Bootstrap-Website herunterladen, finden Sie eine neue Datei in dem Archiv, das Sie herunterladen bootstrap-theme.css. 

Wenn Sie diese Datei unmittelbar nach der Aufnahme der Kerndatei bootstrap.css in Ihr Projekt einbinden, werden Sie feststellen, dass das Aussehen und Verhalten Ihrer Anwendung, obwohl Sie jetzt die neue BS3 verwenden, immer noch BS2 ähnelt.

Die Autoren stellten fest, dass eines der größten Hindernisse für die Einführung von BS3 in neuen Anwendungen darin bestand, dass es nicht in der Lage war, es auf benutzerdefinierte Weise zu gestalten, jedoch mit Leichtigkeit.

Wenn Sie ein Benutzer von LESS oder sogar Sass waren (da BS3 jetzt Sass-Bindungen hat), war dies kein Problem. Sie haben einfach die LESS-Quellen geöffnet, die benötigten Variablen und Mixins angepasst und den LESS-Compiler durchlaufen, um Ihr neues CSS-Skript zu erhalten.

Leider hat nicht jeder weniger benutzt; Tatsächlich hatten viele Entwickler und Designer nur die Möglichkeit, die vorkompilierten CSS- und JavaScript-Dateien herunterzuladen und einzubinden, sodass ein besserer Weg gefunden werden musste.

Die erste Änderung bestand darin, die gesamten Less-Quellen für ein In-Page-Anpassungstool direkt auf der Bootstrap-Hauptseite zu öffnen. Dies ist jedoch nichts Neues. Sie konnten diese Seite zuvor nur eingeschränkt nutzen. Mit BS3 wurde das Less-Anpassungstool jedoch komplett überarbeitet, und Sie können es jetzt neu definieren alles BS3 verwendet von Schriftgrößen und Schriftarten bis hin zu Rastergrößen, Triggerpunkten und grundlegenden kontextabhängigen Farbsätzen.

Tatsächlich kann jetzt nichts geändert werden, bevor Sie sich entscheiden, Ihr neues benutzerdefiniertes CSS herunterzuladen, wie das folgende Bild zeigt:

Screenshot der oberen Hälfte des neuen Anpassungstools

Aufgrund der schieren Größe des Tools ist es unmöglich, die gesamte Sache in diesem Lernprogramm darzustellen, aber es ist leicht zugänglich. Gehen Sie einfach zur Bootstrap-Website und klicken Sie auf Anpassen in der oberen Menüleiste. Sie werden auch sehen, dass Sie viele andere Optionen haben, z. B. welche JavaScript-Plug-Ins und Toolkits einbezogen werden sollen, welche Komponenten einbezogen werden sollen und welchen Basisstil Sie nicht möchten.

Wenn Sie beispielsweise nur das Rastersystem verwenden möchten und nichts anderes, können Sie einfach nur das Rastersystem auswählen und die Auswahl aller anderen Komponenten aufheben.

Die BS3-Site generiert dann nur den erforderlichen Code zum Einschließen und nicht mehr. Dies ist ein Segen für diejenigen, die sich darüber beschweren, dass alle Bootstrap-Websites gleich aussehen, da dies bedeutet, dass Ihre Website nicht unbedingt wie der Rest aussehen muss alles andere.

Es gibt zwei weitere Möglichkeiten zum Anpassen des Builds. Die erste besteht darin, das zusätzliche CSS-Stylesheet 'bootstrap-theme' zu verwenden, eine Kopie zu erstellen und dann die Stile nach Ihren Wünschen zu ändern. Dies ist nicht so einfach wie die Anpassungstools, aber auch nicht so schwierig wie die Alternative.

Die meisten Klassennamen und -einstellungen, die Sie ändern möchten, um Ihre persönliche Marke in BS3 zu stempeln, sind bereits im BS2-Design getrennt. Daher ist das Experimentieren am schnellsten, wenn Sie einfach eine Prototyping-Seite mit den wichtigsten Steuerelementen und Elementen zusammenstellen Sie möchten ändern, und verknüpfen Sie dann Ihre Kopie des BS2-Designs.

Wenn Sie Node und so etwas wie Bower verwenden, wird es noch einfacher, da Sie Live-Reload verwenden können. Sie müssen lediglich beobachten, wie sich Ihre Beispielseite in Echtzeit ändert, während Sie Ihre benutzerdefinierte Version des Themenblatts optimieren.

Der zweite Weg ist etwas komplizierter, und wie in den BS3-Dokumenten beschrieben, gibt es zwei Varianten: leichte Anpassungen und umfangreiche Anpassungen.

Ein Beispiel für eine leichte Anpassung ist das Hinzufügen einer kontextabhängigen Farbklasse zum Schaltflächenelement. Zum Beispiel, wenn Sie hinzufügen möchten BTN-Himmel neben dem BTN-Info, BTN-Primär, Klassen usw. können Sie ein einziges Stylesheet definieren, das die folgenden Regeln enthält:

.btn-sky, .btn-sky: schweben, .btn-sky: aktiv color: # 000000; Textschatten: 0 -1px 0 rgba (0, 0, 0, 2); Hintergrundfarbe: # AAD4FF; Rand: 1px durchgehend schwarz;  .btn-sky Hintergrundwiederholung: repeat-x; Hintergrundbild: linearer Gradient (oben, # 00FFFF 0%, # FFFF00 100%);  .btn-sky: hover Hintergrundposition: 0 -10px; 

Wenn es korrekt hinzugefügt und verlinkt wird, sollte es ungefähr so ​​aussehen: 

Ausgabe aus einem Codebeispiel, wenn es mit dem Anpassungsbeispiel verwendet wird

Bei Verwendung mit einem normalen Button-Tag auf folgende Weise:

Mein Sky-Button 

Der schwierigste Teil der Verwendung dieser Methode besteht darin, die Basis-CSS-Stylesheets zu durchsuchen, um die Namen zu finden, die Sie überschreiben möchten. es ist nicht gerade schwierig, nur langatmig.

Wenn Sie über eine Schaltfläche wie die Schaltfläche oben verfügen oder eine Warnung, ein Feld, eine Liste oder eine andere Klasse gefunden und kopiert haben, können Sie problemlos eine Vorlage erstellen, die immer wieder verwendet werden kann, wenn Sie eine benutzerdefinierte Klasse hinzufügen möchten Art.

Schwere Anpassungen unterscheiden sich nicht sehr von leichten Anpassungen. Der Hauptunterschied besteht darin, dass Sie die gesamte Klasse überschreiben.

So finden Sie zum Beispiel alle zugehörigen Klassen btn, Kopieren Sie sie, ändern Sie sie und fügen Sie sie separat hinzu.

Die neue Architektur innerhalb des BS3-Frameworks bedeutet jetzt, dass das Überschreiben der Zielselektoren und ihrer Geschwister einfach ist, sobald Sie sie kennen. Wie bereits erwähnt, enthält die Bootstrap-Design-Datei bereits viel von dem, was Sie möglicherweise ändern möchten. Wenn dies nicht möglich ist, probieren Sie Sites wie Bootswatch.com:

Screenshot des Sweet-Cherry-Themes von Bootswatch.com

Viele andere haben Tausende von Themen zur Auswahl, sowohl kostenlos als auch kostenpflichtig. Es gibt also keine Entschuldigung dafür, dass Ihre Bootstrap-Site genauso aussieht wie die aller anderen.

Fazit

Ich hoffe, dass Ihnen diese Serie gefallen hat und dass Sie mit Bootstrap 3 zu einem besseren Entwickler werden. In dieser neuen Welt des responsiven Webdesigns ist BS3 ein Framework, das nicht leichtfertig getroffen werden sollte die größten Social-Media-Unternehmen, die es gibt und die meisten ihrer öffentlich zugänglichen Websites nutzen.

Wenn Sie sich mit mir in Verbindung setzen und Fragen zum Buch stellen möchten, kann ich generell auf Twitter als @shawty_ds herumhängen. Sie können mich im Allgemeinen auch auf LinkedIn oder in der Linked.NET (Lidnug) -Benutzergruppe finden, die ich beim Ausführen von dort unterstütze.

Bis zum nächsten Mal ruhig bleiben und Bootstrapping fortsetzen.

Dieses Tutorial enthält ein Kapitel von Bootstrap 3 Succinctly, ein kostenloses eBook des Teams von Syncfusion.