Inhaltsverzeichnis

Syntax

Bootstrap Syntax

Syntax und Pluginentwicklung von Giuseppe Di Terlizzi

Accordion

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

[…]

Collapsible Group Item #3

[…]

<accordion>
<panel title="Collapsible Group Item #1">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</panel>
<panel title="Collapsible Group Item #2"> [...] </panel>
<panel title="Collapsible Group Item #3"> [...] </panel>
</accordion>

Alerts

<alert type="success">...</alert>
<alert type="info">...</alert>
<alert type="warning">...</alert>
<alert type="danger">...</alert>
<alert type="warning" dismiss="true">**Warning!** Better check yourself, you're not looking too good.</alert>

Callout

Default Callout

This is a default callout.
<callout title="Default Callout">
This is a default callout.
</callout>
[…]
[…]
[…]
[…]
[…]
<callout type="primary" icon="true"> [...] </callout>
<callout type="success" icon="true"> [...] </callout>
<callout type="info" icon="true"> [...] </callout>
<callout type="warning" icon="true"> [...] </callout>
<callout type="danger" icon="true"> [...] </callout>

Collapse

Click Me

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<button collapse="foo">Click Me</button>
 
<collapse id="foo" collapsed="true"><well>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</well></collapse>

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<jumbotron>
====== Hello, world! ======
 
This is a simple hero unit, a simple jumbotron-style 
component for calling extra attention to featured
content or information.
 
<btn type="primary">[[#|Learn more]]</btn>
</jumbotron>
<nav type="tabs">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
<nav type="pills">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
Attribute Default Value Allowed Values Description
type pills tabs, pills Type of nav
stacked optional true Stacked nav items
justified optional true Justify nav items
fade optional true Enable fade effect on tabs

Panels

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<panel type="primary" title="Panel title">Panel content</panel>
<panel type="success" title="Panel title">Panel content</panel>
<panel type="info" title="Panel title">Panel content</panel>
<panel type="warning" title="Panel title">Panel content</panel>
<panel type="danger" title="Panel title">Panel content</panel>

Fortschritt

40%
20%
60%
80%
45%
<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>
 
<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>
 
<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>

<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>

Tooltips

Lorem ipsum dolor sit amet…

<tooltip title="Sample Text" location="bottom">Lorem ipsum</tooltip> dolor sit amet...