Bootstrap Wrapper Demo

This page is used to demonstrate that the bootstrape wrapper is working properly.

Jumbotron

Code

<jumbotron>
==== Hello, world! ====
This is a demo of jumbotron.
</jumbotron>

Demo

Hello, world!

This is a demo of jumbotron.

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>

Demo

Try Clicking Here 1

Content of pannel1

Try Clicking Here 2

Content of pannel2

Try Clicking Here 3

Content of pannel3

Affix

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>

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

Demo

Affix

Scroll the page!

Alert

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>
When the dismiss is true, it allows you to turn off the alert by clicking the icon. However, when you refresh this page, it will re-display.

Demo

Badges

Code

<badge>badge</badge>
<btn type="primary">Messages <badge>4</badge></btn>

Demo
badge Messages 4

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>

Demo

Default Primary Welcome to your new DokuWiki Block level button Info Danger button Link

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>

Demo

primary
success
info
warning
danger

Custom color + icon

Custom color + icon

Carousel

Code
<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>
Demo
    Dokuwiki
    Huskiy
    Previous Next

    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>

    Demo

    Click Me

    collapsed=true

    Click Me

    collapsed=false

    Grid

    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>

    row has the same function as grid.

    Demo

    grid

    .col-sm-6
    .col-sm-6


    row

    .col-sm-6
    .col-sm-6

    Image

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

    Jumbotron

    Code

    <jumbotron background=":pasted:20230421-104534.png" color="blue">
==== Hello, World! ====
</jumbotron>

    Demo

    Hello, World!

    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>

    Demo

    default primary success info warning danger

    Lead

    Code

    <lead>Make a paragraph stand out by ''lead'' syntax.</lead>
A paragraph without ''lead'' syntax.

    Demo

    Make a paragraph stand out by lead syntax.

    A paragraph without lead syntax.

    List Group

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

    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>

    Demo

    Large modal Small modal

    Welcome to DokuWiki!

    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>

    Demo

    stacked="false"


    stacked="true"


    tabs

    Foo

    …

    Bar

    …

    Page header

    Code

    <page-header>
Example page header
</page-header>
Content... \\ \\

None page header \\
Content...

    Demo

    Example page header

    Content…

    None page header
    Content…

    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>

    Demo

    Panel title

    Content

    Panel title

    Panel subtitle

    Content

    Panel title

    Content
    # First Name Last Name
    1 Mark Otto
    2 Jacob Thornton

    Panel title

    Content

    Panel title

    Content

    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>

    Demo

    Click to toggle popover

    Popover on top

    Popover on bottom

    Popover on left

    Popover on right

    Dismissible popover

    Dismissible popover

    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>

    Demo

    60%
    60%
    40%
    20%
    35%
    20%
    10%

    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>

    Demo

    Left aligned text.
    Center aligned text.
    Right aligned text.
    Justified text.
    No wrap text.

    Lowercased text. Uppercased text. Capitalized text.

    muted primary success info warning danger

    primary success info warning danger

    Thumbnail

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

    DokuWiki

    DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database.

    DokuWiki

    DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database.

    Tooltip

    Code

    <tooltip title="A simple to use and highly versatile Open Source wiki software that doesn't require a database">DokuWiki</tooltip>, Yes!

    Demo

    DokuWiki, Yes!

    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>

    Demo

    Look, I'm in a well!
    Look, I'm in a small well!
    Look, I'm in a large well!

    Wrapper

    Code

    <wrapper screen="true" print="true">abc</wrapper>

    Demo

    abc