Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- plugins:bootstrap_wrapper [14.06.2024 12:48] – Nikolaus Müller-Büchele
+++ plugins:bootstrap_wrapper [10.08.2024 08:57] (aktuell) – Nikolaus Müller-Büchele
@@ Zeile 7: / Zeile 7: @@
 </callout>
   * **Editor:** Im Editorfenster können über den {{:bootstrap.png?nolink&20|}}-Button Bootstrap-Element in die aktuelle Seite eingefügt werden, dabei wird ein Starttag ''%%<tag>%%'' und ein Endtag ''%%</tag>%%'' generiert. \\ \\
-  * Elemente mit unterschiedlichen **Farben** werden über das Attribut ''type'' entsprechend eingefärbt: \\ ''type ='' <label type="primary"> "primary" </label> <label type="success"> "success" </label> <label type="info"> "info" </label> <label type="warning"> "warning" </label> <label type="danger"> "danger" </label> \\ \\
+  * Elemente mit unterschiedlichen **Farben** werden über das Attribut ''type'' entsprechend eingefärbt: \\ ''type ='' <label type="primary"> "primary" </label> <label type="success"> "success" </label> <label type="info"> "info" </label> <label type="warning"> "warning" </label> <label type="danger"> "danger" </label> <label> ohne "type" </label>\\ \\
   * Elemente mit **Icons** aus den Bibliotheken [[https://fontawesome.com/search?o=r&m=free|Font Awesom]] (fa) oder [[https://pictogrammers.com/library/mdi/|Material Design]] (mdi): Icons lassen sich je nach Element als Mediendatei {{mdi>bike}} ''%%{{fa>bicycle}}%%'' oder als Attribut <button icon="fa fa-bicycle">''icon="mdi mdi-bike"''</button> einfügen. Im Editor lassen sich die verfügbaren Icons über den {{:wiki:dokuwiki-128.png?nolink&20|}} -Button des [[plugins:icons|icons-Plugin]] anzeige. <text type="muted">Die "Glyphicons" werden in Bootstrap zukünftig nicht mehr angeboten und sollten nicht verwendet werden</text>.
 ==== bootswrapper Elemente ====
@@ Zeile 60: / Zeile 60: @@
 <alert type="success" dismiss="true" icon="fa fa-warning">**Warnung**</alert>
 </col>
-<col md="6" sm="12">
+<col md="6" sm="12"><code>
-  <alert type="success" dismiss="true" icon="fa fa-warning">**Warnung**</alert>
+<alert type="success" dismiss="true" icon="fa fa-warning">
+**Warnung**
+</alert></code>
 </col>
 </grid>
@@ Zeile 104: / Zeile 106: @@
 <panel type="primary" title="Panel Titel"> Text in einem Panel</panel>
 </col>
-<col md="6" sm="12">
+<col md="6" sm="12"><code>
-  <panel type="primary" title="Panel Titel">Text in einem Panel</panel>
+<panel type="primary" title="Panel Titel">
+Text in einem Panel
+</panel></code>
 </col>
 </grid>
@@ Zeile 137: / Zeile 141: @@
 </col>
 <col md="6" sm="12">
-<code><image shape="circle">{{:logophinvers.png?50  |circle}}</image>
+<code><image shape="circle">
-<image shape="rounded">{{:logophinvers.png?50  |rouded}}</image>
+{{:logophinvers.png?50  |circle}}
-<image shape="thumbnail">{{:logophinvers.png?50  |thumbnail}}</image>
+</image>
+<image shape="rounded">
+{{:logophinvers.png?50  |rouded}}
+</image>
+<image shape="thumbnail">
+{{:logophinvers.png?50  |thumbnail}}
+</image>
 </code>
 </col>
@@ Zeile 159: / Zeile 169: @@
 </col>
 <col md="6" sm="12">
-<code><thumbnail>{{  :logophinvers.png  }}
+<code><thumbnail>
+{{  :logophinvers.png  }}
 <caption>Bild mit Rahmen und Bildtext</caption>
 </thumbnail>
@@ Zeile 321: / Zeile 332: @@
 | large (larger desktops)  |  ab 1200px  |  lg      |
 </col><col sm="12" md="6">
-**Beispiel: %%<col sm="6" lg="4">%%**
+**Beispiel: %%<col sm="6" lg="4">%%** ergibt folgende Feld-Einteilung:
 ^  Kürzel  ^ Feldbreite in Rasterspalten                      ||
-|  xs      |  12            | Standardbreite -> 1 Spalte pro Reihe  |
+|  xs      |  12            | Standardbreite -> 1 Feld pro Reihe  |
-|  sm      |  6             | wie angegeben -> 2 Spalten pro Reihe  |
+|  sm      |  6             | wie angegeben -> 2 Felder pro Reihe  |
 |  md      |  6             | geerbt von "sm"                       |
-|  lg      |  4             | wie angegeben -> 3 Spalten pro Reihe  |
+|  lg      |  4             | wie angegeben -> 3 Felder pro Reihe  |
 </col></grid>
@@ Zeile 343: / Zeile 354: @@
 <code>
 <grid>
-  <col sm="12" md="6" lg="8">
+<col sm="12" md="6" lg="8">
-    sm=12 md=6 lg=8
+sm=12 md=6 lg=8
-  </col>
+</col>
-  <col xs=12 sm=6 md=4>
+<col xs=12 sm=6 md=4>
-    xs="12" sm="6" md="4"
+xs="12" sm="6" md="4"
-  </col>
+</col>
 </grid>
 </code>