bootstrap wrapper, bootswrapper

Erweitert Dokuwiki um viele Elemente. Es gibt funktional einige Dopplungen mit dem wrap-Plugin.

nicht kompatibel zu edittable
  • Editor: Im Editorfenster können über den -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 = „primary“ „success“ „info“ „warning“ „danger“ ohne „type“

  • Elemente mit Icons aus den Bibliotheken Font Awesom (fa) oder Material Design (mdi): Icons lassen sich je nach Element als Mediendatei {{fa>bicycle}} oder als Attribut icon=„mdi mdi-bike“ einfügen. Im Editor lassen sich die verfügbaren Icons über den -Button des icons-Plugin anzeige. Die „Glyphicons“ werden in Bootstrap zukünftig nicht mehr angeboten und sollten nicht verwendet werden.

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).

<text>

farbiger Text
farbiger Hintergrund 

<text type="danger"> farbiger Text </text>
<text background="primary"> farbiger Hintergrund</text>

<badge>

Zähler 15 

Zähler <badge>15</badge>

<label>

rotes Label 

<label type="danger"> rotes Label </label>

<lead>

großer Text 
<lead> großer Text </lead>

<page-header>

Text mit Zusatzabstand 

<page-header> Text mit Zusatzabstand </page-header>

<alert> 

<alert type="success" dismiss="true" icon="fa fa-warning">
**Warnung**
</alert>

<callout>

Info 

<callout type="info" icon="True"> Info </callout>

<jumbotron>

sehr großer Text 

<jumbotron> sehr großer Text </jumbotron>

<list-group>

  • Omne initium difficile est
  • Exercitatio artem parat
  • Sol lucet omnibus
<list-group>
  * Omne initium difficile est
  * Exercitatio artem parat
  * Sol lucet omnibus
</list-group>

<panel>

Panel Titel

Text in einem Panel 

<panel type="primary" title="Panel Titel">
Text in einem Panel
</panel>

<well>

Text in einem Rahmen 
<well> Text in einem Rahmen </well>

<carousel>

    Previous Next 
    <carousel>
<slide>{{:logoph.png?0x100|}}</slide>
<slide>{{:wiki:dokuwiki-128.png?0x100|}}</slide>
<slide>{{:bootstrap.png?0x100|}}</slide>
</carousel>

    <image>

    circleroudedthumbnail
    <image shape="circle">
{{:logophinvers.png?50  |circle}}
</image>
<image shape="rounded">
{{:logophinvers.png?50  |rouded}}
</image>
<image shape="thumbnail">
{{:logophinvers.png?50  |thumbnail}}
</image>

    <progress-bar>

    45% 45%
    <progress>
<bar value="45" type="danger" striped="true">45%</bar>
</progress>

    <thumbnail>

    Bild mit Rahmen und Bildtext
    <thumbnail>
{{  :logophinvers.png  }}
<caption>Bild mit Rahmen und Bildtext</caption>
</thumbnail>

    Reagieren auf Klick, Mouseover oder Scrollen

    <accordion>

    Titel 1 (klick)

    Text Abschnitt 1

    Titel 2 (klick)

    Text Abschnitt 2 

    <accordion>
<panel title="Titel 1 (klick)">
Text Abschnitt 1
</panel>
<panel title="Titel 2  (klick)">
Text Abschnitt 2
</panel>
</accordion>

    <affix>

    Fixiert je nach Scrollposition Elemente an einer festen Postion:
    scrollen, s. oben rechts.
    8-)
    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>

    <button>

    nach oben 
    <button type="success" size="lg" icon="fa fa-chevron-up">
[[bootstrap_wrapper| nach oben]]
</button>

    <collapse>

    Klick!
    verborgener Abschnitt
    <button collapse="beispiel">Klick!</button>
<collapse id="beispiel" collapsed="true">
verborgener Abschnitt
</collapse>

    <modal>

    Klick! 
    <btn modal="modal-demo">Klick!</btn>
<modal id="modal-demo" title="Modal">
Text in einem modalen Fenster
</modal>

    <nav> 

    <nav type="pills" stacked="true">
  * [[:start|{{fa>home}}]]
  * Sonderseiten
    * [[:header|header]]
    * [[:sidebar|sidebar]]
    * [[rightsidebar|rightsidebar]]
    * [[:footer|footer]]
</nav>

    <popover>

    Klick! 
    <popover placement="right" title="Popover" content="ein kleines Textfenster!" animation="true" delay="0" delay-show="0" delay-hide="0">
<button>Klick!</button>
</popover>

    <tooltip>

    Text mit Tooltip (mouseover) 
    Text mit 
<tooltip title="das ist ein Tooltip" placement="bottom">
Tooltip
</tooltip> (mouseover)
    ~~CLEARFIX~~ Ausrichtung unterhalb des letzten Elements
    ~~PAGEBREAK~~ Setenumbruch im Druck

    Die Wiki-Farm an der PH nutzt ein DokuWiki-Template mit Bootstrap. Bootstrap ist ein Framework, mit dem man 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, 3×4=12) und auf kleinen Bildschirmen mit 6 Rasterspalten (dann werden nur zwei Felder nebeneinander angezeigt, 2×6=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.


    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
    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

    Beispiel: (reagiert auf unterschiedliche Fenstergröße)

    sm=12 md=6 lg=8

    xs=12 sm=6 md=4 

    <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>