Bootstrap Wrapper Pluginについて

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Bootstrap Wrapper Pluginについて======

bootstrapのラッパープラグインで使えそうなのを本家から取説のコピー。
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper]]

使う時は、編集画面にあるBを押すと、構文補助ソフトが立ち上がる、が、微妙なので、自前で打ったほうが早いかも。
{{imgpaste:202510:htmikan-20251021-110740.png}}

アイコン参考：
[[https://getbootstrap.com/docs/3.3/components/|glyphiconの書式とアイコン一覧]]
===== Accordion =====

タイトルを押すとひらくやつ。下のはサンプル表示。

<accordion>
<panel title="Collapsible Group Item #1">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</panel>
<panel title="Collapsible Group Item #2"> [...] </panel>
<panel title="Collapsible Group Item #3"> [...] </panel>
</accordion>

<code html5>
<accordion>
<panel title="Collapsible Group Item #1">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</panel>
<panel title="Collapsible Group Item #2"> [...] </panel>
<panel title="Collapsible Group Item #3"> [...] </panel>
</accordion>
</code>

===== Affix =====

ブラウザの指定した位置に、ウィンドウが表示される。
下記のサンプルを試すとこれがブラウザ左に表示される。
{{imgpaste:202510:htmikan-20251021-185425.png}}

<code html5>
<affix offset-top="50" position-top="100" position-right="20">
<panel title="Affix">
Scroll the page!
</panel>
</affix>
</code>

^ 属性  ^ 初期値 ^ 概要 ^
| ''offset-top''       | optional | 上からのオフセット (in ''px|em|%'') |
| ''offset-bottom''    | optional | 下からのオフセット (in ''px|em|%'') |
| ''position-top''     | optional | Top position of Affix element (in ''px|em|%'') |
| ''position-bottom''  | optional | Bottom position of Affix element (in ''px|em|%'') |
| ''position-left''    | optional | Left position of Affix element (in ''px|em|%'') |
| ''position-right''   | optional | Right position of Affix element (in ''px|em|%'') |
| ''target''           | Window Document | Target element (eg. ''#dokuwiki__site'') |
===== Button =====

ボタン。リンクも可能。サンプル表示。

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

<code html5>
<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>
</code>

<btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:start]]</btn>
<code html5><btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:start]]</btn></code>

^ 属性            ^ 初期値          ^ 値                                                                             ^ 概要                                                       ^
| ''type''      | ''default''  | ''default'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' ''link''  | ボタンの種類                                                   |
| ''icon''      | optional     |                                                                               | 絵文字アイコンの所得先 (eg. Glyphicon or Font-Awesome)              |
| ''size''      | optional     | ''lg'' ''sm''                                                                 | ボタンの大きさ                                                  |
| ''block''     | optional     | ''true'' ''false''                                                            | ブロックレベル指定                                                |
| ''collapse''  | optional     |                                                                               | Target element selector to collapse (see [[#collapse]])  |
| ''disabled''  | optional     | ''true'' ''false''                                                            | ボタンを無効化                                                  |
| ''modal''     | optional     |                                                                               | Modal ID (see [[modal]])                                 |

===== Callout =====

Wrapプラグインよりカッコいいので、こちらを採用。タイプと色はButtonと同じ。

<callout>
=== Default Callout ===
This is a default callout.
</callout>

<code>
<callout>
=== Default Callout ===
This is a default callout.
</callout>
</code>

色付きに変えることができる。タイプで色が決まっている。

<callout type="success">
=== Success Callout ===
This is a success callout.
</callout>

アイコン付きにするときは ''icon="true"'' 属性をつける。

<callout type="info" icon="true">
=== Info Callout ===
This is an info callout.
</callout>

<code html5>
<callout type="primary" icon="true"> [...] </callout>
<callout type="success" icon="true"> [...] </callout>
<callout type="info" icon="true"> [...] </callout>
<callout type="warning" icon="true"> [...] </callout>
<callout type="danger" icon="true"> [...] </callout>
<callout type="question" icon="true"> [...] </callout>
<callout type="tip" icon="true"> [...] </callout>
</code>

^ 属性 ^ 初期値 ^ 値 ^ 概要 ^
| ''type''  | ''default'' | ''default'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' (''question'' ''tip'') | タイプの指定  \\ \\ ''question'' and ''tip'' are available only for ''icon'' attribute. |
| ''title'' |  |  | タイトルの指定 |
| ''icon'' |  | ''true'' or icon class from Glyphicon or FontAwesome (eg. ''fa fa-plus'') | アイコンの指定 |
| ''color'' | | W3C Color name (eg. ''blue'', ''orange'', etc) or HEX (eg. ''#FF3300'', ''#777'') | 色の指定 |
===== Carousel =====

HPのトップでよく見る、商品説明で左右に勝手に変わるあれ。
slideタグで囲まなくてもスライド表示はできるけど、スライドにコメントを
追加したい場合はslideタグに囲んだ範囲にcaptionタグで説明文を囲む。

<carousel>
{{:wiki:dokuwiki-128.png?nolink}}
{{:wiki:dokuwiki-128.png?nolink}}
{{:wiki:dokuwiki-128.png?nolink}}
</carousel>
 

<code htmi5>
<carousel>
{{:wiki:dokuwiki-128.png?nolink|}}
{{:wiki:dokuwiki-128.png?nolink|}}
{{:wiki:dokuwiki-128.png?nolink}}
</carousel>
</code>

^ 属性 ^ 初期値 ^ 値 ^ 概要 ^
| ''interval'' | number | ''5000'' | 自動的に画像を切り替える時間(ミリ秒）、falseで自動で替えない |
| ''pause''    | string | ''hover'' | 画像にマウスが当たっている間、画像の切り替えを止める |
| ''wrap''     | boolean | ''true'' | 画像の切り替えを継続的に循環させるか、最後の画像で止めるか |
| ''keyboard'' | boolean | ''true'' | キーボードイベントに反応するか |
===== Collapse =====

ボタンを押すとひらくやつ。Accordionと異なり、文字列というより図表含めた文字列全部を閉じたり展開したりできる。
Wellと組み合わせると効果的。
<text type="danger" align="nowrap">※編集プレビューでは正常に表示されるけど、このページではうまく動作していません。編集プレビューを参照してください。</text>

<btn collapse="bar">Click Me</btn>

<collapse id="bar" collapsed="true">
<well>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</well>
</collapse>

<code html5>
<btn collapse="bar">Click Me</btn>
<collapse id="bar" collapsed="true"><well>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</well>
</collapse>
</code>
===== Jumbotron =====

海外のトップページでよく見るLearn moreなやつ。作者の詳細説明で、画像をバックにつける方法が書いてある。[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/jumbotron]]

<jumbotron>
<text size="75px">Hello, world!</text>
 
This is a simple hero unit, a simple jumbotron-style 
component for calling extra attention to featured
content or information.
 
<btn type="primary">[[:start|Learn more]]</btn>
</jumbotron>

<code html5>
<jumbotron>
<text size="75px">Hello, world!</text>
 
This is a simple hero unit, a simple jumbotron-style 
component for calling extra attention to featured
content or information.
 
<btn type="primary">[[:start|Learn more]]</btn>
</jumbotron>
</code>

^ 属性 ^ 概要 ^
| ''background'' | Background URL or DokuWiki Media link (eg '':wiki:logo.png'') |
| ''color''      | Color name or HEX (eg. ''#ffffff'') of text |

===== Label =====

文字を強調したりするときに使う。小文字のlabelと大文字のLABELで表示が変わるので注意。普通は小文字。最後のだけ大文字にしてみた。

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

<code html5>
<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>
</code>

^ 属性 ^ 初期値 ^ 値 ^ 概要 ^
| ''type''  | ''info'' | ''default'', ''primary'', ''success'', ''info'', ''warning'', ''danger'' | labelのタイプ |
| ''icon''  | optional | | フォントアイコン (eg. Glyphicon or Font-Awesome) |

===== List Group =====

文字列やリンクを四角で囲んで表示する。別途作者HP参照。[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/list-group]]

<list-group>
  * Cras justo odio
  * Dapibus ac facilisis in
  * Morbi leo risus
  * Porta ac consectetur ac
  * Vestibulum at eros
</list-group>

<code html5>
<list-group>
  * Cras justo odio
  * Dapibus ac facilisis in
  * Morbi leo risus
  * Porta ac consectetur ac
  * Vestibulum at eros
</list-group>
</code>
===== Modal =====

ボタンを押すと説明文とかEULAとかをライトボックスのように表示するやつ。別ページを簡易表示したりもできる。詳しくは作者HPにて。
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/modal]]

<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
 
<modal id="modal-demo" title="Modal title">
=== Text in a modal ===
 
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. [...]
</modal>

<code html5>
<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
 
<modal id="modal-demo" title="Modal title">
=== Text in a modal ===
 
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. [...]
</modal>
</code>

^ 属性            ^ 初期値        ^ 値                              ^ 概要                                                                                                                           ^
| ''backdrop''  | ''true''   | ''true'' ''false'' ''static''  | Includes a modal-backdrop element. Alternatively, specify ''static'' for a backdrop which doesn't close the modal on click.  |
| ''keyboard''  | ''true''   | ''true'' ''false''             | Escキーを押下した時にmodalを閉じる                                                                                                        |
| ''show''      | ''false''  | ''true'' ''false''             | 初期化時にmodalを開く                                                                                                                |
| ''fade''      | ''false''  | ''true'' ''false''             | fade効果を追加する                                                                                                                  |
| ''dismiss''   | ''true''   | ''true'' ''false''             | Dismissボタンを表示する                                                                                                              |
| ''size''      | NULL       | ''sm'' ''lg''                  | 押下した後のサイズ                                                                                                                    |
| ''id''        | NULL       |                                | Modal ID (see [[#button]])                                                                                                   |
| ''title''     | NULL       |                                | タイトル                                                                                                                         |
| ''remote''    | NULL       |                                | Modal内に別のページを表示する                                                                                                            |
===== Navs (Tabs & Pills) =====

ページナビゲーションとしてよく使われるやつ。表示方法がいくつかあるので、作者HPを参照。
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/nav]]

<nav type="tabs" justified="true">
  * [[:start]]
  * [[:wiki:]]
  * [[:playground|編集テスト]]
  * DokuWiki
    * [[:wiki:welcome|ようこそ]]
    * [[:wiki:syntax|詳細仕様]]
</nav>

 
<code html5>
<nav type="tabs" justified="true">
  * [[:start]]
  * [[:wiki:]]
  * [[:playground|編集テスト]]
  * DokuWiki
    * [[:wiki:welcome|ようこそ]]
    * [[:wiki:syntax|詳細仕様]]
</nav>
</code>

^ 属性     ^ 初期値 ^ 値 ^ 概要 ^
| ''type''      | ''pills'' | ''tabs'', ''pills'' | navの種類 |
| ''stacked''   | optional  | ''true'' | navを縦に重ねる |
| ''justified'' | optional  | ''true'' | navを横幅いっぱいに広げる |
| ''fade''      | optional  | ''true'' | タブにFade効果を追加する？ |
===== Panels =====

Calloutみたいな囲み文字を作る。
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/panel]]

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

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

^ 属性    ^ 初期値 ^ 値 ^ 概要 ^
| ''type''     | ''default'' | ''default'', ''primary'', ''success'', ''info'', ''warning'', ''danger'' | panelの種類 |
| ''title''    | optional | | タイトル |
| ''subtitle'' | optional | | サブタイトル |
| ''icon''     | optional | | フォントアイコン (eg. Glyphicon or Font-Awesome) |
| ''no-body''  | optional | | シームレスなデザインのためにパネル内に境界のないテーブルを追加します。本文なし属性がある場合は、分離するためにテーブルの上部に余分な境界線を追加します。 |

===== Text =====

文字列を強調する。label同様、textとTEXTで表示が異なる。色付けるとか文字列を中央揃えとかできるので、作者HP参照。

<TEXT align="left">Left aligned text.</TEXT>
<TEXT align="center">Center aligned text.</TEXT>
<TEXT align="right">Right aligned text.</TEXT>

<code html5>
<TEXT align="left">Left aligned text.</TEXT>
<TEXT align="center">Center aligned text.</TEXT>
<TEXT align="right">Right aligned text.</TEXT>
</code>

^ 属性      ^ 使用可能な引数 ^ 概要 ^
| ''type''       | ''muted'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' | 文字列の色指定 |
| ''background'' | ''primary'' ''success'' ''info'' ''warning'' ''danger'' | 文字列背景の色指定 |
| ''align''      | ''left'' ''right'' ''center'', ''justify'' ''nowrap'' | 文字列の左右合わせ位置 |
| ''transform''  | ''lowercase'' ''uppercase'' ''capitalize'' | 文字列の上下合わせ位置 |
| ''size''       | ''medium'' ''xx-small'' ''x-small'' ''small'' ''large'' ''x-large'' ''xx-large'' ''smaller'' ''larger'' //''length''// //(%, em, px, etc.)// | 文字サイズ |
===== Thumbnails =====

画像のサルネイムに枠をつける。captionタグで説明を追加できる。

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

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

文字列にマウスを持ってくる（マウスオーバー）と説明文がポップ表示する、よくみるあれ。

<tooltip title="Sample Text">Lorem ipsum</tooltip> dolor sit amet...

<code html5>
<tooltip title="Sample Text">Lorem ipsum</tooltip> dolor sit amet...
</code>

^ 属性    ^ 初期値 ^ 値 ^ 概要 ^
| ''title''    | required | | タイトル |
| ''location'' | ''top'' | ''top'', ''bottom'', ''left'', ''right'', ''auto'' | ポップ表示の位置 |
| ''html''     | ''false'' | ''true'', ''false'' | Enable DokuWiki syntax inside the ''title'' |
===== Well =====

文字列を最も簡単に強調表現する。

<well size="sm">ナニコレ？
どうしろと？</well>

<code html5>
<well size="sm">ナニコレ？
どうしろと？</well>
</code>

^ 属性 ^ 初期値 ^ 値 ^ 概要 ^
| ''size'' | optional | ''sm'' ''lg'' | サイズ |