====== Bootstrap Wrapper Demo ======

{{template>meta:template:pageinfo#tpl
|desc=This page is used to demonstrate that the **bootstrape wrapper** is working properly.}}

==== Jumbotron ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Jumbotron
|code="
<jumbotron>
==== Hello, world! ====
This is a demo of jumbotron.
</jumbotron>
"}}

==== Accordion ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Accordion
|code="
<accordion>
<panel title="Try Clicking Here 1"> Content of pannel1 </panel>
<panel title="Try Clicking Here 2"> Content of pannel2 </panel>
<panel title="Try Clicking Here 3"> Content of pannel3 </panel>
</accordion>
"}}

==== Affix ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Affix
|desc=
"<callout type="info"> 
  * ''offset-top'' specifies how far down the page to scroll before the sticker is displayed. 
  * ''position-top'' Specifies the offset of the sticker's display position relative to the top of the window.
</callout>"
|code="
<affix offset-top="600" position-top="400" position-right="50">

<panel title="Affix">
Scroll the page!
<alert type="warning" icon="fa fa-commenting-o">**Look Here!**</alert>
</panel>

</affix>
"}}

==== Alert ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Alert
|desc="When the ''dismiss'' is true, it allows you to turn off the alert by clicking the <label type="danger" icon="fa fa-close"></label> icon. However, when you refresh this page, it will re-display."
|code="
<alert type="success">Success</alert>
<alert type="info">info</alert>
<alert type="warning" icon="fa fa-warning">warning</alert>
<alert type="danger" dismiss="true">danger</alert>
"}}

==== Badges ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Badges
|code="<badge>badge</badge>
<btn type="primary">Messages <badge>4</badge></btn>
"}}

==== Button ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Button
|code="
<btn type="default">Default</btn>
<btn type="primary">Primary</btn>
<btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn>
<btn type="primary" size="xs" block="true">Block level button</btn>
<btn type="info" size="xs">Info</btn>
<btn type="danger" size="sm">Danger</btn>
<btn type="warning" disabled="true">[[button]]</btn>
<btn type="link">Link</btn>
"}}

==== Callout ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Callout
|code="
<callout type="primary" icon="true"> primary </callout>
<callout type="success" icon="true"> success </callout>
<callout type="info" icon="true"> info </callout>
<callout type="warning" icon="true"> warning </callout>
<callout type="danger" icon="true"> danger </callout>
<callout icon="fa fa-user" color="blue" title="Custom color + icon"> Custom color + icon </callout>
"}}

==== Carousel ====
<row>
<col sm="6">
<thumbnail>
**Code**\\
<codeprism el=true  css=full>
<carousel interval="2000">

<slide>
{{:wiki:dokuwiki-128.png?nolink&200x200}}
<caption>
<text size="xx-large"> Dokuwiki </text>
</caption>
</slide>

<slide>
{{:wiki:screenshot_from_2023-02-22_23-33-08.png?nolink&200x200}}
<caption>
<text size="xx-large"> Huskiy </text>
</caption>
</slide>

</carousel>
</codeprism>
</thumbnail>
</col>

<col sm="6">
<thumbnail>
**Demo**\\
<carousel interval="2000">

<slide>
{{:wiki:dokuwiki-128.png?nolink&200x200}}
<caption>
<text size="xx-large"> Dokuwiki </text>
</caption>
</slide>

<slide>
{{:wiki:screenshot_from_2023-02-22_23-33-08.png?nolink&200x200}}
<caption>
<text size="xx-large"> Huskiy </text>
</caption>
</slide>

</carousel>
</thumbnail>
</col>
</row>

==== Collapse ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Collapse
|code="
<button collapse="foo1">Click Me</button>
<collapse id="foo1" collapsed="true"><well>**collapsed=true**</well></collapse>

<button collapse="foo2">Click Me</button>
<collapse id="foo2" collapsed="false"><well>**collapsed=false**</well></collapse>
"}}

==== Grid ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Grid
|desc="<callout  type="info">''row'' has the same function as ''grid''.</callout>"
|code="
**grid**
<grid>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
\\
</grid>
**row**
<row>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
</row>
"}}

==== Image ====
<row>
<col sm="6">
<thumbnail>
**Code**\\
<codeprism el=true  css=full>
<image shape="rounded">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>

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

<image shape="thumbnail">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>
</codeprism>

</thumbnail>
</col>

<col sm="6">
<thumbnail>
**Demo**\\
<image shape="rounded">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>

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

<image shape="thumbnail">
{{:wiki:dokuwiki-128.png?nolink&100|}}
</image>
</thumbnail>
</col>
</row>

==== Jumbotron ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Jumbotron
|code="
<jumbotron background=":pasted:20230421-104534.png" color="blue">
==== Hello, World! ====
</jumbotron>
"}}

==== Label ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Label
|code="
<label type="default">default</label>
<label type="primary">primary</label>
<label type="success">success</label>
<label type="info">info</label>
<label type="warning" icon="fa fa-warning">warning</label>
<label type="danger">danger</label>
"}}

==== Lead ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Lead
|code="
<lead>Make a paragraph stand out by ''lead'' syntax.</lead>
A paragraph without ''lead'' syntax.
"}}

==== List Group ====
<row>
<col sm="6">
<thumbnail>

**Code**\\
<codeprism el=true  css=full>
<list-group>
  * {{fa>home}} [[:start|Home Page]]
  * [[:wiki:welcome]] \\ DokuWiki Welcome
  * [[:wiki:syntax]] \\ DokuWiki Syntax
</list-group>
</codeprism>

</thumbnail>
</col>

<col sm="6">
<thumbnail>

**Demo**\\
<list-group>
  * {{fa>home}} [[:start|Home Page]]
  * [[:wiki:welcome]] \\ DokuWiki Welcome
  * [[:wiki:syntax]] \\ DokuWiki Syntax
</list-group>

</thumbnail>
</col>
</row>

==== Modal ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Modal
|code="
<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">...Content...</modal>
<modal id="modal-small" size="sm" title="Small modal">...Content...</modal>

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

==== Nav ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Nav
|code="
**stacked="false"**
<nav type="pills">
  * [[:start]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
\\
**stacked="true"**
<nav type="pills" stacked="true">
  * [[:start]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
\\
**tabs**
<tabs>
  * [[#tab-foo\|Foo]]
  * [[#tab-bar\|Bar]]

<pane id="tab-foo">
=== Foo ===
...
</pane>

<pane id="tab-bar">
=== Bar===
...
</pane>

</tabs>
"}}

==== Page header ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Page header
|code="
<page-header>
Example page header
</page-header>
Content... \\ \\

None page header \\
Content...
"}}

==== Panel ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Panel
|code="
<panel type="default" title="Panel title">Content</panel>

<panel type="primary" title="Panel title" subtitle="Panel subtitle">Content</panel>

<panel type="success" title="Panel title" no-body="true">
<panel-body>Content</panel-body>
^ # ^ First Name ^ Last Name ^
^ 1 \| Mark       \| Otto      \|
^ 2 \| Jacob      \| Thornton  \|
</panel>

<panel type="danger" title="Panel title" no-body="true">
<panel-body>Content</panel-body>
<list-group>
  * [[:start\|Home Page]]
  * [[:wiki:welcome\|Dokuwiki]]
</list-group>
</panel>

<panel type="warning" title="Panel title" icon="fa fa-warning">Content</panel>
"}}

==== Popover ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Popover
|code="
<popover title="Title" content="Content"><btn type="danger" size="lg">Click to toggle popover</btn></popover>

<popover placement="top" content="Content..." delay-hide="2"><btn>Popover on top</btn></popover>

<popover placement="bottom" content="Content..."><btn>Popover on bottom</btn></popover>

<popover placement="left" content="Content..."><btn>Popover on left</btn></popover>

<popover placement="right" trigger="focus" content="Content..." delay-hide="2"><btn>Popover on right</btn></popover>

<popover trigger="focus" title="**Dismissible** popover" content="\\ **Content...** \\"><btn type="danger" size="lg">Dismissible popover</btn></popover>

<popover html="true" title="**Dismissible** popover" content="\\ **Content...** \\">Dismissible popover</popover>
"}}

==== Progress ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Progress
|code="
<progress>
<bar value="60"></bar>
</progress>

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

<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" 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 ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Text
|code="
<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"> muted </text>
<text type="primary"> primary </text>
<text type="success">success </text>
<text type="info"> info </text>
<text type="warning"> warning </text>
<text type="danger"> danger </text>

<text background="primary"> primary </text>
<text background="success"> success </text>
<text background="info"> info </text>
<text background="warning"> warning </text>
<text background="danger"> danger </text>
"}}

==== Thumbnail ====
<row>
<col sm="6">
<thumbnail>
**Code**\\
<codeprism el=true  css=full>

<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. 
</caption>
</thumbnail>
</col>

<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. 
</caption>
</thumbnail>
</col>

</grid>
</codeprism>

</thumbnail>
</col>

<col sm="6">
<thumbnail>
**Demo**\\

<grid>

<col xs="6">
<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. 
</caption>
</thumbnail>
</col>

<col xs="6">
<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. 
</caption>
</thumbnail>
</col>

</grid>

</thumbnail>
</col>

</row>

==== Tooltip ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Tooltip 
|code="
<tooltip title="A simple to use and highly versatile Open Source wiki software that doesn't require a database">DokuWiki</tooltip>, Yes!
"}}

==== Well ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=Well
|code="
<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>
"}}

==== Wrapper ====

{{template>meta:template:bootstrapwrapper#tpl
|wrap=wrapper
|code="
<wrapper screen="true" print="true">abc</wrapper>
"}}