Bootstrap 5 - display

 

In diesem Artikel betrachte wir die display Klasse(n) von Bootstrap 5.
Diese Klasse hilft bei der Umsetzung eines Responsive Webdesign's. Letztendlich ist damit gemeint, das Sie einen Code schreiben, der auf verschiedenen Bildschirmgrössen benutzerfreundliche Ergebnisse generiert. Es ist noch gar nicht so lange her, da musste man für unterschiedliche Bildschirmgrössen, auch komplett unterschiedliche Websiten erstellen. In der Gegenwart können Sie das mit einer Codebasis erreichen.

Block Element - Inline Element

Bevor wir uns display im Detail anschauen, sollten Sie den Unterschied zwischen Block Elementen und Inline Elementen kennen.

Ein Block Element beginnt immer auf einer neuen Linie. Es nutzt die maximal verfügbare Breite und besitzt oben und unten einen margin Wert. Inline Elemente besitzen diesen nicht.

Ein Inline Element startet nicht auf einer neuen Linie und nimmt nur soviel Platz in Anspruch, wie es benötigt.

Jedes Html Element gehört einer dieser zwei Kategorien an. Welcher Kategorie ein Html Element angehört, wird im englischen als Display Value bezeichnet.

Block Elemente sind z.B. : div, p, form und andere mehr.
Inline Elemente sind z.B. : a, button, img und andere mehr.

display Klasse

Diese Klasse von Bootstrap 5 gibt Ihnen nun die Möglichkeit diesen Display Value zu manipulieren. Sie können die Darstellung eines Elements abhängig machen von der Bildschirmgrösse und seinen Typ setzen, inline oder block. 

Das Format der display Klasse ist d-Wert . Im Beispiel oben benutzen wir d-block und machen damit das span Element zu einem Blockelement. span wäre in seiner default Version ein Inline Element.

Im Code benutzen wir auch Bootstrap 5 Farbklassen: bg-  für die Hintergrundfarbe, text- für die Textfarbe.

Sie können natürlich auch d-inline verwenden:

Wenn Sie ein Layout für verschiedene Bildschirmgrössen entwickeln, kann es sein, das Sie ein Element auf einer spezifischen Grösse nicht darstellen wollen. Dafür bietet Bootstrap die none Klassen an.

In diesem Beispiel Code hat das dritte span Element die Klasse d-none zugewiesen bekommen. Wenn Sie den Code im Browser ausführen lassen, wird das Element überhaupt nicht angezeigt. d-none sperrt die Darstellung des Elements auf allen Bildschirmgrössen.

Sie können ein Element auch nur für bestimmte Bildschirmgrössen sperren. d-xxl-none verhindert die Darstellung zum Beispiel für sehr große Bildschirme. 

display Format

Ich bin in diesem Artikel schon kurz auf das Format der Klasse eingegangen. Hier jetzt ein wenig ausführlicher:

d-Wert ist die Basisvariante. Dabei können Sie Wert ersetzen durch

• none - Das Element wird nicht angezeigt
• inline - Das Element verhält sich als inline Element
• block - Das Element verhält sich als block Element
• grid - Das Element verhälts wie ein Grid Container
• table - Das Element verhält sich wie eine Tabelle
• table-cell - Das Element verhält sich wie eine Data Zelle in einer Tabelle
• table-row - Das Element verhält sich wie eine Reihe von Tabellen Zellen
• flex - Das Element verhält sich wie ein block level flex container
• inline-flex - Das Element verhält sich wie ein inline level flex container

Die Basisvariante hat noch keinen Bezug zur Bildschirmgrösse. Wenn Sie diesen herstellen wollen, benutzen Sie folgendes Format:

d-Breakpoint-Wert

d-md-block definiert zum Beispiel das ein Element auf einem medium Bildschirm als Block Element dargestellt wird. md ist dabei das Kürzel für den Breakpoint:

• sm - small. Bildschirmgrösse: 576px bis 767px
• md - medium. Bildschirmgrösse: 768px bis 991px
• lg - large. Bildschirmgrösse: 992px bis 1199px
• xl - extra Large: Bildschirmgrösse 1200px bis 1399px
• xxl - extra extra Large: Bildschirmgrösse: 1400px und mehr

Sie können die display Klassen auch mischen. Mit class="d-none d-md-block d-xl-none d-xxl-none" erreichen Sie zum Beispiel das ein Element nur auf medium und large Bildschirmen dargestellt wird.