Syntaxe Bootswrapper

C'est un plugin associé à un thème (ici bootstrap3/simplex), qui permet d'étendre la mise en page de dokuwiki. Il donne notamment accès à de nombreux composants bootstrap, dont on peut voir la liste complète ici (en anglais) : http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper

Pour les utiliser, le plus simple est de cliquer sur le bouton Bootstrap Wrapper, en haut à droite des boutons de mise en page.

On peut aussi directement écrire leurs balises HTML, qu'on aura recopiées depuis le site mentionné ci-dessus, ou depuis le code d'une autre page du wiki.

Nous allons voir quelques exemples de fonctionnalités et composants utiles.

Bootstrap3 donne accès à un set de couleurs (qui dépendent du thème et sont personnalisables). Ci-dessous les couleurs, en utilisant des composants basiques de type “text” :

• muted, parfois default
• primary
• success
• info
• warning
• danger

  * <text type="muted">**muted**, parfois **default**</text> 
  * <text type="primary">**primary**</text> 
  * <text type="success">**success**</text> 
  * <text type="info">**info**</text> 
  * <text type="warning">**warning**</text> 
  * <text type="danger">**danger**</text>

De la même façon qu'avec les composants “text” colorés, on peut créer des étiquettes ou des badges.

Balises <label type="success"> ou <badge>.

Etiquette type success Badge (un seul type)

<label type="success">Etiquette type success</label>
<badge>Badge (un seul type)</badge>

De nombreux objets peuvent utiliser des icônes, mais il faut entrer le code de l'icône à la main.

Pour retrouver la liste des icônes utilisées (Font Awesome v4), c'est par ici : https://fontawesome.com/v4/icons/

Il faut toujours précéder le nom de l'icône de “fa fa-” pour lui associer les bonnes classes CSS.

Exemple : Un label avec une icône

<label type="info" icon="fa fa-thumbs-up">Un label avec une icône</label>

<progress><bar value="60" type="warning" striped="true" showvalue="true"></bar></progress>

<progress><bar value="30" type="conditional" striped="true" showvalue="true" animate="true"></bar></progress>

Les alertes sont des bandeaux de couleur qui permettent de mettre en avant une information courte.

<alert type="warning" dismiss="true">
**Alerte Warning**, le paramètre ''dismiss'' permet de l'ignorer (fermer avec la croix).
</alert>

<alert type="info"  icon="fa fa-info-circle" >
Alerte Info précédée d'une icône. Liste des icônes : https://fontawesome.com/v4.7/icons/ -- https://glyphsearch.com/
</alert>

Les callouts ressemblent beaucoup aux alertes, mais on ne peut pas les fermer, on peut cependant leur donner la couleur qu'on veut (code hex ou nom).

<callout type="default" title="Titre... (type : default)" icon="true">Texte... blablabla</callout>

<callout type="primary" title="type : primary" icon="true"></callout>

<callout type="success" title="type : success" icon="true"></callout>

<callout type="info" title="type : info" icon="true"></callout>

<callout type="warning" title="type : warning" icon="true"></callout>

<callout type="danger" title="type : danger" icon="true"></callout>

<callout type="question" title="type : question" icon="true"></callout>

<callout type="tip" title="type : tip" icon="true"></callout>

<callout type="tip" icon="true" title="On peut définir une couleur" color="turquoise"></callout>

<callout type="default" icon="fa fa-arrow-right" color="#ffb147" title="On peut aussi changer l'icône"></callout>

Un accordéon comporte plusieurs panneaux, quand on clique sur l'un d'eux ça referme l'autre.

<accordion>
<panel title="Panneau pliable #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="Panneau pliable #2"> Le cliquer replie la section 1 (ou 3) si elle était ouverte </panel>
<panel title="Panneau pliable #3"> [...] </panel>
</accordion>

Les boutons peuvent être utilisés seuls, ils permettent alors de styliser un lien.

Bouton qui renvoie à l'accueil du wiki

<btn type="default">[[:accueil|Bouton qui renvoie à l'accueil du wiki]]</btn>

Ils peuvent aussi être associés à une section pliable, ils permettent alors de changer son état (plié/déplié).

Bouton pour déplier/plier la section ci-dessous :

<btn type="default" collapse="identifiant-section">Texte du bouton</btn>
<collapse id="identifiant-section" collapsed="true"><well>
Texte de la section pliable</well></collapse>

Bouton pour afficher une fenêtre de dialogue (modal)

<btn type="info" modal="modal1">Bouton pour afficher une fenêtre de dialogue (modal)</btn>
<modal id="modal1" size="lg" title="Modal">Non mais regardez-moi cette belle fenêtre de dialogue. Elle est-y pas belle ?</modal>

On peut utiliser un nav ou pills avec des pane pour faire une sorte d'accordéon avec des boutons. Utile si on veut afficher des choses de façon conditionnelle (par exemple différentes sections selon les OS : Windows/Mac/Linux, ou encore le profil de l'utilisateur : Curieux/Maker/Chercheur…).

<pills>
  * [[#tab-1|Onglet 1]]
  * [[#tab-2|Onglet 2]]
  * [[#tab-3|Onglet 3]]

<pane id="tab-1">
=== Section onglet 1 ===
Texte 1 : blablabla
</pane>
<pane id="tab-2">
=== Section onglet 2 ===
Texte 2
</pane>
<pane id="tab-3">
=== Section onglet 3 ===
Texte 2
</pane>
</pills>

Permet d'ajouter une légende à une image.

Titre

Blablabla légende

<grid>
<col md="3">
<thumbnail>
{{ wiki:dokuwiki-128.png }}
<caption>
== Titre ==
Blablabla légende
</caption>
</thumbnail>
</col>
</grid>