Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- plugins:bootstrap_wrapper [14.06.2024 11:16] – 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 68: / Zeile 70: @@
 <col md="6" sm="12"><callout type="info" icon="True"> Info </callout>
 </col>
-<col md="6" sm="12">
+<col md="6" sm="12"> \\
   <callout type="info" icon="True"> Info </callout>
 </col>
@@ Zeile 96: / Zeile 97: @@
   * Exercitatio artem parat
   * Sol lucet omnibus
-</code></list-group>
+</list-group>
+</code>
 </col>
 </grid>
@@ Zeile 102: / Zeile 104: @@
 <grid>
 <col md="6" sm="12">
+<panel type="primary" title="Panel Titel"> Text in einem Panel</panel>
+</col>
+<col md="6" sm="12"><code>
 <panel type="primary" title="Panel Titel">
-</panel>
+Text in einem Panel
-</col>
+</panel></code>
-<col md="6" sm="12">
-  <panel type="primary" title="Panel Titel">
-</panel>
 </col>
 </grid>
 **[[plugins:bootswrap:well | <well> ]]**
-</grid>
+<grid>
 <col md="6" sm="12"><well> Text in einem Rahmen </well>
 </col>
@@ Zeile 121: / Zeile 123: @@
 ==== Grafiken ====
 </alert>
+**[[plugins:bootswrap:carousel | <carousel> ]]**
+<grid>
+<col md="6" sm="12"><carousel><slide>{{:logoph.png?0x100|}}</slide><slide>{{:wiki:dokuwiki-128.png?0x100|}}</slide><slide>{{:bootstrap.png?0x100|}}</slide></carousel>
+</col>
+<col md="6" sm="12"><code>
+<carousel>
+<slide>{{:logoph.png?0x100|}}</slide>
+<slide>{{:wiki:dokuwiki-128.png?0x100|}}</slide>
+<slide>{{:bootstrap.png?0x100|}}</slide>
+</carousel>
+</code></col>
+</grid>
+**[[plugins:bootswrap:image | <image> ]]**
 <grid>
-<col md="6" sm="12"><panel>**[[plugins:bootswrap:carousel | <carousel> ]]** \\ <carousel><slide>{{:logoph.png?0x100|}}</slide><slide>{{:wiki:dokuwiki-128.png?0x100|}}</slide><slide>{{:bootstrap.png?0x100|}}</slide></carousel>
-</panel></col>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:image | <image> ]]** \\ <image shape="circle">{{:logophinvers.png?50  |circle}}</image><image shape="rounded">{{:logophinvers.png?50  |rouded}}</image><image shape="thumbnail">{{:logophinvers.png?50  |thumbnail}}</image>
+<image shape="circle">{{:logophinvers.png?50  |circle}}</image><image shape="rounded">{{:logophinvers.png?50  |rouded}}</image><image shape="thumbnail">{{:logophinvers.png?50  |thumbnail}}</image>
-</panel>
 </col>
-<col md="6" sm="12"><panel>**[[plugins:bootswrap:progress-bar | <progress-bar> ]]** \\ \\ <progress><bar value="45" type="danger" striped="true">45%</bar>
+<col md="6" sm="12">
+<code><image shape="circle">
+{{:logophinvers.png?50  |circle}}
+</image>
+<image shape="rounded">
+{{:logophinvers.png?50  |rouded}}
+</image>
+<image shape="thumbnail">
+{{:logophinvers.png?50  |thumbnail}}
+</image>
+</code>
+</col>
+</grid>
+**[[plugins:bootswrap:progress-bar | <progress-bar> ]]**
+<grid>
+<col md="6" sm="12"><progress><bar value="45" type="danger" striped="true">45%</bar>
 </progress>
-</panel></col>
+</col>
+<col md="6" sm="12"><code><progress>
+<bar value="45" type="danger" striped="true">45%</bar>
+</progress>
+</code></col>
+</grid>
+**[[plugins:bootswrap:thumbnail | <thumbnail> ]]**
+<grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:thumbnail | <thumbnail> ]]** \\ <thumbnail>{{  :logophinvers.png  }}<caption>Bild mit Rahmen und Bildtext</caption></thumbnail>
+<thumbnail>{{  :logophinvers.png  }}<caption>Bild mit Rahmen und Bildtext</caption></thumbnail>
-</panel>
+</col>
-</col></grid>
+<col md="6" sm="12">
+<code><thumbnail>
+{{  :logophinvers.png  }}
+<caption>Bild mit Rahmen und Bildtext</caption>
+</thumbnail>
+</code>
+</col>
+</grid>
 <alert>
 ==== Interaktive Elemente ====
 </alert>
 //Reagieren auf Klick, Mouseover oder Scrollen//
+\\ \\
+**[[plugins:bootswrap:accordion | <accordion> ]]**
 <grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:accordion | <accordion> ]]** \\ <accordion>
+<accordion>
 <panel title="Titel 1 (klick)">
 Text Abschnitt 1
@@ Zeile 149: / Zeile 193: @@
 </panel>
 </accordion>
+</col>
+<col md="6" sm="12"><code>
+<accordion>
+<panel title="Titel 1 (klick)">
+Text Abschnitt 1
 </panel>
+<panel title="Titel 2  (klick)">
+Text Abschnitt 2
+</panel>
+</accordion>
+</code>
 </col>
+</grid>
+**[[plugins:bootswrap:affix | <affix> ]]**
+<grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:affix | <affix> ]]** \\ \\ Fixiert je nach Scrollposition Elemente an einer festen Postion: \\ scrollen, s. oben rechts.
+Fixiert je nach Scrollposition Elemente an einer festen Postion: \\ scrollen, s. oben rechts.
-<affix position="fixed" offset-top = "3000" position-top="100" position-right="50" >8-)</affix>
+<affix position="fixed" offset-top = "3100" position-top="100" position-right="50" >8-)</affix>
-</panel>
 </col>
+<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" >
+-)
+</affix>
+</code>
+</col>
+</grid>
+**[[plugins:bootswrap:button | <button> ]]**
+<grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:button | <button> ]]** \\ \\ <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>
-</panel>
 </col>
+<col md="6" sm="12"><code>
+<button type="success" size="lg" icon="fa fa-chevron-up">
+[[bootstrap_wrapper| nach oben]]
+</button></code>
+</col>
+</grid>
+**[[plugins:bootswrap:collapse | <collapse> ]]**
+<grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:collapse | <collapse> ]]** \\ \\
 <button collapse="beispiel">Klick!</button>
 <collapse id="beispiel" collapsed="true">verborgener Abschnitt</collapse>
-</panel>
+</col>
+<col md="6" sm="12"><code>
+<button collapse="beispiel">Klick!</button>
+<collapse id="beispiel" collapsed="true">
+verborgener Abschnitt
+</collapse>
+</code>
 </col>
 </grid>
+**[[plugins:bootswrap:modal | <modal> ]]**
 <grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:modal | <modal> ]]** \\ \\
 <btn modal="modal-demo">Klick!</btn>
- <modal id="modal-demo" title="Modal">
+<modal id="modal-demo" title="Modal">
 Text in einem modalen Fenster
 </modal>
-</panel>
 </col>
+<col md="6" sm="12"><code>
+<btn modal="modal-demo">Klick!</btn>
+<modal id="modal-demo" title="Modal">
+Text in einem modalen Fenster
+</modal>
+</code></col>
+</grid>
+**[[plugins:bootswrap:nav | <nav> ]]**
+<grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:nav | <nav> ]]**
+<panel>
 <nav type="pills" stacked="true">
   * [[:start|{{fa>home}}]]
@@ Zeile 189: / Zeile 276: @@
 </col>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:popover | <popover> ]]** \\ \\
+<code>
+<nav type="pills" stacked="true">
+  * [[:start|{{fa>home}}]]
+  * Sonderseiten
+    * [[:header|header]]
+    * [[:sidebar|sidebar]]
+    * [[rightsidebar|rightsidebar]]
+    * [[:footer|footer]]
+</nav>
+</code>
+</col>
+</grid>
+**[[plugins:bootswrap:popover | <popover> ]]**
+<grid>
+<col md="6" sm="12">
 <popover placement="right" title="Popover" content="ein kleines Textfenster!" animation="true" delay="0" delay-show="0" delay-hide="0"><button>Klick!</button></popover>
-</panel>
 </col>
+<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>
+</popover>
+</code></col>
+</grid>
+**[[plugins:bootswrap:tooltip | <tooltip> ]]**
+<grid>
 <col md="6" sm="12">
-<panel>**[[plugins:bootswrap:tooltip | <tooltip> ]]** \\ \\ 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)
-</panel>
+</col>
+<col md="6" sm="12"><code>
+Text mit
+<tooltip title="das ist ein Tooltip" placement="bottom">
+Tooltip
+</tooltip> (mouseover)
+</code>
 </col>
 </grid>
@@ Zeile 218: / 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 240: / 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>