目次

, ,

【Dokuwiki】Bootstrap Wrapper Plugin のデモ

DokuWiki の Bootstrap Wrapper Plugin の機能を試してみるページです。

Jumbotron

Wiki ソース

<jumbotron>
これはサンプルです。This is a sample.
</jumbotron>
<jumbotron background=":dokuwiki:pasted:20230804-102847.png" color="#fff">
画像を背景にします。
</jumbotron>

表示結果

これはサンプルです。This is a sample.

画像を背景にします。

Buttons

Wiki ソース

<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="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">[[:dokuwiki:bootswrapper#buttons|Enabled]]</btn> <btn type="default">[[:dokuwiki:bootswrapper#buttons|Enabled]]</btn>

<btn type="primary" disabled="true">[[:dokuwiki:bootswrapper#buttons|Disabled]]</btn> <btn type="default" disabled="true">[[:dokuwiki:bootswrapper#buttons|Disabled]]</btn>

<btn type="success" size="lg" icon="fa fa-home">[[:start|ホーム]]</btn>

表示結果

Default Primary Success Info Warning Danger Link

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Block level button Block level button

Enabled Enabled

Disabled Disabled

ホーム

Alerts

Wiki ソース

<alert type="success">成功です</alert>
<alert type="info" dismiss="true" icon="fa fa-info-circle">情報です</alert>
<alert type="warning" dismiss="true" icon="fa fa-exclamation-triangle">**警告!!** サンプルです</alert>
<alert type="danger">危険です</alert>

表示結果

Text

Wiki ソース

<TEXT align="left">左寄せのテキスト</TEXT>
<TEXT align="center">中央寄せのテキスト</TEXT>
<TEXT align="right">右寄せのテキスト</TEXT>
<TEXT align="justify">両端揃えのテキスト</TEXT>
<TEXT align="nowrap">折り返しなしのテキスト</TEXT>
<text transform="lowercase">Lowercased text.</text>
<text transform="uppercase">Uppercased text.</text>
<text transform="capitalize">Capitalized text.</text>
<text type="muted">type="muted" サンプルです。</text>
<text type="primary">type="primary" サンプルです。</text>
<text type="success">type="success" サンプルです。</text>
<text type="info">type="info" サンプルです。</text>
<text type="warning">type="warning" サンプルです。</text>
<text type="danger">type="danger" サンプルです。</text>
<text background="primary">background="primary" サンプルです。</text>
<text background="success">background="success" サンプルです。</text>
<text background="info">background="info" サンプルです。</text>
<text background="warning">background="warning" サンプルです。</text>
<text background="danger">background="danger" サンプルです。</text>
<TEXT size="xx-small">size="xx-small" サンプルです。</TEXT>
<TEXT size="x-small">size="x-small" サンプルです。</TEXT>
<TEXT size="small">size="small" サンプルです。</TEXT>
<TEXT size="medium">size="medium" サンプルです。</TEXT>
<TEXT size="large">size="large" サンプルです。</TEXT>
<TEXT size="x-large">size="x-large" サンプルです。</TEXT>
<TEXT size="xx-large">size="xx-large" サンプルです。</TEXT>
<TEXT size="smaller">size="smaller" サンプルです。</TEXT>
<TEXT size="larger">size="larger" サンプルです。</TEXT>
<TEXT size="300%">size="300%" サンプルです。</TEXT>
<TEXT size="3em">size="3em" サンプルです。</TEXT>
<TEXT size="30px">size="30px" サンプルです。</TEXT>

表示結果

左寄せのテキスト
中央寄せのテキスト
右寄せのテキスト
両端揃えのテキスト
折り返しなしのテキスト
Lowercased text. Uppercased text. Capitalized text. type=“muted” サンプルです。 type=“primary” サンプルです。 type=“success” サンプルです。 type=“info” サンプルです。 type=“warning” サンプルです。 type=“danger” サンプルです。 background=“primary” サンプルです。 background=“success” サンプルです。 background=“info” サンプルです。 background=“warning” サンプルです。 background=“danger” サンプルです。
size=“xx-small” サンプルです。
size=“x-small” サンプルです。
size=“small” サンプルです。
size=“medium” サンプルです。
size=“large” サンプルです。
size=“x-large” サンプルです。
size=“xx-large” サンプルです。
size=“smaller” サンプルです。
size=“larger” サンプルです。
size=“300%” サンプルです。
size=“3em” サンプルです。
size=“30px” サンプルです。

Tooltips

Wiki ソース

マウスを<tooltip title="これはツールチップです。">ここ</tooltip>にあてるとツールチップが表示されます。\\
<tooltip title="**太字** //斜体// __下線__" html="true">ツールチップ内の文字の修飾</tooltip>もできる。\\

表示結果

マウスをここにあてるとツールチップが表示されます。
ツールチップ内の文字の修飾もできる。

Grids

Wiki ソース

<grid>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
</grid>
<row>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
</row>
<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-sm-6
.col-sm-6
.col-sm-6
.col-sm-6
.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4

Thumbnails

Wiki ソース

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

これはサンプルです。

Panels

Wiki ソース

<panel type="default">基本のパネル</panel>
<panel type="default" title="タイトルとアイコン" icon="fa fa-home">つきのパネル</panel>
<panel type="default" title="タイトルと" subtitle="サブタイトル">つきのパネル</panel>
<panel type="primary" title="タイトル">type="primary"</panel>
<panel type="success" title="タイトル">type="success"</panel>
<panel type="info" title="タイトル">type="info"</panel>
<panel type="warning" title="タイトル">type="warning"</panel>
<panel type="danger" title="タイトル">type="danger"</panel>
<panel type="default" title="Panel title" no-body="true">
<panel-body>no-body="true" あり</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">
<panel-body>no-body="true" なし</panel-body>
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>

表示結果

基本のパネル

タイトルとアイコン

つきのパネル

タイトルと

サブタイトル

つきのパネル

タイトル

type=“primary”

タイトル

type=“success”

タイトル

type=“info”

タイトル

type=“warning”

タイトル

type=“danger”

Panel title

no-body=“true” あり
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Panel title

no-body=“true” なし
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Wells

Wiki ソース

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

表示結果

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

Labels

Wiki ソース

  * <LABEL type="default">type="default"</LABEL>
  * <LABEL type="primary">type="primary"</LABEL>
  * <LABEL type="success">type="success"</LABEL>
  * <LABEL type="info" icon="fa fa-info-circle">type="info"</LABEL>
  * <LABEL type="warning" icon="fa fa-exclamation-triangle">type="warning"</LABEL>
  * <LABEL type="danger">type="danger"</LABEL>

表示結果

  • type=“default”
  • type=“primary”
  • type=“success”
  • type=“info”
  • type=“warning”
  • type=“danger”

Wiki ソース

<nav type="tabs">
  * [[:start]]
  * [[:playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
<nav type="pills">
  * [[:start]]
  * [[:playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
<nav type="pills" stacked="true">
  * [[:start]]
  * [[:playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
<nav type="pills" justified="true">
  * [[:start]]
  * [[:playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
<nav type="tabs" justified="true">
  * [[:start]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
<tabs fade="true">
  * [[#tab-foo|Foo]]
  * [[#tab-bar|Bar]]
 
<pane id="tab-foo">
=== Foo ===
タブを切り替える時、フェードエフェクトつきで切り替わる
</pane>
 
<pane id="tab-bar">
=== Bar ===
タブを切り替える時、フェードエフェクトつきで切り替わる
</pane>
 
</tabs>

Wiki ソース

<page-header>Example page header</page-header>

表示結果

Lead

Wiki ソース

<lead>これはサンプルです。</lead>

表示結果

これはサンプルです。

Badges

Wiki ソース

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

表示結果

Inbox 42 Messages 4

List Group

Wiki ソース

<list-group>
  * アイテム1
  * アイテム2
  * アイテム3
</list-group>
<list-group>
  * アイテム1<badge>14</badge>
  * アイテム2<badge>2</badge>
  * アイテム3<badge>1</badge>
</list-group>
<list-group>
  * [[.:]]
  * [[:wiki:welcome]]
  * [[:wiki:syntax]]
</list-group>
<list-group>
  * [[.:]] \\ あいうえおあいうえおあいうえお
  * [[:wiki:welcome]] \\ かきくけこかきくけこかきくけこ
  * [[:wiki:syntax]] \\ さしすせそさしすせそさしすせそ
</list-group>

表示結果

  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム114
  • アイテム22
  • アイテム31

Progress Bars

Wiki ソース

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

表示結果

60%
60%
40%
20%
60%
80%
40%
20%
60%
80%
45%

Affix

Wiki ソース

<affix offset-top="50" position-top="100" position-right="20">
<panel title="Affix">
文章が指定した位置に固定表示されます。
</panel>
</affix>

表示結果

Affix

文章が指定した位置に固定表示されます。

Wiki ソース

<carousel interval="5000" keyboard="true" pause="hover" wrap="true">
<slide>
{{:dokuwiki:pasted:20230804-142955.png?nolink|}}
<caption>
=== 最初のスライド ===
これはサンプルです。
</caption>
</slide>
<slide>
<caption>
=== 2枚目のスライド ===
これはサンプルです。
</caption>
{{:dokuwiki:pasted:20230804-142955.png?nolink|}}
</slide>
<slide>
<caption>
=== 3枚目のスライド ===
これはサンプルです。
</caption>
{{:dokuwiki:pasted:20230804-142955.png?nolink|}}
</slide>
</carousel>

表示結果

Accordion

Wiki ソース

<accordion>
<panel title="Collapsible Group Item #1">パネル1の内容</panel>
<panel title="Collapsible Group Item #2">パネル2の内容</panel>
<panel title="Collapsible Group Item #3">パネル3の内容</panel>
</accordion>

表示結果

Collapsible Group Item #1

パネル1の内容

Collapsible Group Item #2

パネル2の内容

Collapsible Group Item #3

パネル3の内容

Callouts

Wiki ソース

<callout type="default" title="Default Callout">This is a default callout.</callout>
<callout type="primary" title="Primary Callout">This is a primary callout.</callout>
<callout type="success" title="Success Callout">This is a success callout.</callout>
<callout type="info" title="Info Callout">This is a info callout.</callout>
<callout type="warning" title="Warning Callout">This is a warning callout.</callout>
<callout type="danger" title="Danger Callout">This is a danger callout.</callout>

表示結果

Default Callout

This is a default callout.

Primary Callout

This is a primary callout.

Success Callout

This is a success callout.

Info Callout

This is a info callout.

Warning Callout

This is a warning callout.

Danger Callout

This is a danger callout.

Wiki ソース

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

表示結果

Large modal Small modal

Popover

Wiki ソース

<popover title="Popover タイトル" content="これはサンプルです。"><btn type="danger" size="lg">トグルボタン</btn></popover>

表示結果

トグルボタン

参考