Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- css:bootstrap [2019/09/16 23:26]
webproducer angelegt
+++ css:bootstrap [2020/04/20 22:55] (aktuell)
webproducer Beispiel für auflösungsabhängige Darstellung ergänzt
@@ Zeile 47: / Zeile 47: @@
 ----
-===== Col-Klassen-Präfix (Auflösungsabhängige Darstellung) =====
+===== Spaltenbreite mit dem Col-Klassen-Präfix (auflösungsabhängige Darstellung) =====
+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.
-  * md = medium = Desktop-Ansicht
+^ Pxel ^ Name ^ CSS-Klasse ^ Beispiel ^
-  * sm = small = Tablet
+| < 576px | Extra small | xs | col-xs-12 |
-  * lg	= large
+| >= 576px | Small | sm | col-sm-8 |
-  * xl	= extra large
+| >= 768px | Medium | md | col-md 4 |
+| >= 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

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge