plugins:bootstrap_wrapper [PH Freiburg]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
===== bootstrap wrapper, bootswrapper =====
Erweitert Dokuwiki um viele Elemente.
Es gibt funktional einige Dopplungen mit dem [[plugins:wrap|wrap]]-Plugin.

<callout type="warning" icon="true">
nicht kompatibel zu [[https://www.dokuwiki.org/plugin:edittable| edittable ]]
</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> <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 ====
Im folgenden werden die vom bootswrapper Plugin bereitgestellten Elemente anhand eines Beispiels vorgestellt, die Bezeichnung des Elements steht in spitzen Klammern, die mit einer Detailbeschreibung verlink sind (klick).
<alert>
==== Textformatierung ====
</alert>
**[[plugins:bootswrap:text | <text> ]]**
<grid>
<col md="6" sm="12">
<panel><text type="danger"> farbiger Text </text> \\ <text background="primary"> farbiger Hintergrund</text></panel>
</col>
<col md="6" sm="12">
  <text type="danger"> farbiger Text </text>
  <text background="primary"> farbiger Hintergrund</text>
</col></grid>
**[[plugins:bootswrap:badge | <badge> ]]**
<grid>
<col md="6" sm="12"><panel>Zähler <badge>15</badge>
</panel></col>
<col md="6" sm="12"><code>Zähler <badge>15</badge>
</code></col>
</grid>
**[[plugins:bootswrap:label | <label> ]]**
<grid>
<col md="6" sm="12"><panel><label type="danger"> rotes Label </label>
</panel></col>
<col md="6" sm="12"><code><label type="danger"> rotes Label </label>
</code></col></grid>
**[[plugins:bootswrap:lead | <lead> ]]**
<grid>
<col md="6" sm="12"><panel><lead> großer Text </lead>
</panel></col>
<col md="6" sm="12"><code><lead> großer Text </lead>
</code></col></grid>
**[[plugins:bootswrap:<page-header> | <page-header> ]]**
<grid>
<col md="6" sm="12">
<panel><page-header> Text mit Zusatzabstand </page-header>
</panel>
</col>
<col md="6" sm="12">
<code><page-header> Text mit Zusatzabstand </page-header>
</code>
</col></grid>
<alert>
==== Boxen ====
</alert>
**[[plugins:bootswrap:alert | <alert> ]]**
<grid>
<col md="6" sm="12">
<alert type="success" dismiss="true" icon="fa fa-warning">**Warnung**</alert>
</col>
<col md="6" sm="12"><code>
<alert type="success" dismiss="true" icon="fa fa-warning">
**Warnung**
</alert></code>
</col>
</grid>
**[[plugins:bootswrap:callout | <callout> ]]**
<grid>
<col md="6" sm="12"><callout type="info" icon="True"> Info </callout>
</col>
<col md="6" sm="12"> \\ 
  <callout type="info" icon="True"> Info </callout>
</col>
</grid>
**[[plugins:bootswrap:jumbotron | <jumbotron> ]]**
<grid>
<col md="6" sm="12">
<jumbotron> sehr großer Text </jumbotron>
</col>
<col md="6" sm="12">
  <jumbotron> sehr großer Text </jumbotron>
</col>
</grid>
**[[plugins:bootswrap:list-group | <list-group> ]]**
<grid>
<col md="6" sm="12">
<list-group>
  * Omne initium difficile est
  * Exercitatio artem parat
  * Sol lucet omnibus
</list-group>
</col>
<col md="6" sm="12"><code>
<list-group>
  * Omne initium difficile est
  * Exercitatio artem parat
  * Sol lucet omnibus
</list-group>
</code>
</col>
</grid>
**[[plugins:bootswrap:panel | <panel> ]]**
<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">
Text in einem Panel
</panel></code>
</col>
</grid>
**[[plugins:bootswrap:well | <well> ]]**
<grid>
<col md="6" sm="12"><well> Text in einem Rahmen </well>
</col>
<col md="6" sm="12">
  <well> Text in einem Rahmen </well>
</col>
</grid>
<alert>
==== 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">
<image shape="circle">{{:logophinvers.png?50  |circle}}</image><image shape="rounded">{{:logophinvers.png?50  |rouded}}</image><image shape="thumbnail">{{:logophinvers.png?50  |thumbnail}}</image>
</col>
<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>
</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">
<thumbnail>{{  :logophinvers.png  }}<caption>Bild mit Rahmen und Bildtext</caption></thumbnail>
</col>
<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">
<accordion>
<panel title="Titel 1 (klick)">
Text Abschnitt 1
</panel>
<panel title="Titel 2  (klick)">
Text Abschnitt 2
</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">
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>
</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" >
8-)
</affix>
</code>
</col>
</grid>
**[[plugins:bootswrap:button | <button> ]]**
<grid>
<col md="6" sm="12">
<button type="success" size="lg" icon="fa fa-chevron-up">[[bootstrap_wrapper| nach oben]]</button>
</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">
<button collapse="beispiel">Klick!</button>
<collapse id="beispiel" collapsed="true">verborgener Abschnitt</collapse>
</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">
<btn modal="modal-demo">Klick!</btn>
<modal id="modal-demo" title="Modal">
Text in einem modalen Fenster
</modal>
</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>
<nav type="pills" stacked="true">
  * [[:start|{{fa>home}}]]
  * Sonderseiten
    * [[:header|header]]
    * [[:sidebar|sidebar]]
    * [[rightsidebar|rightsidebar]]
    * [[:footer|footer]]
</nav>
</panel>
</col>
<col md="6" sm="12">
<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>
</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">
Text mit <tooltip title="das ist ein Tooltip" placement="bottom">Tooltip</tooltip> (mouseover)
</col>
<col md="6" sm="12"><code>
Text mit 
<tooltip title="das ist ein Tooltip" placement="bottom">
Tooltip
</tooltip> (mouseover)
</code>
</col>
</grid>
<alert>
==== Makros ====
</alert>
| ''<nowiki>~~CLEARFIX~~</nowiki>'' | Ausrichtung unterhalb des letzten Elements|
| ''<nowiki>~~PAGEBREAK~~</nowiki>'' | Setenumbruch im Druck |

<alert>
==== Bootstrap Grid, responsiv ====
</alert>
Die Wiki-Farm an der PH nutzt ein DokuWiki-Template mit [[https://de.wikipedia.org/wiki/Bootstrap_(Framework)|Bootstrap]]. Bootstrap ist ein Framework, mit dem man [[https://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/|responsive]] Websiten erstellen kann. Dazu wird ein Rastersystem über die Seite gelegt, das die Seitenbreite in 12 Spalten  aufteilt.

Seiten lassen sich mit dem ''%%<grid>%%'' und ''%%<col>%%''-Tag in Felder gliedern, die je nach Bildschirmgröße eine unterschiedlichen Anzahl dieser Rasterspalten verwenden. So kann man  z. B. Felder definieren, die auf großen Bildschirmen mit einer Breite von 4 Rasterspalten angezeigt werden (dann passen drei Felder nebeneinander, 3x4=12) und auf kleinen Bildschirmen mit 6 Rasterspalten (dann werden nur zwei Felder nebeneinander angezeigt, 2x6=12). Die Standardbreite ist 12 Rasterspalten pro Reihe (also alle), Breitenangaben gelten auch für alle breiteren Bildschirme, wenn für diese nichts definiert ist. Sie werden im ''%%<col>%%''-Tag pro Bildschirmbreite angegeben.
<grid>
<col sm="12" md="6"> \\
^ Bildschirmbreite         ^  in Pixel   ^  Kürzel  ^
| x-small (phones)         |  <768px     |  xs      |
| small (tablets)          |  ab 768px   |  sm      |
| medium (desktops)        |  ab 992px   |  md      |
| large (larger desktops)  |  ab 1200px  |  lg      |
</col><col sm="12" md="6">
**Beispiel: %%<col sm="6" lg="4">%%** ergibt folgende Feld-Einteilung:
^  Kürzel  ^ Feldbreite in Rasterspalten                      ||
|  xs      |  12            | Standardbreite -> 1 Feld pro Reihe  |
|  sm      |  6             | wie angegeben -> 2 Felder pro Reihe  |
|  md      |  6             | geerbt von "sm"                       |
|  lg      |  4             | wie angegeben -> 3 Felder pro Reihe  |
</col></grid>



**Beispiel:** (reagiert auf unterschiedliche Fenstergröße)
<grid>
<col sm="12" md="6" lg="8">
<WRAP safety box>sm=12 md=6 lg=8</WRAP>
</col>
<col xs="12" sm="6" md="4">
<WRAP warning box>xs=12 sm=6 md=4</WRAP>
</col>
</grid>

<code>
<grid>
<col sm="12" md="6" lg="8">
sm=12 md=6 lg=8
</col>
<col xs=12 sm=6 md=4>
xs="12" sm="6" md="4"
</col>
</grid>
</code>