Bootstrap Wrapper plugin [HârnWiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Bootstrap Wrapper plugin ======

[[doku>plugin:bootswrapper|Bootstrap Wrapper page]] • [[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper|Developer's documentation site]]

This adds many different bootstrap graphical page elements to the [[doku>template:bootstrap3|Bootstrap3 template]]. Not all have been used in this wiki, but here are some examples of those that have been used.

===== Buttons =====
These are the most prevalent, with examples found on nearly every page in the [[works:]] section, such as [[works:harn:kaldor:kaldor]]. Most are of the ''default'' type.

^ Sample code ^ Output ^
| ''%%<button icon="fa fa-file-pdf-o">[[https://www.lythia.com/harnworld/places/kaldoran-hundreds/|  get pdf]]</button>%%'' | <button icon="fa fa-file-pdf-o">[[https://www.lythia.com/harnworld/places/kaldoran-hundreds/|  get pdf]]</button> |
| ''%%<btn size="xs">[[https://www.lythia.com/|Main website]]</btn>%%'' | <btn size="xs">[[https://www.lythia.com/|Main website]]</btn> |

It is often appealing to use non-breaking spaces (''Alt+0160'') before the link label to force more space to be rendered between that text and the button's icon. Several icon libraries are available for use here, with the most common being the following:

  * [[https://fontawesome.com/v4/icons/|Font Awesome version 4.7]], ''fa''
  * [[https://pictogrammers.github.io/@mdi/font/4.1.95/|Material Design Icons version 4.1.95]], ''mdi''
  * [[https://nagoshiashumari.github.io/Rpg-Awesome/|RPG Awesome]], ''ra''

Several of the default [[doku>config:target|link target settings]] have been changed in this wiki's configuration, so external and interwiki links will open in a new browser tab.

===== Tabs =====
These are used in the ''start'' pages of namespaces under ''works'', such as [[works:harn:chybisa:]], to separate the canon works from the fanon. In outline, their use looks like this.

<code>
<tabs justified="true">
  * {{mdi>checkbox-marked}} [[#tab-canon|Canon]]
  * {{mdi>fan}} [[#tab-fanon|Fanon]]

<pane id="tab-canon">
       ...
</pane>

<pane id="tab-fanon">
       ...
</pane>
</tabs>
</code>

===== Panels =====
These have been used in plain vanilla style, alone and within other ''bootstrap3'' elements, such as the [[#accordion]]. They were also used to put a frame around the heading examples in [[heading_styles]]. Basically ''%%<panel%%'' tags are placed around the enclosed content like so:

<code>
<panel>
       ...
</panel>
</code>

===== Accordions =====
One accordion has been used in conjunction with [[#panels]] to tackle the extensive credits in [[works:bestiary:harnworld_bestiary]]. The code is long, but looks something like this.

<code>
<accordion>
<panel title="Aquatics #4614">
|  table | of credits |
       ...
</panel>
<panel title="Bats #4633">
       ...
</panel>       
       ...
</accordion>
</code>