Webentwicklung: Bootstrap 5.1 führt neues CSS-Grid ein
Neben experimentellem Support für CSS-Grid führt die aktuelle Version des CSS-Frameworks unter anderem neue RGB-Variablen sowie eine Placeholder-Komponente ein.
(Bild: Graphics Illuminate / Shutterstock.com)
- Madeleine Domogalla
Für das CSS-Framework Bootstrap liegt mit Version 5.1 das erste Minor Release für den noch jungen 5er-Zweig vor. Das Update bringt neben experimentellem Support für CSS-Grid auch Offcanvas-Komponenten innerhalb der Navigationsleiste sowie eine neue Placeholder-Komponente und einiges mehr.
CSS-Grid löst Standard-Grid ab
Das Entwicklerteam hinter Bootstrap führt mit dem Update experimentelle Unterstützung für CSS-Grid ein und trennt sich damit vom bisherigen Standard. Entwickler können via $enable-grid-classes: false die Default-Einstellung deaktivieren, um das neue CSS-Grid über $enable-cssgrid: true zu aktivieren. Nähere Informationen finden sich in der Dokumentation.
Bootstrap 5.0 führte neue Offcanvas-Komponenten ein, mit denen Entwicklerinnen und Entwickler unter anderem unsichtbare Seitenleisten für die Navigation eines Projekts oder Warenkörbe in Webseiten einbauen können. In Version 5.1 hat das verantwortliche Entwicklerteam die .navbar-expand-*-Klassen erweitert, um Support für Offcanvas auch innerhalb der Navigationsleiste zu bieten.
Neue Platzhalter-Komponente und CSS-Variablen
In Bezug auf die Komponenten hat sich auch etwas getan: Das neue Feature Placeholders bietet Entwicklern die Möglichkeit, temporäre Blöcke anstelle von echtem Inhalt bereitzustellen, um anzuzeigen, dass etwas auf der Webseite oder in der Anwendung gerade geladen wird. Der Blogbeitrag zeigt den Quellcode für ein Beispiel mit einem leuchtenden Platzhalter bei ladenden Prozessen. Das erste Update stellt sowohl HTML- und CSS-Code für die Implementierung zur Verfügung – Entwickler können individuell benötigten Code ergänzen.
<div class="card" aria-hidden="true">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>Bootstrap 5.1 hat zudem weitere CSS-Variablen (:root) im Gepäck: Neben zusätzlichen Grautönen führt das Update neue <body>- und RGB-Variablen ein. Die Graustufen sollen die bestehenden Farb- und Theme-Color-Variablen ergänzen und den bestehenden Satz der global verfügbaren CSS-Farben vervollständigen.
Weiterführende Informationen zu Bootstrap 5.1 bietet der Beitrag auf dem offiziellen Blog zum CSS-Framework.
(mdo)
