Bootstrap - Anzeige: Ein umfassender Leitfaden für Anfänger
Hallo da draußen, angehende Web-Entwickler! Heute tauchen wir in eine der nützlichsten Funktionen von Bootstrap ein: Anzeige-Utilities. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch dieses Thema mit klaren Erklärungen und vielen Beispielen zu führen. Also, hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!
Was ist Bootstrap Anzeige?
Bevor wir ins Detail gehen, lassen wir uns klar machen, was wir unter "Anzeige" in Bootstrap meinen. In der Web-Entwicklung bezieht sich "Anzeige" darauf, wie ein Element auf einer Webseite dargestellt wird. Bootstrap bietet eine Reihe von Klassen, die es dir ermöglichen, die Anzeigebedeutung von Elementen einfach zu steuern.
Stelle es dir wie das Arrangieren von Möbeln in einem Raum vor. Manchmal möchtest du ein Stück sichtbar machen, manchmal willst du es verstecken, und manchmal möchtest du, dass es sich unterschiedlich verhält, abhängig von der Größe des Raumes (oder in unserem Fall, der Bildschirmgröße).
Notation
Bootstrap verwendet eine einfache und intuitiv zu verstehende Notation für seine Anzeige-Klassen. Das allgemeine Format ist:
.d-{value}Wo {value} einer der folgenden Werte sein kann:
| Wert | Beschreibung |
|---|---|
| none | Versteckt das Element |
| inline | Zeigt das Element als inline-Element an |
| inline-block | Zeigt das Element als inline-level-Blockbehälter an |
| block | Zeigt das Element als Blockelement an |
| table | Zeigt das Element als Tabelle an |
| table-cell | Zeigt das Element als Tabellenzelle an |
| table-row | Zeigt das Element als Tabellenzeile an |
| flex | Zeigt das Element als block-level Flexcontainer an |
| inline-flex | Zeigt das Element als inline-level Flexcontainer an |
Schauen wir uns einige Beispiele an:
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>In diesem Beispiel verwenden wir d-inline, um zwei div-Elemente inline darzustellen. Sie werden nebeneinander erscheinen, anstatt vertikal gestapelt zu werden.
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>Hier verwenden wir d-block, um span-Elemente (die normalerweise inline sind) als Blöcke darzustellen. Sie werden vertikal gestapelt.
Responsивные Varianten
Nun, hier wird es wirklich spannend! Bootstrap ermöglicht es dir, verschiedene Anzeigeeigenschaften basierend auf der Bildschirmgröße anzuwenden. Das Format dafür ist:
.d-{breakpoint}-{value}Wo {breakpoint} einer der folgenden Werte sein kann:
| Breakpoint | Beschreibung |
|---|---|
| sm | Kleine Geräte (≥576px) |
| md | Mittlere Geräte (≥768px) |
| lg | Große Geräte (≥992px) |
| xl | Extra große Geräte (≥1200px) |
Zum Beispiel:
<div class="d-none d-md-block">
Dieser Text wird auf kleinen Bildschirmen versteckt, aber auf mittleren und größeren Bildschirmen sichtbar.
</div>Dieser div wird standardmäßig versteckt (d-none), aber als Block (d-md-block) auf mittelgroßen Bildschirmen und größer angezeigt.
Elemente verstecken
Das Verstecken von Elementen ist eine häufige Aufgabe im responsiven Design. Bootstrap macht dies mit der d-none-Klasse einfach:
<div class="d-none">Du kannst mich nicht sehen!</div>Dieses Element wird完全 versteckt, unabhängig von der Bildschirmgröße.
Aber was, wenn du ein Element nur auf bestimmten Bildschirmgrößen verstecken möchtest? Dann kommen die responsiven Varianten ganz gelegen:
<div class="d-lg-none">Ich bin auf allen Bildschirmen sichtbar, die kleiner als groß sind.</div>
<div class="d-none d-lg-block">Ich erscheine nur auf großen Bildschirmen und darüber.</div>Anzeige im Druck
Bootstrap ermöglicht es dir sogar, die Anzeige von Elementen zu steuern, wenn die Seite gedruckt wird! Verwende die Klassen d-print-{value} dafür:
<div class="d-none d-print-block">Ich erscheine nur, wenn du die Seite druckst!</div>
<div class="d-print-none">Ich verschwinde, wenn du die Seite druckst!</div>Dies ist besonders nützlich für die Erstellung von druckfreundlichen Versionen deiner Webseiten, ohne separate Stylesheets benötigen zu müssen.
Alles zusammenfügen
Lassen wir uns ein kleines Beispiel erstellen, das mehrere Anzeige-Utilities verwendet:
<div class="container">
<h1 class="d-none d-md-block">Willkommen auf meiner Webseite</h1>
<h2 class="d-md-none">Willkommen</h2>
<p class="d-inline-block bg-light p-2">Ich bin immer inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-2">Ich erscheine inline auf großen Bildschirmen.</p>
<div class="d-flex justify-content-between">
<div>Flex-Element 1</div>
<div>Flex-Element 2</div>
<div class="d-none d-xl-block">Ich erscheine nur auf extra großen Bildschirmen</div>
</div>
<footer class="d-print-none">Diese Fußzeile wird nicht gedruckt.</footer>
</div>In diesem Beispiel:
- Wir haben eine große Überschrift für mittlere Bildschirme und größer, und eine kleinere für kleinere Bildschirme.
- Wir haben zwei Absätze, von denen einer nur auf großen Bildschirmen erscheint.
- Wir verwenden Flexbox, mit einem dritten Element, das nur auf extra großen Bildschirmen erscheint.
- Die Fußzeile wird nicht gedruckt.
Schlussfolgerung
Und da hast du es, Leute! Wir haben die innen und außen von Bootstrap's Anzeige-Utilities erkundet. Denke daran, der Schlüssel zum Beherrschen dieser ist die Übung. Versuche, deine eigenen Layouts zu erstellen, experimentiere mit verschiedenen Bildschirmgrößen und habe keine Angst, diese Klassen zu mischen und zu kombinieren.
Als dein alter Computerlehrer kann ich nicht genug betonen, wie wertvoll diese Utilities im realen Web-Entwicklung sind. Sie werden dir unzählige Stunden beim Schreiben von benutzerdefiniertem CSS und dem Debuggen von Layoutproblemen sparen.
Nun, gehe hin und erstelle responsive, anpassungsfähige Layouts mit Selbstvertrauen! Und denke daran, in der Welt der Web-Entwicklung, wie im Leben, ist manchmal das mächtigste Werkzeug zu wissen, wann man etwas verschwinden lassen muss. Viel Spaß beim Coden!
Credits: Image by storyset