Bootstrap 3 vs. Bootstrap 4 – Ein Überblick

Bootstrap ist das vertrauenswürdigste Open-Source-Front-End-Framework zur Entwicklung reaktionsschneller, Mobile-First-Websites. Bootstrap ist ein berühmtes Framework, warum??? Denn alles, was es braucht, sind Grundkenntnisse in HTML und CSS, und wir können eine attraktive und funktionale Website erstellen, indem wir vordefinierte Bootstrap-Klassen verwenden, die für die Reaktionsfähigkeit auf verschiedenen Geräten sorgen.

Bootstrap 3 wurde im Jahr 2013 veröffentlicht und die letzte stabile Version Bootstrap 3.3.7 wurde im Juli 2016 veröffentlicht. Im Oktober 2014 gab Twitter bekannt, dass sich Bootstrap 4 in der Entwicklung befindet. Die erste Alpha-Version von Bootstrap 4 wurde im August 2015 veröffentlicht. Und jetzt, im August 2017, wurde die Beta-Version von Bootstrap 4.0.0 veröffentlicht. Sie können sich dieses ausführliche Bootstrap-Tutorial ansehen, wenn Sie von 0 an lernen möchten.

Im Mittelpunkt dieses Beitrags stehen die wichtigsten Unterschiede, Hinzufügungen und Abzüge von Version 3 zur neu veröffentlichten Version 4.0.0-beta.

Was ist anders in Version 4:

Jetzt können wir beginnen, über die neuen Funktionen von Bootstrap 4 zu sprechen. Da sich die Technologie schnell weiterentwickelt, werden neuere und intelligentere Sprachen entwickelt, um das Erstellen sauberer, schneller Websites viel einfacher zu machen. Dies ist bei der neuesten Version von Bootstrap der Fall. Das Team sagt, dass diese „Version 4 eine große Neufassung fast des gesamten Projekts ist“. Wir werden einige wichtige Änderungen dieser Verbesserung zusammenfassen.

Globale Änderungen:

• Für Quell-CSS-Dateien von Less auf Sass umgestellt.
• Von px rem als primäre CSS-Einheit von Bootstrap umgestellt, obwohl Pixel immer noch für Medienabfragen und das Rasterverhalten verwendet werden, da Geräteansichtsfenster nicht von der Schriftgröße beeinflusst werden.
• Die globale Schriftgröße wurde von 14px auf 16px erhöht .
• Eine neue Rasterebene für ~480px und darunter hinzugefügt.

Rastersystem:

Der wichtigste Schritt von Bootstrap 4 in Richtung Verbesserung ist die Bewegung hin zur Einführung von Flexbox. Als Teil von Flexbox enthaltene Unterstützung für vertikale und horizontale Ausrichtungsklassen. Bootstrap 4 legt großen Wert auf die Anpassung. Sein neues Grid-Tier-System lässt den Bootstrap 4 das Vorhandensein von bis zu 5 Grid-Tiers genießen (Beispiel für 5 Tiers: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). Man kann leicht sagen, dass Bootstrap 4 Zugang zu einem verbesserten Grid-System bietet.

• Eine neue SM-Rasterebene unter 768 Pixel wurde für eine genauere Steuerung hinzugefügt. Es gibt jetzt xs, sm, md, lg und xl. Das bedeutet auch, dass jede Stufe um eine Stufe nach oben gestuft wurde (also .col-md-6 in v3 ist jetzt .col-lg-6 in v4).
• Grid-System-Medienabfrage-Breakpoints und Containerbreiten geändert, um neue Grid-Ebenen zu berücksichtigen und sicherzustellen, dass Spalten bei ihrer maximalen Breite gleichmäßig durch 12 teilbar sind.
• Grid-Breakpoints und Container-Breiten werden jetzt über Sass-Maps ($grid-breakpoints und $container-max-widths) anstatt einer Handvoll separater Variablen behandelt. Diese ersetzen die @screen-*-Variablen vollständig und ermöglichen es Ihnen, die Rasterebenen vollständig anzupassen.
• Auch die Medienabfragen haben sich geändert. Anstatt Medienabfrage-Deklarationen jedes Mal mit demselben Wert zu wiederholen, gibt es jetzt @include media-breakpoint-up/down/only. Anstatt @media (min-width: @screen-sm-min) { … } zu schreiben, können Sie jetzt @include media-breakpoint-up(sm) { … } schreiben.

Browserunterstützung:

• Unterstützung für IE8 und iOS 6 eingestellt. v4 ist jetzt nur noch IE9+ und iOS 7+. Verwenden Sie für Sites, die eines davon benötigen, v3.

Gebrauchsklassen:

In Bootstrap 4 wurden neue Utility-Klassen aufgenommen, ohne dass bestehende Funktionalitäten wie auch immer beeinträchtigt werden. Solche wichtigen Ergänzungen sind responsive Textausrichtungsklassen, responsive Floats und responsive Embedding. Abgesehen davon, dass sie viele Shortcuts bieten, ermöglichen diese jeweils das Ändern der Ausrichtung des Textes, das Fließen der Elemente und das Skalieren des Seitenverhältnisses von eingebetteten Medien. (Beispiel: .hidden-md-up verbirgt ein Element in mittleren, großen und extragroßen Ansichtsfenstern. Verwenden Sie jetzt anstelle von .hidden-md-up .d-md-none ).

Bilder:

• .img-responsive in .img-fluid umbenannt.
• .img-rounded in .rounded umbenannt
• .img-circle in .rounded-circle umbenannt

Tabellen:

• Responsive Tabellen benötigen kein Wrapping-Element mehr. Mit einfachen Worten, in Bootstrap 3 sollte die .table-responsive Klasse zum übergeordneten <div> hinzugefügt werden. Aber in Bootstrap 4 muss die .table-responsive Klasse zum Element <table> hinzugefügt werden.
• Eine neue .table-inverse Option hinzugefügt.
• Modifikatoren für Tabellenkopfzeilen hinzugefügt: .thead-default und. .thead-inverse
• Kontextabhängige Klassen umbenannt, sodass sie ein .table- -Präfix haben. Daher .active .success , .warning , .danger und .table-info zu .table-active , .table-success , .table-warning , .table-danger und .table-info.

Navigation:

In Bootstrap 4 wurde die Navigationskomponente stark vereinfacht. Man muss eine neue Liste von Elementen erstellen, die die neueste Nav-Basisklasse verwenden. Es gibt auch einige neue Ergänzungen wie Nav-Link-Klasse, Nav-Item-Klasse und Navigationsleistenstile.

• Komponente mit Flexbox umgeschrieben.
• .navbar-default ist jetzt .navbar-light , obwohl .navbar-dark gleich bleibt. Diese Klassen setzen jedoch keine background-color s mehr; stattdessen beeinflussen sie im Wesentlichen nur die color .
• .navbar-toggle ist jetzt .navbar-toggler und hat andere Stile und inneres Markup (keine drei <span> s mehr).
• Die Klasse .navbar-form vollständig gelöscht. Es ist nicht mehr notwendig; Verwenden Sie stattdessen einfach .form-inline und wenden Sie nach Bedarf Margin-Dienstprogramme an.
• Navbars enthalten standardmäßig nicht mehr margin-bottom oder border-radius .

Eine Vergleichstabelle von Bootstrap Version 3 und Version 4

Wie wir bereits gesagt haben, hat das Bootstrap-Team das Framework neu geschrieben. Die oben genannten Änderungen sind also nur wichtige Änderungen, die wir hier geschrieben haben. Um ausführlicher zu lesen, folgen Sie bitte dem Link Bootstrap 4.

Sollen wir auf Bootstrap 4 migrieren oder auf Bootstrap 3 bleiben

Wir haben über die Funktionen gesprochen, die Bootstrap 4 bietet. Wir können sehen, dass viel Arbeit in die Optimierung und Bereinigung unnötiger Elemente und Klassen im gesamten Framework investiert wurde. Bootstrap 4 verspricht, viel schneller und optimiert zu sein, um noch mehr Flexibilität und Leichtigkeit bei der Erstellung einer großartigen mobilfreundlichen Website zu bieten.

Bootstrap 4, verschoben auf Flexbox. Dies kann als eine der größten und bedeutendsten Errungenschaften angesehen werden. Dadurch ergeben sich folgende Vorteile:

• Flexbox-basiertes Grid
• Neue XLl-Rasterstufe
• Neuestes Auto-Layout-Raster
• Navbar-Anpassungsoptionen
• Neue Spacing-Dienstprogramme
• Sans Glyphicons-Konfiguration (Bloat-freie Zone)
• Reaktionsschnelle Größenanpassung
• Reaktionsschnelle Schwimmer
• Automatische Ränder
• Vertikale Zentrierung

Fazit

Bootstrap hat das Leben der Entwickler schon immer erleichtert und durch die Aktualisierung der Version hat Bootstrap jetzt viele weitere neue Funktionen und Optionen, um die Dinge für die Entwickler noch einfacher zu machen, und deshalb migrieren die Leute von Bootstrap 3 zu Bootstrap 4, da es bequemer und zugänglicher ist als sein vorheriges Gegenstück.