Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
Both sides previous revision Vorhergehende Überarbeitung | |||
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) ===== | ===== 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 ^ | ^ Pxel ^ Name ^ CSS-Klasse ^ Beispiel ^ | ||
Zeile 57: | Zeile 57: | ||
| >= 992px | Large | lg | col-lg-3 | | | >= 992px | Large | lg | col-lg-3 | | ||
| >= 1200px | Extra large | xl |col-xl-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. | ||
---- | ---- |