bootstrap wrapper, bootswrapper
Erweitert Dokuwiki um viele Elemente. Es gibt funktional einige Dopplungen mit dem wrap-Plugin.
- 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 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).
Textformatierung
farbiger Text
farbiger Hintergrund
<text type="danger"> farbiger Text </text> <text background="primary"> farbiger Hintergrund</text>
Zähler 15
Zähler <badge>15</badge>
rotes Label
<label type="danger"> rotes Label </label>
<lead> großer Text </lead>
Text mit Zusatzabstand
<page-header> Text mit Zusatzabstand </page-header>
Boxen
<alert type="success" dismiss="true" icon="fa fa-warning"> **Warnung** </alert>
<callout type="info" icon="True"> Info </callout>
sehr großer Text
<jumbotron> sehr großer Text </jumbotron>
<list-group> * Omne initium difficile est * Exercitatio artem parat * Sol lucet omnibus </list-group>
Panel Titel
Text in einem Panel
<panel type="primary" title="Panel Titel"> Text in einem Panel </panel>
<well> Text in einem Rahmen </well>
Grafiken
<carousel> <slide>{{:logoph.png?0x100|}}</slide> <slide>{{:wiki:dokuwiki-128.png?0x100|}}</slide> <slide>{{:bootstrap.png?0x100|}}</slide> </carousel>
<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 value="45" type="danger" striped="true">45%</bar> </progress>
<thumbnail> {{ :logophinvers.png }} <caption>Bild mit Rahmen und Bildtext</caption> </thumbnail>
Interaktive Elemente
Reagieren auf Klick, Mouseover oder Scrollen
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>
scrollen, s. oben rechts.
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 type="success" size="lg" icon="fa fa-chevron-up"> [[bootstrap_wrapper| nach oben]] </button>
<button collapse="beispiel">Klick!</button> <collapse id="beispiel" collapsed="true"> verborgener Abschnitt </collapse>
<btn modal="modal-demo">Klick!</btn> <modal id="modal-demo" title="Modal"> Text in einem modalen Fenster </modal>
- Sonderseiten
<nav type="pills" stacked="true"> * [[:start|{{fa>home}}]] * Sonderseiten * [[:header|header]] * [[:sidebar|sidebar]] * [[rightsidebar|rightsidebar]] * [[:footer|footer]] </nav>
<popover placement="right" title="Popover" content="ein kleines Textfenster!" animation="true" delay="0" delay-show="0" delay-hide="0"> <button>Klick!</button> </popover>
Text mit <tooltip title="das ist ein Tooltip" placement="bottom"> Tooltip </tooltip> (mouseover)
Makros
~~CLEARFIX~~ | Ausrichtung unterhalb des letzten Elements |
~~PAGEBREAK~~ | Setenumbruch im Druck |
Bootstrap Grid, responsiv
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 |
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>