Webentwicklung: Bootstrap 5 läuft mit neuem Logo in stabilen Release-Hafen ein
Das CSS-Framework unterstützt unter anderem unsichtbare Seitenleisten, ein- und ausklappbare Akkordeon-Komponenten und linksläufige Schrift im Web.
- Silke Hahn
Rund ein Jahr nach der ersten Alpha und insgesamt drei Betaversionen ist Bootstrap in der fünften Hauptversion erschienen. Die offensichtlichsten Änderungen sind ein neues Logo und das überarbeitete Design, aber auch neue Formulare mit geänderten Eingabe- und Layoutmöglichkeiten sind hinzugekommen. Bekannte Werkzeuge rund um die API hat das Bootstrap-Team generalüberholt. Wie bereits seit den Alphaversionen bekannt ist, entfällt mit jQuery die größte clientseitige Abhängigkeit, und die neue Version stellt die Unterstützung für den Internet Explorer ein.
Das CSS-Framework wartet mit einer neuen Dokumentation auf, deren inhaltlichen Abschnitte neu angeordnet sind, und es führt neue Offcanvas-Komponenten ein, mit denen Webentwicklerinnen und -entwickler zum Beispiel unsichtbare Seitenleisten für die Navigation eines Projekts oder Warenkörbe in Webseiten einbauen können. Die zunächst verborgenen Elemente lassen sich links, rechts oder unterhalb eines Ansichtsfensters anbringen und mit JavaScript sichtbar machen. Konfigurierbar sind sie mittels data-Attributen oder auch über die JavaScript-APIs.
(Bild: Bootstrap)
Linksläufige Schrift auf Webseiten darstellen
Neu ist der RTL-Support (right-to-left text), mit dem sich linksläufige Schrift über das gesamte Layout, die Komponenten und Bordwerkzeuge einrichten lässt. Bei RTL handelt es sich ausdrücklich noch um ein Feature im experimentellen Stadium. Der Blogeintrag zur Ankündigung führt eine Menge Ressourcen zum Thema auf, so bietet das Team ein Cheatsheet, eine ausführliche RTL-Dokumentation und eine Reihe von Praxisbeispielen. Für den Einstieg bieten die Bootstrap-Entwickler folgende Vorlage an:
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
<title>مرحبا بالعالم!</title>
</head>
<body>
<h1>مرحبا بالعالم!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script>
-->
</body>
</html>
Webkomponenten mit Ziehharmonika-Effekt
Die vorige fehleranfällige .card-Komponente hat das Bootstrap-Team durch eine neue .accordion-Komponente ersetzt: Das Feature greift auf das gewohnte Plug-in zum Auf- und Zuklappen von JavaScript zu (Collapse JavaScript) und unterstützt HTML sowie CSS. Damit lassen sich Inhalte auf Webseiten in auf- und zuklappbaren Kästen unterbringen und zum Beispiel so konfigurieren, dass beim Aufklappen eines neuen Gegenstands der zuvor geöffnete automatisch zuklappt ("kollabiert"). Die Bootstrap-Dokumentation führt interaktive Beispiele mit dem dazugehörigen Code auf.
(Bild: Bootstrap)
Aus den zahlreichen weiteren Neuerungen könnten die schwebenden Labels (Floating Labels) nützlich sein, und wer öfter Formulare erstellt, dürfte sich über die konsolidierten Kontrollkästchen und Labels freuen. Im Bereich der Bordwerkzeuge (Utilities) hat sich ebenfalls einiges getan, so hat das Entwicklungsteam Bootstrap eine neue Utility API verpasst, über die sich die Utility-Klassen erweitern lassen. Das benutzerdefinierte Anpassen soll damit leichter fallen als bisher, Druckversionen von Seiten können auf diesem Weg offenbar erzeugt werden und Zustands-basierte Klassen wie :hover unterstützt die neue API auch:
$utilities: () !default;
$utilities: map-merge(
(
// ...
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
// ...
"opacity": (
property: o,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
// ...
), $utilities);Weitere Informationen zu der neuen Schnittstelle lassen sich dem Dokumentationsbereich entnehmen. Eine Menge neuer Werkzeuge ist ebenfalls neu an Bord, so zum Beispiel Optionen zum Positionieren, zum Justieren der Schriftgröße und zum Feinjustieren weiterer Eigenschaften von Elementen einer Website. Hierzu enthält die Utilities-Dokumentation weitere Details.
Benutzerdefiniertes Anpassen und weiterführende Ressourcen
Eine Reihe weiterer Änderungen betrifft das benutzerdefinierte Anpassen von CSS und die dazugehörigen Arbeitsbereiche, so enthält die Theming-Seite mehr Code-Bausteine als vorher und das Bootstrap-Team stellt ein npm-Projekt für Einsteiger bereit, um sich mit den Templates vertraut zu machen. Das Projekt steht auf GitHub im Bootstrap-Repository frei zur Verfügung. Außerdem ist Version 5 nach dem Ausscheiden von LibSass, das nun als veraltet (deprecated) gilt, stattdessen zu Dart Sass gewechselt.
Interessierte können das Release auf der Website des Bootstrap-Projekts beziehen und beispielsweise mit folgendem Befehl installieren:
$ npm i bootstrapWeitere Handreichungen und Informationen bietet der Migrationsleitfaden zu Bootstrap 5.
(sih)