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.

Lesezeit: 2 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 8 Beiträge

(Bild: Graphics Illuminate / Shutterstock.com)

Von
  • 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.

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.

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)