{{tag>dokuwiki plugins bootstrap_wrapper}}
==== Original Site ====
  * https://www.dokuwiki.org/plugin:bootswrapper
  * http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper
==== Macros ====
==== Accordion ====

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

==== Affix ====
<affix offset-top="50" position-top="100" position-right="20">
<panel title="Affix">
Scroll the page!
</panel>
</affix>
==== 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>

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

==== Badges ====
Inbox <badge>42</badge>
 
<btn type="primary">Messages <badge>4</badge></btn>

==== Buttons ====
<btn type="default">Default</btn>
<btn type="primary">Primary</btn>
<btn type="success">Success</btn>
<btn type="info">Info</btn>
<btn type="warning">Warning</btn>
<btn type="danger">Danger</btn>
<btn type="link">Link</btn>

<btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn>

<btn type="primary" size="lg">Large button</btn>
<btn type="default" size="lg">Large button</btn>
 
<btn type="primary">Default button</btn>
<btn type="default">Default button</btn>
 
<btn type="primary" size="sm">Small button</btn>
<btn type="default" size="sm">Small button</btn>
 
<btn type="primary" size="xs">Extra small button</btn>
<btn type="default" size="xs">Extra small button</btn>

<btn type="primary" size="lg" block="true">Block level button</btn>
<btn type="default" size="lg" block="true">Block level button</btn>

<btn type="primary">[[button]]</btn> <btn type="default">[[panel]]</btn>
<btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn>

==== Callouts ====
<callout>
=== Default Callout ===
This is a default callout.
</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>

<callout icon="fa fa-user"> [...] </callout>
<callout type="success" icon="fa fa-plus"> [...] </callout>

<callout icon="fa fa-user" color="blue" title="Custom color + icon"> [...] </callout>

==== Carousel ====
<carousel>
{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}
{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}
{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}
</carousel>

<carousel>
<slide>{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}</slide>
<slide>{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}</slide>
<slide>{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}</slide>
</carousel>

<carousel>
<slide>
{{:wiki:plugin:bootswrapper:image-placeholder-big.jpg?nolink|}}
<caption>
=== First slide label ===
Nulla vitae elit libero, a pharetra augue mollis interdum.
</caption>
</slide>
[...]
</carousel>


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


==== Grids ====
<grid>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
</grid>

<grid>
<col xs="12" sm="6" lg="8">.col-xs-12 .col-sm-6 .col-lg-8</col>
<col xs="6" lg="4">.col-xs-6 .col-lg-4</col>
</grid>


==== Image ====
<image shape="rounded">
{{:wiki:plugin:bootswrapper:image-placeholder.png?nolink&100|}}
</image>

<image shape="circle">
{{:wiki:plugin:bootswrapper:image-placeholder.png?nolink&100|}}
</image>

<image shape="thumbnail">
{{:wiki:plugin:bootswrapper:image-placeholder.png?nolink&100|}}
</image>

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

<jumbotron background=":wiki:plugin:bootswrapper:35723-fielx.jpg" color="#fff">
====== Lorem ipsum! ======
 
Lorem ipsum dolor sit amet, [...]
</jumbotron>


==== Labels ====
<label type="default">default</label>
<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>


==== Lead ====
<lead>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</lead>


==== List Group ====
<list-group>
  * Cras justo odio
  * Dapibus ac facilisis in
  * Morbi leo risus
  * Porta ac consectetur ac
  * Vestibulum at eros
</list-group>

<list-group>
  * Cras justo odio <badge>14</badge>
  * Dapibus ac facilisis in <badge>2</badge>
  * Morbi leo risus <badge>1</badge>
</list-group>

<list-group>
  * [[.:]]
  * [[:wiki:welcome]]
  * [[:wiki:syntax]]
</list-group>

<list-group>
  * [[.:]] \\ Bootstrap samples
  * [[:wiki:welcome]] \\ DokuWiki Welcome
  * [[:wiki:syntax]] \\ DokuWiki Syntax
</list-group>

<list-group>
  * {{fa>home}} [[:start|Home-Page]]
</list-group>

==== Modal ====
<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
 
<modal id="modal-demo" title="Modal title">
=== Text in a modal ===
 
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. [...]
</modal>

<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>
 
<modal id="modal-large" size="lg" title="Large modal">...</modal>
<modal id="modal-small" size="sm" title="Small modal">...</modal>

<btn type="primary" modal="modal-no-fade">No fade animation</btn>
 
<modal id="modal-no-fade" fade="false" title="No fade animation">...</modal>

<btn type="primary" modal="modal-remote">Welcome to DokuWiki!</btn>
 
<modal id="modal-remote" remote=":wiki:welcome"></modal>

==== Navs (Tabs & Pills) ====
<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>

<nav type="pills" stacked="true">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>

<nav type="pills" justified="true">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>

<nav type="tabs" justified="true">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>

<tabs>
  * {{fa>home}} DokuWiki
    * [[wiki:welcome]]
    * [[wiki:syntax]]
</tabs>

<tabs>
  * File
    * {{fa>file-o?fw}} [[#new|New]]
    * {{fa>folder-open?fw}} [[#open|Open]]
    * {{fa>print?fw}} [[#print|Print]]
    * {{fa>close?fw}} [[#close|Close]]
  * ?
    * {{fa>info?fw}} [[#about|About...]]
</tabs>

<tabs>
  * [[#tab-foo|Foo]]
  * [[#tab-bar|Bar]]
 
<pane id="tab-foo">
=== Foo ===
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pane>
 
<pane id="tab-bar">
=== Bar ===
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pane>
 
</tabs>

<pane id="tab-bar">
{{page>:wiki:syntax#Tables&inline}}
</pane>


==== Page header ====
<page-header>
===== Example page header =====
</page-header>
 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


==== Panels ====
<panel type="default">Basic panel example</panel>

<panel type="default" title="Panel title">
Panel content
</panel>
<panel type="default" title="Panel title" subtitle="Panel subtitle">
Panel content
</panel>
<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>

<panel type="default" title="Panel title" no-body="true">
<panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body>
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>

<panel type="default" title="Panel title" no-body="true">
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>

<panel type="default" title="Panel title" no-body="true">
<panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body>
<list-group>
  * Cras justo odio
  * Dapibus ac facilisis in
  * Morbi leo risus
  * Porta ac consectetur ac
  * Vestibulum at eros
</list-group></panel>

<panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home">
Panel content
</panel>

==== Popovers ====
<popover title="Popover title" content="And here's some amazing content. It's very engaging. Right?"><btn type="danger" size="lg">Click to toggle popover</btn></popover>

<popover placement="right" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on right</btn>
</popover>
 
<popover placement="top" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on top</btn>
</popover>
 
<popover placement="bottom" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on bottom</btn>
</popover>
 
<popover placement="left" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on left</btn>
</popover>

<popover trigger="focus" title="Dismissible popover" content="And here's some amazing content. It's very engaging. Right?"><btn type="danger" size="lg">Dismissible popover</btn></popover>

<popover html="true" title="**Dismissible** popover" content="And here's some amazing content. \\ **It's very engaging**. \\ Right?">Dismissible Popover</popover>


==== Progress Bar ====
<progress>
<bar value="60"></bar>
</progress>

<progress>
<bar value="60" showvalue="true"></bar>
</progress>

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

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


<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>


==== Text ====
<TEXT align="left">Left aligned text.</TEXT>
<TEXT align="center">Center aligned text.</TEXT>
<TEXT align="right">Right aligned text.</TEXT>
<TEXT align="justify">Justified text.</TEXT>
<TEXT align="nowrap">No wrap text.</TEXT>

<text transform="lowercase">Lowercased text.</text>
<text transform="uppercase">Uppercased text.</text>
<text transform="capitalize">Capitalized text.</text>

<text type="muted"> [...] </text>
<text type="primary"> [...] </text>
<text type="success"> [...] </text>
<text type="info"> [...] </text>
<text type="warning"> [...] </text>
<text type="danger"> [...] </text>

<text background="primary"> [...] </text>
<text background="success"> [...] </text>
<text background="info"> [...] </text>
<text background="warning"> [...] </text>
<text background="danger"> [...] </text>


==== Thumbnails ====
<grid>
...
<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
</thumbnail>
</col>
...
</grid>

<grid>
...
<col xs="6" md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
<caption>
=== DokuWiki ====
 
//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in access controls and authentication connectors make DokuWiki especially useful in the enterprise context and the large number of plugins contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.//
</caption>
</thumbnail>
...
</col>
</grid>


==== Tooltips ====

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


==== Wells ====
<well>Look, I'm in a well!</well>
<well size="sm">Look, I'm in a small well!</well>
<well size="lg">Look, I'm in a large well!</well>