| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung |
| plugins:bootstrap_wrapper [14.06.2024 12:49] – Nikolaus Müller-Büchele | plugins:bootstrap_wrapper [10.08.2024 08:57] (aktuell) – Nikolaus Müller-Büchele |
|---|
| </callout> | </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. \\ \\ | * **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>. | * 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 ==== | ==== bootswrapper Elemente ==== |
| </col> | </col> |
| <col md="6" sm="12"> | <col md="6" sm="12"> |
| <code><thumbnail>{{ :logophinvers.png }} | <code><thumbnail> |
| | {{ :logophinvers.png }} |
| <caption>Bild mit Rahmen und Bildtext</caption> | <caption>Bild mit Rahmen und Bildtext</caption> |
| </thumbnail> | </thumbnail> |
| | large (larger desktops) | ab 1200px | lg | | | large (larger desktops) | ab 1200px | lg | |
| </col><col sm="12" md="6"> | </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 || | ^ 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" | | | md | 6 | geerbt von "sm" | |
| | lg | 4 | wie angegeben -> 3 Spalten pro Reihe | | | lg | 4 | wie angegeben -> 3 Felder pro Reihe | |
| </col></grid> | </col></grid> |
| |
| <code> | <code> |
| <grid> | <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> | </grid> |
| </code> | </code> |
| |
| |