This is an old revision of the document!


Bootstrap Wrapper Plugin

Useful plugin for add several Bootstrap components (Jumbotron, Alert, Panel, …) to DokuWiki especially in combination with a Bootstrap template (Bootstrap3).

For more information see Bootstrap Wrapper Plugin page on DokuWiki.org!

Syntax

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

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

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.

Link

Attribute Description
background Background URL or DokuWiki Media link (eg :wiki:logo.png)
color Color name or HEX (eg. #ffffff) of text
<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.

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.

Make a paragraph stand out by <lead> syntax.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<lead>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</lead>
<nav type="tabs">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>



Instead of <nav type="tabs"> you can use <tabs> alias.


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



Instead of <nav type="pills"> you can use <pills> alias.


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


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.

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.


Tab Pane and Include Plugin

Use Include Plugin with inline flag to prevent unexpected behavior.

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

[…] Don't close/open sections when including a page. This flag should be used when the include syntax is used inside other syntax elements like lists or tables or inside other plugin syntax. […]
(see plugin:include)

Note for TOC

I suggest to add ~~NOTOC~~ because the TOC is displayed between the tab bar and the content.


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

Basic panel example


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

Panel title

Panel content


<panel type="default" title="Panel title">
Panel content
</panel>

Panel title

Panel subtitle

Panel content


<panel type="default" title="Panel title" subtitle="Panel subtitle">
Panel content
</panel>

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

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>

Add any non-bordered table within a panel for a seamless design. If there is a no-body attribute, we add an extra border to the top of the table for separation.

Panel title

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.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter


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

If there is no panel body, the component moves from panel header to table without interruption.

Panel title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter


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

Easily include full-width list groups within any panel.

Panel title

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.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros


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

Panel subtitle

Panel content


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

Attributes

Attribute Default Value Allowed Values Description
type default default, primary, success, info, warning, danger Type of panel
title optional Title of panel
subtitle optional Subtitle of panel
icon optional Font icon class (eg. Glyphicon or Font-Awesome)
no-body optional Don't add a panel body. Useful to add other particular tags (or tables) inside a panels

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

<alert type="success">...</alert>
<alert type="info">...</alert>
<alert type="warning">...</alert>
<alert type="danger">...</alert>

Dismissible alerts

Build on any alert by adding an optional dismiss option.

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

Alert with icon

<alert type="warning" dismiss="true" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert>
Name Default Values Description
type info success info warning danger Type of alert
dismiss optional true Create a dismissible alert
icon optional Font icon class (eg. Glyphicon or Font-Awesome)
This tag have two version (lowercase and uppercase).
  • The lowercase version <label> create a inline element (<span>).
  • The uppercase version <LABEL> create a block element (<div>).

See the samples.

default primary success info warning danger

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

Attributes

Attribute Default Value Allowed Values Description
type info default, primary, success, info, warning, danger Type of label
icon optional Font icon class (eg. Glyphicon or Font-Awesome)
This syntax have two version (lowercase and uppercase).
  • The lowercase version <text> create a inline element (eg. <span>).
  • The uppercase version <TEXT> create a block element (eg. <div>).

See the samples.

Alignment

Easily realign text to components with text alignment attribute.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

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


Transformation

Transform text in components with text capitalization attribute.

Lowercased text.

Uppercased text.

Capitalized text.


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


Contextual colors

Convey meaning through color with a handful of emphasis utility attributes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


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


Contextual backgrounds

Similar to the contextual text color attributes, easily set the background of an element to any contextual attribute. Anchor components will darken on hover, just like the text attributes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


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


Attribute Allowed Values Description
type muted primary success info warning danger Contextual color of text
background primary success info warning danger Contextual background of text
align left right center, justify nowrap Text align
transform lowercase uppercase capitalize Text transformation
size medium xx-small x-small small large x-large xx-large smaller larger length (%, em, px, etc.) Text sizes
<tooltip title="Sample Text" location="bottom">Lorem ipsum</tooltip> dolor sit amet...

Lorem ipsum dolor sit amet…

Attributes

Attribute Default Value Allowed Values Description
title required Title of tooltip
location top top, bottom, left, right, auto Location of tooltip
html false true, false Enable DokuWiki syntax inside the title


Note: Instead of <grid> you can use <row> alias.

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



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



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



.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4



Attributes for "col"

Attribute Description
xs Column size (1 ~ 12)
sm Column size (1 ~ 12)
lg Column size (1 ~ 12)
md Column size (1 ~ 12)

Basic usage

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


Custom content

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


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.

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.

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.

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.

Use the well as a simple effect on an element to give it an inset effect.

Default

<well>Look, I'm in a well!</well>


Small size

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


Large size

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


Attribute Default Value Allowed Values
size optional sm lg Size of well
Default Standard button
Primary Provides extra visual weight and identifies the primary action in a set of buttons
Success Indicates a successful or positive action
Info Contextual button for informational alert messages
Warning Indicates caution should be taken with this action
Danger Indicates a dangerous or potentially negative action
Link Deemphasize a button by making it look like a link while maintaining button behavior


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

Welcome to your new DokuWiki


Sizes

Fancy larger or smaller buttons? Add size=“lg”, size=“sm”, or size=“xs” for additional sizes.

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button


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


Block

Create block level buttons—those that span the full width of a parent – by adding block=“true” option.

Block level button
Block level button


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


Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Bootstrap Wrapper Plugin detect automatically the active state of current page.

Buttons Panels

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


Disabled state

Make buttons look unclickable by fading them back with opacity.

Buttons Panels

<btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn>
Attribute Default Value Allowed Values Description
type default default primary success info warning danger link Type of button
icon optional Font icon class (eg. Glyphicon or Font-Awesome)
size optional lg sm Button size
block optional true false Block level buttons
collapse optional Target element selector to collapse (see Collapse)
disabled optional true false Disable the button
modal optional Modal ID (see Modal)
  • wiki/plugin/bootswrapper.1436733673.txt.gz
  • Last modified: 4 years ago
  • by Giuseppe Di Terlizzi