目次

, ,

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

表示結果

Foo

タブを切り替える時、フェードエフェクトつきで切り替わる

Bar

タブを切り替える時、フェードエフェクトつきで切り替わる

Page header

Wiki ソース 

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

表示結果

Example 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>
  * アイテム１
  * アイテム２
  * アイテム３
</list-group>
<list-group>
  * アイテム１<badge>14</badge>
  * アイテム２<badge>2</badge>
  * アイテム３<badge>1</badge>
</list-group>
<list-group>
  * [[.:]]
  * [[:wiki:welcome]]
  * [[:wiki:syntax]]
</list-group>
<list-group>
  * [[.:]] \\ あいうえおあいうえおあいうえお
  * [[:wiki:welcome]] \\ かきくけこかきくけこかきくけこ
  * [[:wiki:syntax]] \\ さしすせそさしすせそさしすせそ
</list-group>

表示結果

  • アイテム１
  • アイテム２
  • アイテム３
  • アイテム１14
  • アイテム２2
  • アイテム３1

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>
=== ２枚目のスライド ===
これはサンプルです。
</caption>
{{:dokuwiki:pasted:20230804-142955.png?nolink|}}
</slide>
<slide>
<caption>
=== ３枚目のスライド ===
これはサンプルです。
</caption>
{{:dokuwiki:pasted:20230804-142955.png?nolink|}}
</slide>
</carousel>

表示結果

    最初のスライド

    これはサンプルです。

    ２枚目のスライド

    これはサンプルです。

    ３枚目のスライド

    これはサンプルです。

    Previous Next

    Accordion

    Wiki ソース 

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

    表示結果

    Collapsible Group Item #1

    パネル１の内容

    Collapsible Group Item #2

    パネル２の内容

    Collapsible Group Item #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>

    表示結果

    トグルボタン

    参考