Bootstrap v5.3.0 Was ist neu in der neuesten stabilen Version?

Duygu Bayrakçı Front-end Developer

Front-end Entwicklung

5 minuten lesen

Hallo Webentwickler!

Die neueste stabile Version von Bootstrap, Bootstrap 5.3.0, bringt viele aufregende Neuerungen und Funktionen mit sich!

Dieses Update stärkt Ihre Projekte, indem es den Webentwicklern mehr Flexibilität und Anpassungsmöglichkeiten bietet. Hier sind die wichtigsten Neuerungen von Bootstrap 5.3.0:

Dark Mode Unterstützung: Mit Bootstrap 5.3.0 wird die Unterstützung für den Dark Mode (Nachtmodus) eingeführt. Dadurch können Benutzer Ihre Website in einer dunklen Benutzeroberfläche bequemer nutzen. Es bietet auch Flexibilität beim Anpassen dieses Modus mit Farbmodi.

<!doctype html> <html lang="de" data-bs-theme="dark">  </html>

Der neue Dark Mode von Bootstrap ist optional und erfordert das Hinzufügen des Attributs data-bs-theme zum Wurzelelement, um das gesamte Seitenlayout zu ändern.

Wenn ein isolierter Dark Mode erforderlich ist, können Sie den Farbmodus auch für ein übergeordnetes Element wie .dropdown festlegen. Dadurch wird nur das Dropdown-Menü und seine untergeordneten Elemente beeinflusst, nicht jedoch die gesamte Seite.

<div class="dropdown" data-bs-theme="light">  </div>

<div class="dropdown" data-bs-theme="dark">  </div>

Unterstützung für benutzerdefinierte Farbmodi: Bootstrap ist nicht mehr auf die Themen "light" und "dark" beschränkt. Sie können jetzt Ihre eigenen benutzerdefinierten Farbthemen erstellen, um Ihre Webprojekte vollständig anzupassen.

<div class="dropdown" data-bs-theme="light">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

Erweiterte Farbpalette: Es wurde eine neue Farbpalette hinzugefügt, die zu den Themenfarben passt. Dies macht Ihre Website ansprechender und benutzerfreundlicher.

Neue Link-Helfer und Dienste: Bootstrap 5.3.0 enthält neue Dienste und Link-Stile, die das Hinzufügen von Symbolen zu Links erleichtern. Außerdem stehen neue Helfer zur Verfügung, um benutzerdefinierte Fokusringe hinzuzufügen.

Neue Navbar-Unterstrich-Option: Sie können jetzt eine Unterstreichung für das aktive Menü in der Navbar hinzufügen, was die Navigation verständlicher macht.

Mehr Helfer und Dienste: Bootstrap 5.3.0 fügt eine Reihe neuer Helfer und Dienstklassen hinzu. Es wurden auch Fehlerbehebungen vorgenommen.

Color Mode Mixin: Dark Mode-Stile werden mit dem neuen color-mode() Sass-Mixin geschrieben und erstellt. Dieses Mixin ermöglicht das Schreiben von Stilen für einen bestimmten Farbmodus.

@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}

$color-mode-type: media-query;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}

Zusätzlich können Sie mit der neuen Sass-Variable $color-mode-type das Verhalten der Farbmodi in Bootstrap ändern. Der Standardwert ist "data" und sagt Bootstrap, dass es Stile für den Farbmodus generieren soll, der von den oben gezeigten Datenattributen abgedeckt wird. Der andere unterstützte Wert ist "media-query" und generiert stattdessen Medienabfrageoptionen. Dies ist nützlich für diejenigen, die automatisch Licht- und Dunkelmodi möchten, ohne Benutzerinteraktion.

Farbmodus-Variablen: Die Farben des Dark Modes leiten sich von den Themenfarben ab, was es Ihnen ermöglicht, die Farbpaletten der Farbmodi leicht anzupassen.

Dank diesem Update können Sie mit Bootstrap 5.3.0 Ihre Webprojekte schöner und funktionaler gestalten. Funktionen wie Dark Mode und benutzerdefinierte Farbthemen können die Benutzererfahrung erheblich verbessern. Weitere Details zu diesem Update finden Sie auf der offiziellen Bootstrap-Website.