Bootstrap 3 oder Bootstrap 4? Welche Version ist die richtige für Sie?

Bootstrap ist die erste Wahl für Front-End-Entwickler. Als bewährtes Open-Source-Front-End-Framework kann man problemlos eine moderne Website mit Funktionen wie Mobile Responsiveness entwickeln. 

Um eine attraktive und funktionale Website zu erstellen, bietet Bootstrap die grundlegende Struktur von HTML und CSS mit vordefinierten Klassen, die bei der Geräte-Responsiveness helfen. 

Im Jahr 2013 wurde Bootstrap 3 veröffentlicht, und im August 2017 folgte die Veröffentlichung von Bootstrap 4. 

Bootstrap 3 vs. Bootstrap 4

1. Installation der Themes

Bootstrap 3 bietet nur eine Option zur Installation von Bootstrap in einem Paket, während Bootstrap 4 vier Optionen bietet. 

Bootstrap 3

nuget

PM> Install-Package bootstrap -Version 3.3.7

Installation von Bootstrap 4 mit dem Package Manager 

Es gibt viele Package Manager, mit denen Bootstrap 4 einfach in Ihr Projekt heruntergeladen werden kann. 

npm 

Installieren Sie Bootstrap in Ihren Node.js-basierten Apps mit dem npm-Paket 

    $ npm install bootstrap

RubyGem

Installieren Sie Bootstrap in Ihren Ruby-Apps mit Bundler (empfohlen) und RubyGems, indem Sie die folgende Zeile zu Ihrer Gemfile hinzufügen

gem 'bootstrap', '~> 4.0.0'

a) Alternativ können Sie das Gem installieren, indem Sie diesen Befehl ausführen, wenn Sie Bundler nicht verwenden:

$ gem install bootstrap -v 4.0.0

Composer

Sie können Bootstrap's Sass und JavaScript auch mit Composer installieren und verwalten

$ composer require twbs/bootstrap:4.0.0

NuGet

Wenn Sie in .NET entwickeln, können Sie Bootstrap's CSS oder Sass und JavaScript auch mit NuGet installieren und verwalten:

PM> Install-Package bootstrap

PM> Install-Package bootstrap.sass
 

2. CSS-Quelldatei-Update von LESS auf SASS

SASS ist leistungsfähiger als LESS. SASS verfügt über Funktionen wie logische Operatoren, Schleifen, Mixing, em, rem, verschachtelte Media Queries, Extend und vieles mehr.
LESS war leicht zu erlernen und ermöglicht einen schnellen Einstieg in SASS. Es scheint also an der Zeit zu sein, sich mit SASS vertraut zu machen.

Sie können auch über die neun Möglichkeiten zum Schreiben des besten SASS-Codes lesen. 

Es gibt viele Optionen zum Kompilieren von SASS zu CSS, daher ist es einfacher zu verwenden. 

3. Schriftgrößen-Update von px auf rem

Die beste Vorgehensweise für Typografie im Web ist die Verwendung der relativen Einheiten rem, em und px. Bootstrap 4 verwendet rem. Es ist flexibler im Vergleich zu px. Mit rem können Sie Elemente vergrößern und verkleinern, ohne an einer festen Größe festzuhalten. Dies erleichtert die Anpassung des Designs während der Entwicklung, wodurch der Inhalt geräteabhängig wird. 

Einige der Funktionen, die zur Unterscheidung zwischen Bootstrap 3 und 4 verwendet werden können

Komponente	Bootstrap 3	Bootstrap 4
CSS-Quelldateien	LESS	SCSS
Primäre CSS-Einheit; Globale Schriftgröße	Px | 14 px	Rem | 16 px
Media Queries Einheit	px	px
Standardschriften	Helvetica Neue, Helvetica, Arial, sans-serif	Verwendet einen "nativen Font Stack" (Systemschriften des Benutzers) mit einem Fallback auf Helvetica Neue, Arial und Sans-serif
Grid Tiers	4-stufiges Grid-System (xs, sm, md, lg)	5-stufiges Grid-System (xs, sm, md, lg, xl)
Offsetting Columns	Verwendet col-*-offset-* Klassen, um Spalten zu versetzen. Zum Beispiel col-md-offset-4	Verwendet offset-*-* Klassen, um Spalten zu versetzen. Zum Beispiel offset-md-4
Dark/inverse Tables	Nicht unterstützt	Dunkle/inverse Tabellen mit der .table-dark Klasse hinzugefügt
Responsive Images	Verwenden Sie die Klasse .img-responsive	Verwenden Sie die Klasse .img-fluid.
Image Alignment	Verwenden Sie die Hilfsklassen .pull-right, .pull-left und .center-block.	Verwendet .m-x-auto anstelle von .center-block, um Block-Level-Bilder auszurichten. Kann die verschiedenen .pull-*-none Klassen verwenden, um das Floating zu deaktivieren. Unterstützt auch Bootstrap 3 Komponenten.

4. Grid System aktualisiert

Bootstrap 3 hat 4 Grid-Klassen (col-xs-3, col-sm-3, col-md-3, col-lg-3), während Version 4 5 Grid-Klassen hat (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). 

Bootstrap 4 hat das xs vom niedrigsten Breakpoint entfernt. Während in Bootstrap 3 der untere Punkt mit xs (.col-xs) funktioniert, wurde er jetzt in Bootstrap 4 entfernt und nur (.col-) für einen niedrigeren Breakpoint verwendet. 

Grid Size	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

5. Barrierefreiheit

Die allgemeine Barrierefreiheit eines mit Bootstrap erstellten Projekts hängt weitgehend von der Auszeichnung, dem zusätzlichen Styling und den Skripten des Autors ab. Wenn diese jedoch korrekt implementiert wurden, sollte es durchaus möglich sein, Websites und Anwendungen mit Bootstrap zu erstellen. 

Die Verantwortung für die Einhaltung einer Website mit WCAG 2.0 und Section 508 liegt direkt auf den Schultern der Frontend-Entwickler. 

Die von Bootstrap bereitgestellten Themes haben immer gängige Webstandards befolgt und den Entwicklern weniger Kopfschmerzen bereitet, um Websites zu erstellen, die für alle zugänglich sind.

Während Bootstrap 3 Skip-Navigation, verschachtelte Überschriften und Farbkontraste bereitstellte, hat Bootstrap 4 die Barrierefreiheit mit seinen Komponenten verbessert. 

Styling und Layout aus Version 4 können auf eine Vielzahl von Markup-Strukturen angewendet werden. Komponenten wie modale Dialoge, Dropdown-Menüs und benutzerdefinierte Tooltips wurden so konzipiert, dass sie für Benutzer von Touch, Maus bis Tastatur funktionieren. Und diese Komponenten sind auch mit assistiven Technologien wie Bildschirmleseprogrammen verständlich und bedienbar.

Autoren können diese Standardfarben jetzt manuell ändern/erweitern, um angemessene Farbkontrastverhältnisse sicherzustellen.

Inhalte, die visuell ausgeblendet werden müssen, aber für assistierende Technologien zugänglich bleiben, können jetzt mit der Klasse .sr-only formatiert werden. 

Bootstrap 4 enthält auch Unterstützung für das Media Feature prefers-reduced-motion. Derzeit ist die Unterstützung jedoch auf Safari unter macOS und iOS beschränkt.

Die Komponenten von Bootstrap sind bewusst so konzipiert, dass potenzielle Barrierefreiheitsprobleme behoben werden können.

Drupal stellt die Web-Accessibility-Standards sicher, lesen Sie wie. 

6. Flexbox-basiertes Grid hinzugefügt

Flexbox ist eine der wichtigsten und entscheidenden Funktionen von Bootstrap 4, die es von Bootstrap 3 unterscheidet. Man kann schnell die Layoutausrichtung verwalten, die Größe von Grid-Spalten ändern, die Komponenten-Navigation und die Bildung komplexer Layouts einfach verwalten.

Bootstrap 3 verwendete Floats, um das Layout zu verarbeiten, im Gegensatz zu Flexbox in Bootstrap 4.

Das Flexible Box Layout erleichtert das Entwerfen flexibler, responsiver Layoutstrukturen, ohne Float oder Positionierung zu verwenden. 

Obwohl es über responsive Funktionen verfügt, ist die Implementierung mit benutzerdefiniertem CSS mit Bootstrap 4 komplex geworden. 

a) Richtung
Sie können die Richtung der Flex-Elemente im Flex-Container mit Richtungs-Utilities festlegen.

Verwenden Sie .flex-row, um eine horizontale Richtung festzulegen, und für eine horizontale Richtung von der gegenüberliegenden Seite verwenden Sie .flex-row-reverse.

Verwenden Sie .flex-column, um eine horizontale Richtung festzulegen, und für eine horizontale Richtung von der gegenüberliegenden Seite verwenden Sie .flex-column-reverse

In Version 3 verpasst, wurde nur in Version 4 hinzugefügt. 

b) Inhalt rechtfertigen
Sie können Ihr Element in jeder Richtung ausrichten, z. B. Start, Ende, Mitte, zwischen oder um mit .justify-content.

c) Elemente ausrichten
Richten Sie Ihren Inhalt in Flexbox-Containern mit .align-items aus. Wählen Sie aus Start, Ende, Mitte, Baseline oder Stretch 

d) Selbst ausrichten
Verwenden Sie .align-self, um Flexbox-Elemente zu verwenden, um ihre Ausrichtung auf der Querachse individuell zu ändern. Optionen als align-items: Start, Ende, Mitte, Baseline oder Stretch.

e) Automatische Ränder
Flexbox bietet Ihnen einige großartige Funktionen, wenn Sie Ausrichtungen mit automatischen Rändern verwenden. Diese drei Optionen für automatische Ränder können als Standard verwendet werden (kein automatischer Rand), wobei zwei Elemente nach rechts (.mr-auto) und zwei Elemente nach links (.ml-auto) verschoben werden.

f) Mit align-items
Verschieben Sie ein Flex-Element vertikal an den oberen oder unteren Rand eines Containers, indem Sie align-items, flex-direction: column und margin-top: auto oder margin-bottom: auto mischen.

g) Wrap
Verwenden Sie  .flex-nowrap  , um Flex-Elemente in einem Flex-Container zu umschließen. mit .flex-nowrap, Wrapping mit .flex-wrap oder Reverse-Wrapping mit .flex-wrap-reverse.

h)  Order
Verwenden Sie die Reihenfolge bestimmter Flex-Elemente mit einer Handvoll .order.

7. Offset-Klasse

Offset-Klassen sind recht einfach zu verwenden, Sie müssen nur eine Aktion ausführen - wie z. B. .offset für die kleinste Rastergröße, die Sie benötigen, und darüber - wie -md und Wert für die hinzugefügte Aktion in Anzahl der Spalten wie -3, zum Beispiel zieht das Ganze Ergebnisse von .offset-md-3 zusammen, wodurch das gewünschte Spaltenelement mit 3 Spalten rechts von seiner Standardposition auf mittleren Bildschirmgrößen und darüber versetzt wird, .offset-Klassen verschieben ihre Absicht immer nach rechts.

8. Bootstrap-Themes

Bootstrap-Themes sind ein ultimatives Paket aus HTML-, CSS- und JavaScript-Codes, die ein fantastisches Styling, UI-Komponenten und Seitenlayouts bieten. 

Darüber hinaus sind es vorgefertigte Website-Vorlagen, die Sie anpassen und auf denen Sie aufbauen können.

Bootstrap 4 bietet bessere und verbesserte Optionen, um Ihre Website einfach und schnell zu erstellen.     Mit Version 4 können Sie viele Themes für Ihre Website, Ihr cPanel, Ihr Dashboard und Ihre Software verwenden.

Während es solche Vorlagen von Bootstrap 3 nicht gab.
 

9. Responsive Tabellen

Die Bootstrap 4-Tabelle ist vollständig responsiv auf ihre Klasse (table-responsive), um horizontales Scrollen der Tabellen auf mobilen Geräten zu ermöglichen. Sie ist mit jeder Bildschirmgröße Desktop, Tab oder Mobilgerät kompatibel. 

Sie können entscheiden, wann die Tabelle eine Bildlaufleiste erhalten soll, abhängig von der Bildschirmbreite:

Class	Screen width
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

10. Verwendung von Popover und Tooltip

Bootstrap 4 Popover ähnelt Tooltips, es ist ein Popup-Feld, das angezeigt wird, wenn der Benutzer auf eine Art von Element klickt. Der Unterschied besteht darin, dass Popover viel mehr Inhalt zum Anzeigen enthalten kann. 

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>

11. Umbenennen von Klassen für Bilder

.img-responsive wurde in .img-fluid geändert 
.img-rounded wurde in .rounded geändert 
.img-circle zu rounded circle - kann für andere Elemente verwendet werden (Box, Icon, Button)

12. Browserunterstützung
Bootstrap 3 unterstützte die IE8- und iOs 6-Version und Bootstrap 4 unterstützt jetzt nur noch IE9+ und iOS 7+ - während die vorherigen Versionen fallen gelassen werden. 

Zusammenfassend

Dies sind nur einige der Funktionen, die zur Unterscheidung zwischen Bootstrap 3 und 4 verwendet werden können. 

Bootstrap 3 war in erster Linie das "Mobile-First"-Framework, das mit der Idee entwickelt wurde, nichts als das Beste zu präsentieren. Mit dem Wandel der Zeit und Technologie hat Bootstrap 4 die Perspektive eingeengt und gleichzeitig die beste Anpassung geboten. 

Lassen Sie uns in den Kommentaren unten wissen, welches Sie besser finden. Oder kontaktieren Sie uns unter [email protected].