Neuerungen in Bootstrap 5

Bootstrap ist eine der beliebtesten CSS-Bibliotheken. Sie ermöglicht Entwicklern die einfache Verwendung ansprechender Stile und Komponenten sowie die Erstellung responsiver Websites. Das Nutzen von Bootstrap kann Entwicklern Zeit sparen, insbesondere bei Komponenten, die in fast jedem Projekt verwendet werden.

Bootstrap 5 (die aktuelle Hauptversion, veröffentlicht im Mai 2021) hat zahlreiche Änderungen und Verbesserungen mit sich gebracht, einschließlich der Hinzufügung neuer Komponenten, neuer Klassen, neuer Stilistik für alte Komponenten, aktualisierter Browserunterstützung, der Entfernung einiger alten Komponenten und vieles mehr.

In diesem Artikel werden wir uns ansehen, was in Bootstrap 5 geändert wurde, was entfernt wurde und, am spannendsten, was neu ist.

Wann Bootstrap verwenden (und wann nicht)

Bootstrap bezeichnet sich selbst als „die weltweit beliebteste Framework für den Bau responsiver, mobil-first Seiten“, und mit 152k Sternen auf GitHub, halte ich diese Behauptung nicht für übertrieben. Vor allem für Anfänger ist Bootstrap eine großartige Möglichkeit, moderne und saubere Websites zu erstellen. Es macht es einfach, komplexe, mobil-first Designs umzusetzen und bietet viele Komponenten, die man wahrscheinlich in mehreren Projekten benötigen wird.

Bootstrap hat ein geringes Lernkurve und eignet sich gut für statische Websites, die keinen Build-Schritt benötigen, da man einfach die Bibliothek von Bootstraps CDN referenzieren kann. Dies steht im Gegensatz zu einigen anderen beliebten CSS-Frameworks, die möglicherweise für die Verwendung mit einem Bundler oder Task Runner optimiert sind.

Sie sollten auch wissen, dass Bootstrap nicht eine Allheilmittel ist. Für die Unerfahrenen macht Bootstrap es leicht, unübersichtlichen und verworrenen Markup zu erzeugen. Es ist auch eine relativ große Bibliothek in Bezug auf Kilobyte (obwohl dies mit jeder neuen Version verbessert wird) und kann daher möglicherweise nicht die beste Wahl sein, wenn Sie nur ein oder zwei seiner Funktionen verwenden. Wie bei jeder Abstraktion hilft es enorm, wenn Sie die zugrunde liegende Technologie gut verstehen und eine fundierte Entscheidung darüber treffen können, wann sie anzuwenden ist.

Upgrading von Bootstrap 4 auf 5

Der Übergang von Bootstrap 4 auf 5 ist grundsätzlich ziemlich einfach. Die meisten Komponenten, ihre Klassen und Utility-Klassen, die in Bootstrap 4 verfügbar waren, sind auch in Bootstrap 5 noch vorhanden. Das Hauptaugenmerk beim Migrieren sollte darauf liegen, ob die von Ihnen verwendeten Klassen oder Komponenten eingestellt wurden. Wenn dies der Fall ist, gibt es Ersatzlösungen oder Möglichkeiten, dieselbe Wirkung mit Utility-Klassen zu erzielen. Das zweite, worauf Sie sich konzentrieren sollten, ist der Wechsel von data-*-Attributen zu data-bs-* in Komponenten, die JavaScript als Teil ihrer Funktionalität benötigen. (Dies werden wir im nächsten Abschnitt genauer behandeln.)

Wenn Sie Bootstraps Sass-Dateien verwenden, wurden einige Variablen und Mixins umbenannt. Bootstrap 5 bietet eine ausführliche und detaillierte Sektion über Anpassung, sowie Informationen über die Sass-Variablen und Mixins für jede Komponente in den jeweiligen Dokumentationsseiten.

Was sich geändert hat

Bootstrap 5 bringt grundlegende Änderungen für Bootstrap als Bibliothek, einschließlich einer Änderung der erforderlichen Abhängigkeiten, Browserunterstützung und mehr. Es bringt auch Änderungen an den Komponenten und Klassen, die wir in früheren Versionen immer verwendet haben.

jQuery keine Abhängigkeit mehr

Eine wesentliche Änderung gegenüber früheren Versionen ist, dass jQuery nicht länger eine Abhängigkeit von Bootstrap ist. Jetzt können Sie Bootstrap in seiner vollen Pracht ohne jQuery verwenden, benötigen aber immer noch Popper.js. Diese Änderung erleichtert die Verwendung von Bootstrap in Projekten, die jQuery nicht benötigen oder verwenden – wie beispielsweise bei der Verwendung von Bootstrap mit React.

Sie können jQuery weiterhin mit Bootstrap verwenden, wenn es Teil Ihrer Website ist. Wenn Bootstrap jQuery im window Objekt erkennt, fügt es alle Komponenten automatisch in die jQuery-Plugin-System ein. Wenn Sie also von v4 auf v5 migrieren, müssen Sie sich nicht um diese Änderung kümmern und können jQuery weiterhin nach Bedarf mit Bootstrap verwenden.

Aber was, wenn Sie jQuery auf Ihrer Website verwenden, aber nicht wollen, dass Bootstrap jQuery verwendet? Sie können das tun, indem Sie das Attribut data-bs-no-jquery dem Body-Element des Dokuments hinzufügen:

<body data-bs-no-jquery="true">
</body>

Wie funktioniert Bootstrap ohne jQuery? Zum Beispiel würden Sie in v4 den folgenden JavaScript-Code verwenden, um ein Toast Element zu erstellen:

$('.toast').toast()

In Bootstrap 5 können Sie dasselbe Code verwenden, um ein Toast-Element zu erstellen, wenn Ihre Website bereits jQuery verwendet. Ohne jQuery müssen Sie Code ähnlich dem folgenden verwenden, um ein Toast-Element zu erstellen:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Dies verwendet nur Vanilla JavaScript, um das Dokument nach Elementen mit einer .toast-Klasse abzufragen, und initialisiert dann ein Toast-Komponente auf dem Element unter Verwendung von new bootstrap.Toast().

Änderung der Browserunterstützung

Bis zur Version 4 unterstützte Bootstrap Internet Explorer (IE) 10 und 11. Ab Bootstrap 5 wird die Unterstützung für IE vollständig aufgegeben. Wenn Sie also IE in Ihrer Website unterstützen müssen, sollten Sie bei der Migration zu v5 vorsichtig sein.

Weitere Änderungen in der Browserunterstützung umfassen:

• Firefox und Chrome-Unterstützung ab Version 60
• Safari und iOS-Unterstützung ab Version 12
• Android Browser und WebView-Unterstützung ab Version 6

Änderung von Datenattributen

Bootstrap 5 hat die Benennung der Datenattribute geändert, die im Allgemeinen von seinen Komponenten verwendet werden, die JavaScript als Teil ihrer Funktionalität nutzen. Früher würden die meisten Komponenten, die auf einigen JavaScript-Funktionalitäten angewiesen waren, Datenattribute mit data- beginnen. Zum Beispiel, um eine Tooltip-Komponente in Bootstrap 4 zu erstellen:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Beachten Sie die Verwendung von data-toggle und data-placement. In Bootstrap 5 beginnen die Datenattribute für diese Komponenten jetzt mit data-bs, um Bootstrap-Attribute leicht zu benennen. Zum Beispiel, um eine Tooltip-Komponente in Bootstrap 5 zu erstellen:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Anstelle von data-toggle und data-placement verwenden wir data-bs-toggle und data-bs-placement. Wenn Sie mit JavaScript Komponenten in Bootstrap erstellen, besteht wahrscheinlich keine Notwendigkeit, Änderungen vorzunehmen. Wenn jedoch Ihre Komponenten jedoch nur auf Datenattributen beruhen, müssen Sie alle Datenattribute, die mit data beginnen, in solche mit data-bs ändern.

Behebung von Bugs

In der Bootstrap 4 Dokumentation unter Browser und Geräte gibt es eine Liste von Fehlern, die in einigen Browsern auftreten. Diese Fehler sind in derselben Liste für Bootstrap 5 nicht mehr aufgeführt. Die Liste umfasst Folgendes:

• Hover-Stil wurde auf Elemente bei Touch-Ereignissen auf iOS angewendet, was nicht erwünscht war, da es als unerwartetes Verhalten betrachtet wurde.
• Verwendung von .container in Safari 8 und höher führte zu einer kleinen Schriftgröße beim Drucken.
• Die Rahmenradius wurde von Validierungsfeedback überschrieben (konnte jedoch durch Hinzufügen einer zusätzlichen .has-validation Klasse behoben werden).

Die Liste der Fehler und Probleme in der Bootstrap 4 Dokumentation beschreibt auch Fehler, die in Browserversionen aufgetreten sind, die nicht mehr unterstützt werden.

Andere Änderungen

Es gibt noch viele weitere Änderungen, die entweder klein sind oder keine drastischen, wahrnehmbaren Änderungen verursachen. Diese Änderungen sind:

• Bootstrap 5 nutzt nun Popper v2. Stellen Sie sicher, dass Sie Ihre Popper-Version aktualisieren. Popper v1 wird nicht mehr funktionieren, da Bootstrap 5 @popperjs/core anstelle des vorherigen popper.js benötigt.

• Bootstrap 5 kann nun als Modul im Browser verwendet werden, indem eine Version von Bootstrap verwendet wird, die als ECMAScript-Modul erstellt wurde.

• Da Libsass und Node Sass (die in Bootstrap 4 verwendet wurden) mittlerweile veraltet sind, verwendet Bootstrap 5 Dart Sass zur Kompilierung der Quell-Sass-Dateien in CSS.

• Es gab eine Änderung bei einigen Sass-Variablenwerten, wie z.B. $zindex-modal, der von 1050 auf 1060 geändert wurde, $zindex-popover von 1060 auf 1070 und weitere. Aus diesem Grund wird empfohlen, die Sass-Variablen jedes Komponenten oder der Klassen von Bootstrap 5 in der Dokumentation zu überprüfen.

• Früher wurde die Klasse .sr-only verwendet, um ein Element unsichtbar zu machen, es aber für assistive Technologien erkennbar zu halten. Diese Klasse wurde nun durch .visually-hidden ersetzt.

• Früher musste man, um ein interaktives Element unsichtbar zu machen, es aber für barrierefreie Technologien erkennbar zu halten, sowohl die Klassen .sr-only als auch .sr-only-focusable verwenden. In Bootstrap 5 genügt es, die Klasse .visually-hidden-focusable ohne .visually-hidden zu verwenden.

• Zitate mit einem benannten Urheber werden jetzt von einem <figure> -Element umschlossen.

  Hier ist ein Beispiel dafür, wie Zitate in Bootstrap 5 aussehen:

• In früheren Versionen wurden Tabellenstile vererbt. Das bedeutet, dass eine in einer anderen Tabelle geschachtelte Tabelle den Stil der übergeordneten Tabelle erbt. In Bootstrap 5 sind die Tabellenstile unabhängig voneinander, selbst wenn sie geschachtelt sind.

• Rand-Utilities unterstützen jetzt Tabellen. Das bedeutet, dass Sie nun die Rahmenfarbe einer Tabelle mithilfe der Rahmenfarbe-Utilities ändern können.

  Hier ist ein Beispiel für die Verwendung von Rand-Utilities mit Tabellen in Bootstrap 5:

• Die Standardgestaltung von Breadcrumbs wurde geändert und entfernt die Standardgraue Hintergrundfarbe, den Abstand und den Rahmenradius, die in früheren Versionen enthalten waren.

  Hier ist ein Beispiel für den Stil von Breadcrumbs in Bootstrap 5:

• Die Benennung von Klassen, die left und right zur Bezugnahme auf die Position verwendeten, wurde geändert und verwendet nun start und end. Zum Beispiel wurden .dropleft und .dropright in Dropdowns durch .dropstart und .dropend ersetzt.

• Ähnlich wie im vorherigen Punkt verwenden Utility-Klassen, die l für left und r für right nutzten, nun s für start und e für end jeweils. Zum Beispiel ist .mr-* nun .me-*.

• Die Klasse .form-control-range, die für Range-Inputs verwendet wurde, ist nun .form-range.

• Gutters werden nun in rems statt wie zuvor in px gesetzt.

• .no-gutters wurde im Zuge der Hinzufügung neuer Gutter-Klassen (dazu mehr in späteren Abschnitten) in .g-0 umbenannt.

• Links sind jetzt standardmäßig unterstrichen, auch wenn sie nicht hovert sind.

• Benutzerdefinierte Formular-Element-Klassennamen wurden von .custom-* in die Klassen der Formularkomponenten integriert. Zum Beispiel wurde .custom-check durch .form-check ersetzt, .custom-select durch .form-select und so weiter.

• Das Hinzufügen von .form-label zu Labels ist nun erforderlich.

• Alerts, Breadcrumbs, Cards, Dropdowns, List Groups, Modals, Popovers und Tooltips verwenden nun dieselben Randwerte unter Verwendung der $spacer Variablen.

• Die Standardrandwerte in Plakat-Elementen wurden von .25em/.5em auf .35em/.65em geändert.

• Um Toggler-Schaltflächen mit Kontrollkästchen und Optionsfeldern zu verwenden, wurde die Markup-Struktur vereinfacht. In Bootstrap 4 wurde ein Toggler-Kontrollkästchen mit folgendem Markup erreicht:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Aktiviert
    </label>
  </div>
  

  In Bootstrap 5 kann dies auf eine einfachere Weise erfolgen:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Aktiviert</label>
  

• Die active– und hover-Zustände von Tasten haben nun eine höhere Farbkontrast.

• Die Carousel-Pfeile verwenden nun SVGs aus Bootstrap Icons.

• Die Klasse für die Schließen-Taste wurde von .close in .btn-close umbenannt und verwendet anstelle von × ein SVG-Symbol.

• Dropdown-Trennlinien sind nun dunkler für besseren Kontrast.

• Navbar Inhalt sollte nun innerhalb eines Container-Elements eingeschlossen werden. Zum Beispiel in Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </nav>
  

  Wird in Bootstrap 5 zu:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      ...
    </div>
  </nav>
  

• Die .arrow-Klasse in Popover-Komponenten wurde durch .popover-arrow ersetzt, und die .arrow-Klasse in Tooltip-Komponenten wurde durch .tooltip-arrow ersetzt.

• Die Popover-Option whiteList wurde in allowList umbenannt.

• Die Standarddauer für Toast wurde auf 5 Sekunden geändert.

• Der Standardwert für fallbackPlacements in den Komponenten Tooltip, Dropdown und Popover wurde auf das Array ['top', 'right', 'bottom', 'left'] geändert.

• .text-monospace wurde in .font-monospace umbenannt.

• .font-weight-* wurde in .fw-* und .font-style-* in .fst-* umbenannt.

• .rounded-sm und .rounded-lg wurden nun durch eine Reihe von abgerundeten Klassen .rounded-* von 0 bis 3 ersetzt.

Was entfernt wurde

Änderungen können mit Kosten verbunden sein. Mit der Veröffentlichung einer neuen Version, die Änderungen und Verbesserungen bringt, werden auch einige der alten Funktionen, die zuvor unterstützt wurden, entfernt. Mit dieser neuen Version wurden einige Komponenten, Hilfsklassen oder andere Funktionen von Bootstrap entfernt.

Die meisten aus Bootstrap 5 entfernten Elemente wurden entfernt, weil sie durch die Verwendung von Utility-Klassen erreicht werden können, anstatt sie als eigenständige Komponenten zu erstellen. Auch einige entfernte Elemente erwiesen sich als ungenutzt oder überflüssig.

Hier ist eine Liste der aus Bootstrap 5 entfernten Elemente:

• Wie im vorherigen Abschnitt erwähnt, wurde die Unterstützung für IE vollständig eingestellt.

• Klassen für die Farbe von Abzeichen (zum Beispiel .badge-primary) wurden zugunsten der Verwendung der Farb-Utility-Klassen (zum Beispiel .bg-primary) entfernt.

• Die .badge-pill Abzeichenklasse, die einem Abzeichen den Pill-Stil verlieh, wurde zugunsten der Verwendung von .rounded-pill entfernt, was das gleiche Ergebnis erzielt.

• Die Klasse .btn-block für Schaltflächen wurde entfernt, da das gleiche Ergebnis mit Display-Hilfsklassen wie .d-block erreicht werden kann.

• Das zuvor verfügbare Mauerwerk-Layout .card-columns für Karten wurde eingestellt, da es viele Nebenwirkungen hatte.

• Die flip-Option für Dropdown-Komponenten wurde entfernt, da man sich lieber auf die Konfigurationen von Popper verlässt.

• Die Jumbotron-Komponente wurde eingestellt, da das gleiche Ergebnis mit Hilfsklassen erreicht werden kann.

• Einige der Bestellungsklassen für die Reihenfolge (.order-*) wurden entfernt, da sie zuvor von 1 bis 12 reichten. Jetzt reichen sie von 1 bis 5.

• Der Medienteil wurde entfernt, da das gleiche Ergebnis mit Hilfe von Hilfsklassen erreicht werden kann.

• Die Klassen .thead-light und .thead-dark wurden entfernt, da die Variantenklassen .table-* auf alle Tabellenelemente angewendet werden können.

• Die Klasse .pre-scrollable wurde entfernt, da sie nicht oft genutzt wird.

• Die Klasse .text-justify wurde aufgrund von Responsivitätsproblemen entfernt, ebenso wie die Klasse .text-hide, da ihr Verfahren veraltet ist und nicht mehr verwendet werden sollte. Und die .text-* Klassen fügen keine Hover- oder Fokuszustände mehr zu Links hinzu. Diese .text-* Klassen sollten durch .link-* Klassen ersetzt werden.

• Eingabegruppen, die mehrere Eingaben oder Komponenten enthalten, müssen nicht mehr die Klassen .input-group-append und .input-group-prepend verwenden. Elemente, die zur Gruppe gehören sollen, können einfach alle direkt als Kinder der Klasse .input-group hinzugefügt werden.

  Hier ist ein Beispiel für die Verwendung von Eingabegruppen mit mehreren Eingaben:

• .form-group, .form-row, und .form-inline wurden alle zugunsten von Layout-Klassen fallen gelassen.

• .form-text hat keine feste display-Eigenschaft mehr. Die Anzeige des Elements hängt davon ab, ob das Element selbst ein Block- oder Inline-Element ist.

• Validierungsicons wurden für <select>-Elemente mit multiple entfernt.

• Die .card-deck-Klasse wurde zugunsten von Grid-Klassen entfernt.

• Negative Abstände wurden standardmäßig deaktiviert.

• .embed-responsive-item-Elemente wurden nun zugunsten der Anwendung der Stilung auf alle Kinder von Verhältnissen entfernt, die zuvor Responsive Einbettungen waren (dazu mehr im nächsten Abschnitt).

Was ist neu

Schließlich bringt Bootstrap in Version 5 viele aufregende Neuerungen in seine Bibliothek ein. Einige dieser Änderungen umfassen neue Funktionen, neue unterstützte Konzepte, neue Komponenten, neue Utility-Klassen und mehr.

Responsive Schriftgrößen sind jetzt standardmäßig aktiviert

Responsive Schriftgrößen (RFS) waren in früheren Versionen von Bootstrap enthalten, wurden aber standardmäßig deaktiviert. In Bootstrap 5 wird RFS standardmäßig aktiviert, wodurch die Schriftarten in Bootstrap reaktionsfähiger werden. RFS ist ein Nebenprojekt, das von Bootstrap erstellt wurde, um anfänglich Schriftgrößen reaktionsfähig zu skalieren und zu vergrößern. Nun ist es in der Lage, dasselbe für Eigenschaften wie Abstand, Rand, Box-Schatten und mehr zu tun.

Grundsätzlich berechnet es die passendsten Werte basierend auf den Browser-Abmessungen, und diese Berechnungen werden bei der Kompilierung in calc Funktionen übersetzt. Die Verwendung von RFS ersetzt auch die vorherige Verwendung von px durch rem, da dies dazu beiträgt, eine bessere Reaktionsfähigkeit zu erzielen.

Wenn Sie die Sass-Dateien für Bootstrap verwenden, können Sie nun RFS-Mixins verwenden, einschließlich font-size, margin, padding und mehr, die Ihnen ermöglichen, sicherzustellen, dass Ihre Komponenten und Stile reaktionsfähig sind.

Rechts-nach-links-Unterstützung

Bootstrap 5 fügt mithilfe von RTLCSS Unterstützung für Rechts-nach-Links (RTL) hinzu. Da Bootstrap weltweit eingesetzt wird, ist es ein großer und wichtiger Schritt, RTL-Unterstützung standardmäßig verfügbar zu machen. Aus diesem Grund hat Bootstrap 5 spezifische Richtungsbezeichnungen (zum Beispiel die Verwendung von left und right) zugunsten von start und end aufgegeben. Dies macht Bootstrap flexibel genug, um sowohl mit von links nach rechts (LTR) als auch mit RTL-Websites zu arbeiten. Zum Beispiel ist .dropleft jetzt .dropstart, .ml-* ist jetzt .ms-* und mehr.

Um Bootstrap dazu zu bringen, RTL-Stilrichtungen auf Ihrer Website zu erkennen und anzuwenden, müssen Sie die dir von <html> auf rtl setzen und ein lang-Attribut mit der RTL-Sprache der Website hinzufügen. Zum Beispiel lang="ar".

Abschließend müssen Sie die RTL-CSS-Datei von Bootstrap einbinden:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Und damit wird Ihre Website RTL-fähig.

Neues Breakpoint

Bootstrap 5 führt das neue Breakpoint xxl ein, das Geräte mit einer Breite von mehr als oder gleich 1400px adressiert. Zuvor war das höchste Breakpoint xl, das Geräte mit einer Breite von mehr als oder gleich 1200px adressierte. Diese Änderung ermöglicht eine bessere Responsivität für Geräte mit größeren Bildschirmen, da das xl-Breakpoint nicht ausreichte.

Die Verwendung des neuen Breakpoints ist ähnlich wie bei allen anderen Breakpoints. Zum Beispiel können Sie für Geräte mit einer Breite von größer oder gleich 1400px einen Abstand mithilfe der Klasse .p-xxl-2 anwenden.

Verbesserte Dokumentation

Obwohl dies nicht Teil der Bibliothek selbst ist, ist es gut zu bemerken, dass die Dokumentation von Bootstrap verbessert wurde. Die Dokumentation in Bootstrap 5 ist besser strukturiert, da Komponenten, die ausführlichere Details enthalten, jetzt ihre eigenen Abschnitte haben. Zum Beispiel war die Formularkomponente in Bootstrap 4 nur eine Seite mit allen Komponenten, die darin zusammengepackt waren. In Bootstrap 5 ist die Dokumentation der Formularkomponente ein eigenständiger Abschnitt mit Unterabschnitten für verschiedene Unterkomponenten wie Form Control, Select, Input Groups und mehr.

Darüber hinaus ist die Navigation in der Dokumentation jetzt durch die Seitenleiste einfacher, insbesondere für kleinere Bildschirme. In Bootstrap 4 war die Inhaltsverzeichnis-Seitenleiste auf kleineren Geräten nicht sichtbar, was es schwieriger machte, den gewünschten Abschnitt auf der Seite zu finden. In Bootstrap 5 ist das Inhaltsverzeichnis bei allen Bildschirmgrößen immer sichtbar.

Darüber hinaus finden Sie in Bootstrap 5 alle Sass-Variablen, -Mischungen und -Funktionen für jede Komponente auf ihrer Seite. Früher gab es nur eine Theming-Seite, auf der einige Details darüber enthalten waren, wie man die Themavariablen in Bootstrap ändert. Jetzt gibt es einen Anpassungsabschnitt für sich, der ausführlichere Informationen darüber enthält, wie man das Bootstrap-Theme anpasst.

Neue Komponenten

Bootstrap 5 führt einige neue Komponenten in die Bibliothek ein. Einige dieser Komponenten waren zuvor Teil anderer Komponenten und sind nun eigenständige Komponenten.

Akkordeon

Früher war das Akkordeon Teil der Zusammenklappbaren Komponente, anstatt eine eigene Komponente zu sein. In Bootstrap 5 ist Akkordeon eine neue Komponente. Mit dem Akkordeon kommt eine neue Klasse, .accordion, die eine Liste von Akkordeon-Elementen enthält. Darüber hinaus haben Akkordeons im Vergleich zum vorherigen Stil in Bootstrap 4 einen neuen Stil. Hier ist ein Beispiel für die Akkordeon-Komponente:

Bootstrap 5 fügt auch einige Klassen hinzu, um das Styling des Akkordeons zu ändern. Zum Beispiel entfernt .accordion-flush einige der Standardstile des Akkordeons wie Hintergrund- oder Rahmenfarben. Sie können auch ein Akkordeon-Element dazu bringen, immer geöffnet zu sein, indem Sie das data-bs-parent Attribut aus seinem .accordion-collapse Element entfernen.

Offcanvas

Eine weitere neue Komponente ist Offcanvas, mit der Sie einen überlagernden Seitenleisten-Sidebar erstellen können. Es ist der Sidebar, der normalerweise auf Websites verwendet wird, um das Menü auf kleineren Geräten anzuzeigen. Sie können es auf jeder Seite platzieren, indem Sie .offcanvas-start für links in LTR, .offcanvas-top für oben, .offcanvas-end für rechts in LTR und .offcanvas-bottom für unten verwenden. Sie können auch angeben, ob das Offcanvas einen Hintergrund haben soll oder nicht. Hier ist ein Beispiel für die Verwendung der Offcanvas-Komponente:

Floating Label

Floating Label ist ein neuer Bestandteil der Form-Komponenten. Es ermöglicht die Erstellung eines Eingabefelds, bei dem die Beschriftung zunächst wie ein Platzhalter aussieht und sich bei Fokussierung des Eingabefelds oben über dem Wert positioniert. Es funktioniert auch mit <select>-Elementen und <textarea>-Elementen. Hier ist ein Beispiel für die Verwendung von Floating Labels:

Weitere Zusätze

Neben den neuen Komponenten gibt es neue Klassen für vorhandene Komponenten, neue Hilfsklassen, neue Hilfsklassen und mehr. Hier ist eine Liste aller weiteren neuen Zusätze in Bootstrap 5:

• Die Klasse .row-cols-auto wurde hinzugefügt, die es den Spalten ermöglicht, ihre natürliche Breite anzunehmen.

• A new utility class has been added to justify content called .justify-content-evenly.

• Früher wurden Abstände zwischen Spalten mithilfe von Abstands-Utilities erreicht. Jetzt können Sie den Abstand zwischen den Spalten mithilfe der neuen Gutter Layout-Utility einstellen. Um einen horizontalen Abstand festzulegen, verwenden Sie .gx-*. Um einen vertikalen Abstand festzulegen, verwenden Sie .gy-*. Um Abstände sowohl horizontal als auch vertikal festzulegen, verwenden Sie .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

• Vertikale Ausrichtungs-Utility-Klassen können jetzt mit Tabellen verwendet werden.

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Es besteht nun die Möglichkeit, den Trennzeichen in Breadcrumb mit der CSS-Variablen --bs-breadcrumb-divider zu ändern.

  Hier ist ein Beispiel, wie man das Trennzeichen in >> ändert:

• Es gibt eine neue dunkle Variante für Karussells mit der Klasse .carousel-dark und eine neue dunkle Variante für Dropdowns mit .dropdown-menu-dark.

• Es gibt eine neue automatische Schließoption in Dropdown, die das Standardverhalten ändern kann, wann das Dropdown-Menü geschlossen wird. Standardmäßig schließen sich Dropdown-Menüs, wenn außerhalb des Dropdowns oder eines der Dropdown-Elemente geklickt wird. Sie können das ändern, indem Sie das data-bs-auto-close Datenattribut auf inside setzen, was bewirkt, dass das Dropdown schließt, wenn auf eines der Dropdown-Elemente geklickt wird, aber nicht, wenn außerhalb geklickt wird. Sie können es auch auf outside setzen, was bewirkt, dass das Dropdown nur schließt, wenn außerhalb des Dropdowns geklickt wird. Schließlich können Sie es auf false setzen, um es nur zu schließen, wenn der Dropdown-Button erneut geklickt wird. Wenn Sie das Dropdown mit JavaScript initialisieren, können Sie die autoClose Option anstelle des Datenattributs verwenden. Hier ist ein Beispiel für ihre Verwendung:

• Es gibt nun verbesserte Stilanpassungen für Dateieingaben in Formularen.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• Neue Farbnuancen und Schattierungen wurden in Sass-Variablen hinzugefügt.

• Es gibt zwei neue Anzeigegrößen für Überschriften .display-5 und .display-6.

• Es gibt eine neue weiße Variante für Schließen-Buttons .btn-close-white.

• Dropdowns können nun .dropdown-items enthalten, die in <li>-Elementen eingewickelt sind.

• Elemente in Listengruppen können nun mit der neuen Klasse .list-group-numbered nummeriert werden.

• Es gibt transition-Eigenschaften für Links im Pagination-Komponent, was ihre Optik verbessert.

• Es gibt eine neue .bg-body-Klasse, die die Hintergrundfarbe des Körpers auf Weiß setzt.

• Es gibt neue Position-Utility-Klassen, um die top, left, right oder bottom-Eigenschaften eines Elements festzulegen. Zum Beispiel .top-0.

• Es wurden neue Klassen .translate-middle-x und .translate-middle-y hinzugefügt, um absolute Elemente leicht horizontal und vertikal entsprechend zentrieren zu können.

• Es wurden neue Rahmenbreiten-Utility-Klassen .border-* von 1 bis 5 eingeführt.

• Es gibt eine neue Display-Utility .d-grid und eine neue Abstands-Utility .gap.

• Es wurden neue Zeilenhöhen-Utilities .lh-1, .lh-sm, .lh-base und .lh-lg eingeführt.

• Es gibt neue Verhältnis-Hilfsprogramme, die die vorherigen responsiven Einbettungshilfsprogramme ersetzen. Die Klassennamen wurden umbenannt, indem embed-responsive durch ratio und by durch x ersetzt wurde. Zum Beispiel wurde .embed-responsive-16by9 zu .ratio-16x9 umbenannt.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Es gibt .fs-* Utilitys für Schriftgrößen, da RFS jetzt standardmäßig aktiviert ist.

Zusammenfassung

Bootstrap war in den meisten Teilen des vergangenen Jahrzehnts eine der führenden CSS-Bibliotheken. Es ermöglicht Entwicklern, responsive Websites einfach zu erstellen und eine gute Benutzererfahrung zu bieten. Mit den Zusätzen und Änderungen von Bootstrap 5 wird dieser Prozess noch einfacher und ermöglicht die Verbesserung der Designs von Websites und die Bereitstellung einer guten Benutzererfahrung. Wenn Sie Bootstrap 4 verwenden und überlegen, zu Bootstrap 5 zu migrieren, ist die Migration einfach und Sie müssen wahrscheinlich nicht viele Änderungen vornehmen.

Häufig gestellte Fragen (FAQs) zu Bootstrap 5