Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- plugins:bootstrap_wrapper [14.06.2024 12:18] – 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 148: / Zeile 158: @@
 </progress>
 </col>
-<col md="6" sm="12"><code><progress><bar value="45" type="danger" striped="true">45%</bar></progress>
+<col md="6" sm="12"><code><progress>
+<bar value="45" type="danger" striped="true">45%</bar>
+</progress>
 </code></col>
 </grid>
@@ Zeile 157: / Zeile 169: @@
 </col>
 <col md="6" sm="12">
-<code><thumbnail>{{  :logophinvers.png  }}<caption>Bild mit Rahmen und Bildtext</caption></thumbnail>
+<code><thumbnail>
+{{  :logophinvers.png  }}
+<caption>Bild mit Rahmen und Bildtext</caption>
+</thumbnail>
 </code>
 </col>
@@ Zeile 181: / Zeile 196: @@
 <col md="6" sm="12"><code>
 <accordion>
-  <panel title="Titel 1 (klick)">
+<panel title="Titel 1 (klick)">
-    Text Abschnitt 1
+Text Abschnitt 1
-  </panel>
+</panel>
-  <panel title="Titel 2  (klick)">
+<panel title="Titel 2  (klick)">
-    Text Abschnitt 2
+Text Abschnitt 2
-  </panel>
+</panel>
 </accordion>
 </code>
@@ Zeile 199: / Zeile 214: @@
 <col md="6" sm="12"><code>
 Fixiert je nach Scrollposition Elemente an einer festen Postion: \\ scrollen, s. oben rechts.
-<affix position="fixed" offset-top = "3100" position-top="100" position-right="50" >8-)</affix>
+<affix position="fixed" offset-top = "3100" position-top="100" position-right="50" >
+-)
+</affix>
 </code>
 </col>
@@ Zeile 208: / Zeile 225: @@
 <button type="success" size="lg" icon="fa fa-chevron-up">[[bootstrap_wrapper| nach oben]]</button>
 </col>
-<col md="6" sm="12">
+<col md="6" sm="12"><code>
-  <button type="success" size="lg" icon="fa fa-chevron-up">[[bootstrap_wrapper| nach oben]]</button>
+<button type="success" size="lg" icon="fa fa-chevron-up">
+[[bootstrap_wrapper| nach oben]]
+</button></code>
 </col>
 </grid>
@@ Zeile 219: / Zeile 238: @@
 <collapse id="beispiel" collapsed="true">verborgener Abschnitt</collapse>
 </col>
-<col md="6" sm="12">
+<col md="6" sm="12"><code>
-  <button collapse="beispiel">Klick!</button>
+<button collapse="beispiel">Klick!</button>
-  <collapse id="beispiel" collapsed="true">verborgener Abschnitt</collapse>
+<collapse id="beispiel" collapsed="true">
+verborgener Abschnitt
+</collapse>
+</code>
 </col>
 </grid>
@@ Zeile 233: / Zeile 255: @@
 </col>
 <col md="6" sm="12"><code>
-  <btn modal="modal-demo">Klick!</btn>
+<btn modal="modal-demo">Klick!</btn>
-  <modal id="modal-demo" title="Modal">
+<modal id="modal-demo" title="Modal">
-     Text in einem modalen Fenster
+Text in einem modalen Fenster
-  </modal>
+</modal>
 </code></col>
 </grid>
@@ Zeile 273: / Zeile 295: @@
 <col md="6" sm="12"><code>
 <popover placement="right" title="Popover" content="ein kleines Textfenster!" animation="true" delay="0" delay-show="0" delay-hide="0">
-  <button>Klick!</button>
+<button>Klick!</button>
 </popover>
 </code></col>
@@ Zeile 282: / Zeile 304: @@
 Text mit <tooltip title="das ist ein Tooltip" placement="bottom">Tooltip</tooltip> (mouseover)
 </col>
-<col md="6" sm="12">
+<col md="6" sm="12"><code>
-  Text mit <tooltip title="das ist ein Tooltip" placement="bottom">Tooltip</tooltip> (mouseover)
+Text mit
+<tooltip title="das ist ein Tooltip" placement="bottom">
+Tooltip
+</tooltip> (mouseover)
+</code>
 </col>
 </grid>
@@ Zeile 306: / 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 328: / 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>