Bootstrap 4 Neue und coole Funktionen, die Sie lieben werden

Die nächste Hauptversion des Bootstrap-Frameworks steht vor der Tür. Die Alpha-Version kann bereits von der Entwicklungs-Website von Bootstrap heruntergeladen werden. Der Quellcode ist auch auf Github verfügbar.

Twitter Bootstrap ist derzeit das beliebteste Frontend-Framework. Es ermöglicht Entwicklern, dies zu tun Erstellen Sie Mobile-First- und Responsive-Websites, und zwar schnell. Bootstrap ermöglicht die intelligente Nutzung der Standard-HTML5-, CSS3- und Javascript-Frontend-Trios. Sie wird derzeit von mehr als 6 Millionen Websites im Internet genutzt.

Obwohl sich Bootstrap 4 noch in der Entwicklungsphase befindet (also noch nicht auf einer Live-Site verwenden), haben die Entwickler hervorragende Arbeit geleistet. In diesem Beitrag werden wir einen Blick auf die neue Version werfen, die viele großartige Funktionen enthält, die sicherlich dazu gehören Rationalisieren und verbessern Sie den Workflow der Frontend-Entwicklung.

1. Sass statt WENIGER

Bisher hat Bootstrap LESS als Haupt-Preprozessor für CSS verwendet, aber für die neue Hauptversion werden die Stilregeln in Sass überarbeitet, das bei Frontend-Entwicklern sehr viel populärer ist Möglichkeiten. Dank des mächtigen Libsass Sass Complier in C / C++ Bootstrap 4 wird viel schneller kompiliert als vorher.

2. Neue Rasterebene für kleinere Bildschirme

Bootstrap verfügt über ein ausgereiftes responsives Grid-System, mit dem Entwickler Geräte mit unterschiedlichen Ansichtsfenstern anvisieren können. Bootstrap 3 verfügt derzeit über 4 Gitterklassen für Spalten, .col-xs-XX für Handys, .col-sm-XX für Tabletten, .col-md-XX für Desktops und .col-lg-XX für größere Desktops. Bootstrap 4 wird das Rastersystem um ein fünftes System erweitern, das den Entwicklern die Arbeit erleichtern wird ziele auf kleinere geräte unter 480px viewport width.

Die neue Rasterklasse hat den Namen der vorherigen kleinsten Klasse übernommen und die aktuellen Namen der Rasterebenen um eine Stufe nach oben verschoben. In Bootstrap 4 verwenden die großen Desktops die .col-xl-XX Klassenauswahl. Es ist wichtig zu wissen, dass trotz des neuen Namens keine neue Klasse für extra große Bildschirme hinzugefügt wurde, sondern für extra kleine.

3. Führt relative CSS-Einheiten ein

Bootstrap 4 stellt die Unterstützung für Internet Explorer 8 endgültig ein. Dies ist wirklich ein intelligenter Schritt, da es ihnen ermöglicht, lästige Polyfills loszuwerden und in relative CSS-Einheiten zu konvertieren. Anstelle von Pixeln wird es die neue Hauptversion geben Verwenden Sie REMs und EMs das macht es möglich Responsive Typografie implementieren auf Bootstrap-Sites. Dies erhöht auch die Lesbarkeit und macht Websites für behinderte Benutzer leichter zugänglich.

Wenn Sie ausprobieren möchten, wie relative Einheiten mit dem neuen Bootstrap 4 arbeiten, sehen Sie sich diese Demo auf Codepen an.

4. Brandneue Bootstrap-Karten

Das Entwicklungsteam beschloss, einige der vorherigen Elemente der Bootstrap-Benutzeroberfläche zu vereinheitlichen, und entschied sich daher, a einzuführen neue UI-Komponente namens Cards. Karten ersetzen die früheren Wells, Thumbnails und Panels und bieten Benutzern einen optimierten Workflow. Machen Sie sich keine Sorgen, die Karten behalten vertraute Elemente wie Titel, Kopf- und Fußzeilen von Wells, Thumbnails und Panels.

Da die Karten flexibler sind als die aktuellen UI-Komponenten, bieten sie mehr Platz für kreative Implementierungen. Es gibt einige Pioniere, die bereits Codepen mit Bootstrap Cards experimentiert haben. Sie können sie auschecken oder Ihre eigenen Karten erstellen.

5. Neues Reboot-Modul

Das neue Reboot-Modul ersetzt das vorherige normalize.css Datei zurücksetzen. Es gibt es nicht ab; im Gegenteil, es baut mehr Regeln darauf auf. Das Ziel des Umzugs bestand darin, alle generischen CSS-Selektoren einzuschließen und Stile in a zurückzusetzen einzelne, benutzerfreundliche SCSS-Datei. Sie können den Quellcode hier einsehen, wenn Sie die Funktionsweise des neuen Moduls besser verstehen möchten.

Es ist gut zu wissen, dass die neuen Reset-Stile die CSS-Eigenschaft für die Boxgröße intelligent auf festgelegt haben Border-Box auf der Element, das daher von jedem untergeordneten Element auf der Seite geerbt wird. Die neue Stilregel macht responsive Layouts übersichtlicher. Wenn Sie den Unterschied zwischen den Layouttypen für Inhalts- und Rahmenrahmen erfahren möchten, werfen Sie einen Blick auf diese praktische Demo, die von CSS-Tricks.com bereitgestellt wird (sie wurde nicht für Bootstrap 4 erstellt im Allgemeinen funktioniert).

6. Opt-in-Flexbox-Support

Mit Bootstrap 4 können Sie jedoch das Flexbox-Layout von CSS3 nutzen - da Internet Explorer 9 das Flexbox-Modul nicht unterstützt - ist dies die Standardversion von Bootstrap 4 verwendet die Float- und Anzeige-CSS-Eigenschaften, um ein flüssiges Layout zu implementieren.

Flexbox verfügt über ein benutzerfreundliches Layout, das hervorragend für das responsive Design verwendet werden kann, da es einen flexiblen Container bietet, der sich entweder ausdehnt oder verkleinert, um den verfügbaren Platz optimal zu füllen. Verwenden Sie die Flexbox-Option nur dann, wenn Sie nicht müssen Unterstützung für IE9 bieten.

7. Optimierte Anpassung der Variablen

Alle in der neuen Bootstrap-Version verwendeten Sass-Variablen sind in einer einzigen Datei namens _variables.scss enthalten, die den Entwicklungsprozess erheblich vereinfacht. Sie müssen nichts anderes tun, außer die Einstellungen aus dieser Datei in eine andere zu kopieren _custom.scss um die Standardwerte zu ändern.

Sie können viele Dinge anpassen B. Farben, Abstände, Verknüpfungsstile, Typografie, Tabellen, Rasterhaltepunkte und Container, Spaltennummer und Rinnenbreite und viele andere.

8. Neue Hilfsklassen für Abstände

Bootstrap 3 enthält bereits viele praktische Dienstklassen, z. B. solche, die Floating oder Clearfix ändern, aber Bootstrap 4 fügt noch mehr hinzu. Das neue Abstandsklassen Ermöglichen Sie Entwicklern das schnelle Ändern von Füllungen und Rändern auf ihren Websites.

Die Syntax für die neuen Klassen ist ziemlich einfach, zum Beispiel das Hinzufügen von .m-a-0-Klasse verknüpft eine Stilregel damit Setzt die Ränder auf allen Seiten des angegebenen Elements auf 0 (Margin-All-0).. Während die Margen die m- Vorab werden die Auffüllungen mit der p- Präfix. In den Entwicklungsdokumenten können Sie alle neuen Abstandsdienstprogrammklassen überprüfen.

9. QuickInfos und Popovers, die von Tether angetrieben werden

In Bootstrap 4 verwendet Tooltips und Popovers die supercool-Tether-Bibliothek, eine Positionierungs-Engine, die es ermöglicht, ein absolut positioniertes Element direkt neben einem anderen Element auf derselben Seite zu halten. Dies bedeutet Tooltips und Popovers wird automatisch richtig platziert auf Bootstrap 4-Websites.

Vergessen Sie nicht, dass Tether eine JavaScript-Bibliothek eines Drittanbieters ist. Sie müssen diese separat in den HTML-Code einfügen, bevor Sie die Datei bootstrap.js verwenden.

10. Refactored JavaScript Plugins

Das Entwicklungsteam hat jedes JavaScript-Plugin für die neue Version mit EcmaScript 6 überarbeitet. Mit der intelligenten Nutzung der neuesten Spezifikationen und den neuesten Verbesserungen soll das Frontend-Erlebnis verbessert werden.

Der neue Bootstrap 4 wurde auch durch andere JavaScript-Verbesserungen wie z Optionstypüberprüfung, generische Abrissmethoden, und UMD-Unterstützung, Dies alles wird zusammenarbeiten, um das populärste Frontend-Framework reibungsloser als je zuvor auszuführen.

Jetzt lesen: 10 leichte Alternativen zu Bootstrap & Foundation