Share
Willkommen zu dieser Serie über die Twitter Bootstrap (BS) -UI und das CSS-Framework.
In meinem Buch, Twitter Bootstrap Succinctly, habe ich die ersten Vorarbeiten niedergelegt und mit Bootstrap 2 angefangen.
Seit der Veröffentlichung dieses Buches ist Bootstrap 3 jedoch zur Mainstream-Version geworden.
In dieser Serie werden wir diese Grundlagen weiter ausbauen und uns mit BS v3 beschäftigen. Wir werden sehen, wo die Dinge anders sind, und wenn wir uns mit den neuen Funktionen auseinandersetzen, werden wir feststellen, dass ein großer Teil der in Version 2 vorhandenen Elemente noch auf Version 3 anwendbar ist.
Wenn Sie das Buch über Bootstrap 2 noch nicht gelesen haben, möchte ich Sie dazu auffordern, da ich an verschiedenen Stellen in dieser Serie darauf zurückgreifen werde.
Warum? Ich glaube, um die gesamte Bootstrap-Landschaft zu verstehen, muss man sie von Anfang an untersuchen. Sie müssen in der Lage sein zu verstehen, was es zu erreichen gilt und wie.
Sie werden in der Lage sein, nur dieser Serie zu folgen und die Grundlagen von BS v3 zu erlernen, aber Sie werden ein tieferes und besseres Verständnis erhalten, wenn Sie zuerst das v2-Buch lesen.
Was wurde also von v2 zu v3 geändert??
Ziemlich viel.
Die wichtigste Änderung zwischen den beiden Versionen besteht darin, dass v3 jetzt "Mobile First" ist. Bootstrap v2 war ein responsives Layout-CSS-Kit, aber seine mobilen und reaktionsfähigen Funktionen standen immer an zweiter Stelle zu den umfangreichen UI-Funktionen. Damit das Responsive-Material ordnungsgemäß funktioniert, musste eine zweite CSS-Datei eingefügt werden, deren einziger Zweck darin bestand, die responsiven, mobilen Funktionen zu aktivieren, und sonst nichts.
In Version 3 wurde diese Situation vollständig umgekehrt. Das gesamte Framework ist jetzt mobil und reaktionsschnell, und die Anpassung Ihrer Layouts an größere Bildschirmformate erfordert nun zusätzliche Arbeit. Versteht mich nicht falsch - es ist auf keinen Fall eine riesige Menge Arbeit. Das meiste, was Sie ändern müssen, ist immer noch das Austauschen von Klassen und das korrekte Strukturieren Ihres HTML-Markups.
Die andere wesentliche Änderung betrifft die Benennung von Klassen und API-Aufrufen. Viele der Klassennamen, die in Version 2 eingeführt wurden, sind jetzt entweder veraltet oder wurden in einen für ihren beabsichtigten Zweck angemesseneren Namen umbenannt.
Es wurde auch viel unternommen, um Klassen umzubenennen, um konsistenter zu sein. In Version 2 hatten wir beispielsweise für Elemente, die auf die RED-Fehlerfarbe abzielten, die folgenden Klassen:
Accentsconagua
btn-gefahr Textfehler tr.error .wichtig .wichtig .Error Fortschrittsgefahr In Version 3 wurden diese konsolidiert, sodass die Benennung für alle Komponenten wie folgt ähnlich ist:
btn-gefahr Textgefahr .Achtung .Achtung Fortschrittsbalken-Gefahr Wie Sie sehen, spielt die Konsistenz heute eine wichtige Rolle in den v3-Klassen, und viele andere ähnliche Änderungen wurden im gesamten Framework vorgenommen.
Es gab auch einige kleinere Änderungen. Zum Beispiel wurde das von Bootstrap verwendete Boxmodell jetzt erheblich verbessert, wobei nun alle Elemente verwendet wurden Border-Box als Standardmodell für die Größenbestimmung von CSS-Boxen.
Das Rastersystem wurde ebenfalls erweitert und verbessert. Statt ein monolithisches Rastersystem mit optionalen Klassen zu sein, umfasst es jetzt vier Rastergruppen, die speziell für Telefone, Tablets, Desktops und große Desktops gedacht sind.
Das gesamte JavaScript-Material wurde jetzt auch mit einem Namen versehen, um Konflikte mit anderem JavaScript-Code zu reduzieren. Die verfügbaren Ereignisse werden jetzt besser benannt, um ihren Zweck zu reflektieren, und sind viel klarer dokumentiert.
Modals und Navbars Die Reaktionszeiten wurden erheblich verbessert. Mit den Änderungen der Klassennamen wurden nun auch die Größenklassen für alle Komponenten (Inc Nav Modals) angepasst.
In Bezug auf die Komponenten wurden einige der älteren, weniger häufig verwendeten Komponenten als veraltet eingestuft und von ihnen entfernt Akkordeon Komponente. Aber verzweifeln Sie nicht - das Akkordeon wurde durch ein brandneues ersetzt zusammenklappbares Panel Eine Komponente, die viel flexibler ist als ihr Vorgänger.
Wir haben auch eine neue, schmale Jumbotron, Neu Panel Typen, Listengruppen und vieles mehr.
Schließlich ändert man das jeder wird bemerken, ist das Look and Feel: TWB V3 ist flach. Es hat eine einfarbige, neue Oberfläche, jedoch mit abgerundeten Ecken.
Die Hover-Klassen enthalten keine schönen abgestuften Effekte mehr, und die Fortschrittsbalken und Schaltflächen sehen nicht länger halb-3D aus, wie in Version 2. Stattdessen haben sich die Betreuer von Twitter Bootstrap dafür entschieden, das Aussehen und Verhalten der Elemente im CSS einfacher anzupassen.
Die Betreuer haben sogar ein "Bootstrap" -Design zur Verfügung gestellt, durch das v3 wie das ursprüngliche v2-Design aussieht, um den Einstieg zu erleichtern. Im letzten Teil dieser Serie werde ich Ihnen zeigen, wie einfach es jetzt ist, die verschiedenen Klassen zu überschreiben und Ihnen zu zeigen, wie Sie das flache Thema überarbeiten, um Ihr eigenes Aussehen und Gefühl zu erhalten.
Für den Moment, wenn Sie die Version 2 nutzen möchten, müssen Sie sicherstellen, dass Sie auch die entsprechende CSS-Datei nach Bedarf hinzufügen. Wenn Sie den v3-Standard beibehalten möchten, benötigen Sie keine zusätzlichen Funktionen.
Als BS2 zum ersten Mal veröffentlicht wurde, war der Download nur von der Projekt-Website möglich. Im ersten Buch wurde ausführlich darauf eingegangen, welche Dateien genau in der ZIP-Datei enthalten waren und warum.
Da so viele Leute Bootstrap verwendeten, dauerte es nicht lange, bis es von den Leuten, die MaxCDN betreiben, kostenlos auf CDN zur Verfügung gestellt wurde. Diese Tradition hat sich in der v3-Codebasis fortgesetzt, und Sie können jetzt einfach die gewählte Standardinstallation von v3 erhalten, indem Sie die folgenden HTML-Skript-Tags verwenden:
Wenn Sie die CDN-Versionen verwenden, denken Sie bitte daran, dass Sie auch eine aktuelle Version von JQuery verwenden müssen. Keine der BS3 JS-Funktionen funktioniert, sofern Sie dies nicht tun.
Neben dem CDN-Link gibt es jetzt auch einen direkten Download auf der Website getbootstrap.com, nicht nur für das Standard-JavaScript- und CSS-Paket, wie im vorherigen Buch beschrieben, sondern auch einen direkten Link zu einer ZIP-Datei des Originals. Weniger Quellen und eine Konvertierung in "Sass" für diejenigen, die eine vollständig variablenbasierte, anpassbare Version des Kits in Ihr eigenes Build-System integrieren möchten, indem sie Tools wie Grunt verwenden, um Dinge zu automatisieren.
Neben den neuen Quellen können Sie jetzt auch Bower verwenden, um alles, was Sie benötigen, mithilfe der folgenden Befehle aus der Befehlszeile der Projektordner zu installieren:
Bower installieren Bootstrap
Bower ist ein HTML-Gerüst- und Paketsystem, das einen Großteil der Kesselplatte der Anwendung automatisiert. Sie müssen es nicht verstehen, um BS v3 zu verstehen, aber eine schnelle Google-Suche nach „Bower“ wird viele Hinweise aufzeigen, um Ihr Verständnis zu vertiefen.
In einem ähnlichen Hinweis kann BS v3 auch mit dem NuGet-Paketmanager installiert werden, wenn Sie in Visual Studio arbeiten. Wie bei Bower wird der Prozess zum Installieren und Einrichten der erforderlichen Dateien weitgehend automatisiert. Seien Sie vorsichtig - in NuGet gibt es viele Bootstrap-Pakete, von denen einige mehr Arbeit verursachen, als sie sparen.
Schließlich ist der TWB-Customizer noch verfügbar. Es wurde umfassend umstrukturiert und neu aufgebaut, um mehr Optionen und einen einfacheren, intuitiveren Blick auf das, was Sie ändern, und warum.
Tatsächlich ist es jetzt so einfach, die Einstellungen mithilfe des Anpassers zu ändern, sodass Ihr Designer oder Designteam 90 Prozent der Arbeit erledigen kann, um die Farben und das Branding Ihres Downloads festzulegen, noch bevor die erforderlichen Dateien heruntergeladen werden. Dadurch kann Ihre Konstruktionsabteilung sofort mit der Auswahl von Farben und Layouts beginnen, während Sie an den Seitenlayouts und zusätzlichem Code für die erforderliche Interaktivität arbeiten. Dann müssen Sie einfach Ihre Standarddateien durch die Dateien ersetzen, die Ihnen von Ihren Designern zur Verfügung gestellt werden. Eine Änderung des Designs sollte sofort erfolgen.
Offiziell unterstützt BS v3 nur die neuesten HTML 5-kompatiblen Browser und Internet Explorer 10 und höher.
In der Realität unterstützt das Framework auch IE8 und IE9. Es gibt jedoch einige Funktionen von CSS3 und HTML5, die nicht wie erwartet funktionieren. Wenn Sie möchten, dass die reagierenden Elemente ordnungsgemäß funktionieren, müssen Sie dies verwenden respons.js, die Sie von diesem GitHub-Repository herunterladen können.
Sobald Sie hinzufügen antworten Für Ihr Projekt ist es im Grunde nur eine allgemeine Erwartung, was zu verschiedenen Zeitpunkten zu den verschiedenen Browsern hinzugefügt wurde und was nicht.
Die Teile, die am häufigsten als fehlend auffallen, lauten wie folgt:
Für IE8:
Grenzradius ist nicht unterstützt.Box Schatten ist nicht unterstützt.verwandeln ist nicht unterstützt.Übergang ist nicht unterstützt.Platzhalter Text ist nicht unterstützt.Dies bedeutet im Wesentlichen, dass Platzhaltertext in Eingabeelementen nicht angezeigt wird und alles, was abgerundete Ecken oder Schlagschatten verwendet oder irgendeine Art von Übergang oder Transformation für das Element aufweist, wird nicht korrekt angezeigt.
Für IE9:
Grenzradius ist unterstützt.Box Schatten ist unterstützt.verwandeln ist unterstützt (aber nur mit -Frau Präfix).Übergang ist nicht unterstützt.Platzhalter Text ist nicht unterstützt.Etwas verbessert, wenn es sich um IE9 handelt - abgerundete Ecken und Schlagschatten sind jetzt in Ordnung, und Transformationen funktionieren ebenfalls, sofern sie auch eine haben -Frau Präfixversion.
Übergänge und Platzhalter auf den Eingabeelementen fehlen jedoch immer noch.
Die offizielle Support-Matrix für die aktuelle Version von BS3 in aktuellen Browsern sieht folgendermaßen aus:
| Chrom | Feuerfuchs | IE | Oper | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| Windows | ✓ | ✓ | ✓ | ✓ | ✗ |
Wenn Sie auf IE9 und IE8 abzielen und verwenden respons.js Um diese Bemühungen zu unterstützen, beachten Sie bitte die folgenden Punkte:
Sie müssen sich auf die beziehen respons.js docs, wenn Sie CSS usw. in einer anderen Domäne (z. B. einem CDN) hosten, um domänenübergreifende Probleme zu verringern.
Die Browsersicherheit verursacht Probleme mit Datei:// und @einführen basierte Ressourcenreferenzen.
Speziell für @einführen ist dass respons.js Die Regeln, die für Drupal-Benutzer wichtig sind, können von Drupal nicht richtig gelesen werden @einführen ziemlich schwer.
Ältere IE-Kompatibilitätsmodi verhindern, dass Bootstrap vollständig funktioniert, nicht nur mit respons.js, Seien Sie also vorsichtig, wenn Sie die Abwärtskompatibilität mit einem modernen IE im Emulationsmodus testen. Die Ergebnisse werden sehr wahrscheinlich sein nicht Sei was du erwartest.
Dieses Tutorial enthält ein Kapitel von Bootstrap 3 Succinctly, ein kostenloses eBook des Teams von Syncfusion.
