Bootstrap 5 – das ist neu in Bootstrap

In diesem Artikel verrate ich dir was neu ist in Bootstrap 5. Wir werden uns die Neuerungen also genau ansehen.

Ich gehe davon aus das du schon einmal mit Bootstrap gearbeitet hast. Ich werde daher nicht auf die grundlegenden Funktionsweisen eingehen.

Nun legen wir los 🙂

Verzicht auf jQuery

Lange war jQuery ein Teil von Bootstrap. Genauer gesagt bestand eine Abhängigkeit zu der Javascript Bibliothek. Die Zeiten sind mit der neuen Version vorbei. Bootstrap 5 setzt auf natives Javascript. Das bringt einen grossen Vorteil im Ranking.

Entfernung der Klasse .jumbotron

Die Klasse .jumbotron existiert in Bootstrap 5 nicht mehr. Allerdings lässt sie sich leicht ersetzen. Im folgenden ein Beispiel:

Geändertes Grid System

Das Grid System wurde in seiner Kapazität um folgende Angabe erweitert:

  • Extra extra large (xxl)
  • die .gutter Klasse wurde durch die .g* Klasse ersetzt
  • Klassen für vertikale Abstände wurden hinzugefügt
  • Columns (col) haben standardmäßig nicht mehr die Angabe position:relative
  • Die form layout Optionen wurden durch das Grid System ersetzt

Aktualisierte Formulare

In Bootstrap 5 wurde der Abschnitt „Formulare“ aus den Komponenten verschoben und in einem seperaten Abschnitt angezeigt.

  • Checkbox:
  • Switches:

Des weiteren gibt es Änderungen bei den Optionsfeldern. Jedes Kontrollkästchen (Radio, Auswahl, Datei, Bereich usw.) enthält ein benutzerdefiniertes Erscheinungsbild. Dies geschieht um den Stil und das Verhalten von Formularsteuerelementen zu vereinheitlichen. Du findest die Änderungen in der Dokumentation (engl.).

CSS – Benutzerdefinierte Eigenschaften

In der Vorgängerversion von Bootstrap waren benutzerdefinierte Eigenschaften nur begrenzt enthalten. In der 5. Version sind sie nun auch für Layout und Komponenten verfügbar.

Im oberen Beispiel wird die .table-Komponente mit einigen lokalen Variablen geändert, um gestreifte, schwebende und aktive Tabellenstile zu vereinfachen.

Zusammenfassung

  • Neue benutzerdefinierte Eigenschaften
  • Verzicht auf JQuery
  • Ausschluss von Internet Explorer 10 und 11
  • Neue Dienstprogramme

Der Umstieg von Version 4 auf Version 5 ist einfach zu vollziehen.

Viel Spaß bei deiner weiteren Arbeit mit Bootstrap 🙂


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.