Bootstrap Wrapper Pluginについて

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

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

アイコン参考：
glyphiconの書式とアイコン一覧

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

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

ブラウザの指定した位置に、ウィンドウが表示される。
下記のサンプルを試すとこれがブラウザ左に表示される。

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

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

DefaultPrimarySuccessInfoWarningDangerLink

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

start

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

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

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

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

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

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

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

Previous Next

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

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

Click Me

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

海外のトップページでよく見る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>

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

defaultprimarysuccessinfowarning

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

文字列やリンクを四角で囲んで表示する。別途作者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>

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

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

ページナビゲーションとしてよく使われるやつ。表示方法がいくつかあるので、作者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>

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

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

文字列を強調する。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>

画像のサルネイムに枠をつける。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>

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

Lorem ipsum dolor sit amet…

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

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

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