Bootstrap - Größenanpassung: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die aufregende Welt der Bootstrap-Größenanpassung. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Mach dir keine Sorgen, wenn du neu im Programmieren bist – wir beginnen bei den Grundlagen und arbeiten uns nach oben. Also hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

Was ist Bootstrap-Größenanpassung?

Bevor wir ins Detail gehen, lassen wir uns anschauen, was Bootstrap-Größenanpassung überhaupt ist. Stell dir vor, du schmückst ein Zimmer aus. Du möchtest, dass einige Möbel perfekt passen, andere die Hälfte des Raums einnehmen und andere sich an die Größe des Raums anpassen. Genau das hilft uns Bootstrap-Größenanpassung mit Elementen auf einer Webseite zu tun!

Relativ zum Elternteil

Lassen wir mit der Größenanpassung von Elementen relativ zu ihrem Elternteil beginnen. Das ist so, als würde man entscheiden, wie viel Platz ein Bild an der Wand einnehmen soll.

Breitenklassen

Bootstrap bietet Klassen, die es dir erlauben, die Breite eines Elements als Prozentsatz der Breite seines Elternteils festzulegen. Hier ist eine praktische Tabelle dieser Klassen:

Klasse	Beschreibung
w-25	Breite 25%
w-50	Breite 50%
w-75	Breite 75%
w-100	Breite 100%
w-auto	Automatische Breite

Sehen wir uns das in Aktion an:

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">Breite 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">Breite 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">Breite 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">Breite 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">Automatische Breite</div>
</div>

In diesem Beispiel erstellen wir fünf div-Elemente, jedes mit einer anderen Breitenklasse. Die Klasse p-3 fügt etwas Abstand hinzu, damit man es besser sieht. Du wirst sehen, dass jedes div einen anderen Prozentsatz der Breite seines übergeordneten Containers einnimmt.

Höhenklassen

Ähnlich wie bei den Breitenklassen bietet Bootstrap auch Klassen für die Höhenanpassung:

Klasse	Beschreibung
h-25	Höhe 25%
h-50	Höhe 50%
h-75	Höhe 75%
h-100	Höhe 100%
h-auto	Automatische Höhe

Hier ist, wie du diese verwenden könntest:

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">Höhe 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">Höhe 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">Höhe 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">Höhe 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">Automatische Höhe</div>
</div>

In diesem Beispiel haben wir eine feste Höhe für den übergeordneten div gesetzt und dann Höhenklassen auf die Kinderelemente angewendet. Die Klasse d-inline-block macht diese div-Elemente inline.

Relativ zur Bildschirmbreite

Nun sprechen wir über die Größenanpassung von Elementen relativ zur Bildschirmbreite. Das ist so, als würde man einen Fernseher anpassen, um in verschiedene Raumgrößen zu passen.

Bootstrap verwendet die Einheit vw, die für "viewport width" steht. Hier sind einige Klassen:

Klasse	Beschreibung
vw-100	Breite 100vw
min-vw-100	Mindestbreite 100vw
max-vw-100	Maximalbreite 100vw

Sehen wir uns ein Beispiel an:

<div class="vw-100" style="background-color: #eee;">Dieser div ist 100vw breit.</div>

Dieser div wird immer so breit wie der Viewport, selbst wenn du das Browserfenstergröße änderst.

Relativ zur Bildschirmhöhe

Ähnlich wie bei der Bildschirmbreite können wir auch Elemente relativ zur Bildschirmhöhe skalieren, indem wir die Einheit vh verwenden.

Klasse	Beschreibung
vh-100	Höhe 100vh
min-vh-100	Mindesthöhe 100vh
max-vh-100	Maximalhöhe 100vh

Hier ist, wie du das verwenden könntest:

<div class="vh-100" style="background-color: #eee;">Dieser div ist 100vh hoch.</div>

Dieser div wird immer so hoch wie der Viewport, und passt sich an, wenn du das Browserfenstergröße änderst.

Relativ zum Viewport

Zuletzt schauen wir uns die Größenanpassung an, die sowohl relativ zur Bildschirmbreite als auch zur Bildschirmhöhe ist.

Mindestbreite 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

Dieser div wird mindestens so breit wie der Viewport, kann sich aber erweitern, wenn sein Inhalt mehr Platz erfordert.

Mindesthöhe 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

Ähnlich wie der vorherige, dieser div wird mindestens so hoch wie der Viewport, kann sich aber erweitern, wenn nötig.

Alles zusammenfügen

Nun, da wir alle diese Größenoptionen behandelt haben, lassen uns ein spaßiges kleines Beispiel erstellen, das sie alle verwendet:

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
Ich bin 75% breit relativ zu meinem Elternteil!
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
Ich bin 50% hoch relativ zu meinem Elternteil!
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
Ich bin so breit wie der Viewport!
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
Ich bin halb so hoch wie der Viewport!
</div>
</div>
</div>
</div>

In diesem Beispiel verwenden wir eine Kombination aus Breiten-, Höhen- und viewport-relativer Größenanpassung, um ein vielfältiges und responsives Layout zu erstellen. Probiere aus, das Browserfenstergröße zu ändern, um zu sehen, wie diese Elemente sich anpassen!

Und das war's, Leute! Du hast gerade deine ersten Schritte in die Welt der Bootstrap-Größenanpassung gemacht. Denke daran, Übung macht den Meister, also habe keine Angst, diese Klassen in deinen eigenen Projekten auszuprobieren. Bereitwillig wirst du responsive Layouts wie ein Profi erstellen!

Frohes Coden und möge deine Websites immer perfekt passen! ?

Credits: Image by storyset