Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- css:bootstrap [2020/04/20 21:55]
webproducer Tabelle für auflösungsabhängige Darstellung erstellt
+++ css:bootstrap [2020/04/20 22:55] (aktuell)
webproducer Beispiel für auflösungsabhängige Darstellung ergänzt
@@ Zeile 49: / Zeile 49: @@
 ===== Spaltenbreite mit dem Col-Klassen-Präfix (auflösungsabhängige Darstellung) =====
-Die Klassen werden immer in der Reihenfolge "von klein nach groß" definiert.
+Die Klassen werden immer in der Reihenfolge "von klein nach groß" definiert, wobei für die kleinste Auflösung kein Präfix angegeben werden muss.
 ^ Pxel ^ Name ^ CSS-Klasse ^ Beispiel ^
@@ Zeile 57: / Zeile 57: @@
 | >= 992px | Large | lg | col-lg-3 |
 | >= 1200px | Extra large | xl |col-xl-3 |
+//Beispiel://
+<code html>
+<div class="container">
+    <div class="row">
+        <div class="d-none d-lg-block col-lg-5">...</div>
+        <div class="col-12 col-lg-7">...</div>
+    </div>
+</div>
+</code>
+In diesem Beispiel werden in den Auflösungen xs, sm und md wird die 1. Spalte mit "d-none" ausgeblendet und nur die 2. Spalte mit der gesamten Breite "col-12" angezeigt.
+In den Auflösungen lg und xl werden beide Spalten angezeigt, wobei die 1. Spalte 5 cols und die 2. Spalte 7. cols einnimmt.
+Hier ist zu erkennen, dass nicht alle Auflösungen angegeben werden müssen. Die zwischenliegenden Auflösungen nehmen den Wert der vorher definierten Auflösung an.
 ----

Wissensarchiv für Entwickler