====== Bootstrap Wrapper ======
  * [[https://www.dokuwiki.org/plugin:bootswrapper]]
  * Extension nécessitant un thème Bootstrap, tel que [[https://www.dokuwiki.org/template:bootstrap3|bootstrap3]]
  * Pour les icônes, installer aussi l'extension [[https://www.dokuwiki.org/plugin:icons|icons]]
  * Les fontes d'icônes Awesome et Glyphicon sont installées avec le thème bootstrap3 !
  * pour voir les composants en action : [[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper]]


==== Accordion ====

<accordion>
<panel title="First panel">
First panel content
</panel>
<panel title="Second panel">
Second panel content
</panel>
</accordion>

<accordion>
<panel type="default" title="First panel" footer="This is a first footer" subtitle="A small subtitle" icon="fa fa-medkit">First panel content
</panel>
<panel title="Second panel">
Second panel content
<btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:playground:playground]]</btn>
</panel>
</accordion>

=== Application à des QCM ===

<callout type="question" icon="true">
Des masses égales de dioxygène et de dihydrogène réagissent dans un récipient fermé, conduisant à la formation d'eau. Après réaction complète, que contiendra le récipient ?
</callout>

<accordion collapsed="true">
<panel type="default"  no-body="true">
<panel-body></panel-body>
Sélectionnez une des propositions suivantes !
</panel>   
<panel type="default" title="1. de l'eau et du dioxygène seulement">
Faux. Il faut raisonner en terme de quantités de matière !
</panel>    
<panel type="default" title="2. de l'eau et du dihydrogène seulement">
Vrai. Il faut raisonner en terme de quantités de matière et le dihydrogène, très léger, est manifestement en excès. Le dioxygène est donc le réactif limitant, complètement consommé!
</panel>    
<panel type="default" title="3. de l'eau seulement">
Faux. Il faut raisonner en terme de quantités de matière et de stœchiométrie. Les réactifs ne sont pas en quantités correspondant à la stœechiométrie de la réaction !
</panel>    
<panel type="default" title="4. de l'eau, du dihydrogène et du dioxygène">
Faux. Si la réaction est complète ce n'est pas possible qu'il subsiste à la fois les deux réactifs!
</panel>    
</accordion>

=== Table des matières d'un livre ===

<accordion>
<panel type="default" title="Comment fonctionne le cerveau et ce que cela signifie pour l'apprentissage et l'enseignement">
^ 1 | Un novice n'est pas un expert miniature |
^ 2 | Me décharger d'une charge |
^ 3 | Quelle est la profondeur de votre traitement ? |
^ 4 | Une vision évolutive de l'apprentissage |
^ 5 | Une image et mille mots |
</panel>
<panel type="default" title="Les conditions préalables à l'apprentissage">
^ 6 | Ce que vous savez détermine ce que vous apprenez |
^ 7 | Pourquoi l'apprentissage indépendant n'est pas un bon moyen de devenir un apprenant indépendant |
^ 8 | Les croyances sur l'intelligence peuvent affecter l'intelligence |
^ 9 | ... la réflexion en fait partie |
^ 10 | La façon dont vous pensez à la réussite est plus importante que la réussite elle-même |
^ 11 | Où allons-nous et comment y arriver ? |
</panel>
<panel type="default" title="Quelles sont les activités d'apprentissage qui favorisent l'apprentissage ?">
^ 12 | Pourquoi l'échafaudage n'est pas aussi facile qu'il n'y paraît |
^ 13 | Le Saint Graal : L'enseignement à toute la classe et le tutorat individuel |
^ 14 | La résolution de problèmes : Comment trouver une aiguille dans une botte de foin |
^ 15 | Activités qui donnent naissance à l'apprentissage |
</panel>
<panel type="default" title="Les activités des enseignants">
^ 16 | Zoom arrière pour faire un zoom avant |
^ 17 | Pourquoi l'apprentissage par la découverte est un mauvais moyen de découvrir des choses / Pourquoi l'apprentissage par l'enquête n'est pas un bon moyen |
^ 18 | L'enseignement explicite |
^ 19 | L'évaluation pour, et non de l'apprentissage |
^ 20 | Feed up, Feedback, Feed Forward |
^ 21 | Techniques d'apprentissage qui fonctionnent vraiment |
</panel>
<panel type="default" title="Les contextes d'apprentissage">
^ 22 | Pourquoi le contexte est tout |
^ 23 | La culture de l'apprentissage |
^ 24 | Rendre les choses visibles |
^ 25 | Il faut une communauté pour économiser 100 millions de dollars |
</panel>
<panel type="default" title="Les mises en garde et les dix péchés capitaux de l'éducation">
^ 26 | Avez-vous entendu parler de l'apprenant kinesthésique.. | ? |
^ 27 | Quand l'enseignement tue l'apprentissage |
^ 28 | Le messager n'est pas le message |
^ 29 | Les dix péchés capitaux de l'éducation |
</panel>
</accordion>

  * Autres exemples incluant des QCM,... : [[bs3accordion]]

==== Alert ====
<note tip>
Consulter le code source pour les références des icônes. 
  * [[http://lotar.altervista.org/wiki/wiki/plugin/icons]]
  * [[wp>Font_Awesome|Font Awesome]] & [[https://fontawesome.com]]
    * [[https://www.w3schools.com/icons/fontawesome5_intro.asp|Font Awesome 5]] sur w3schools.com
    * [[https://www.w3schools.com/icons/fontawesome_icons_intro.asp|Font Awesome 4]] sur w3schools.com
  * [[https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp|Bootstrap 3 Glyphicons]] sur w3schools.com
</note>

<alert type="success" icon="glyphicon glyphicon-user" dismiss="true">
**Well done!** You successfully read this important alert message.
</alert>

<alert type="success" dismiss="true" icon="fa fa-check-circle fa-3x fa-pull-right">C'est correct !</alert>

<alert type="danger" dismiss="true" icon="fa fa-times-circle fa-3x fa-pull-right">Ce n'est pas correct !</alert>

<alert type="warning" dismiss="true" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert>

<alert type="warning" dismiss="true" icon="fa fa-wheelchair">**Attention !** Passage difficile pour personnes à mobilité réduite !</alert>

<alert type="warning" dismiss="true" icon="fa fa-cc-paypal">**Warning!** avec icône Font Awesome 4 paypal !</alert>

<alert type="warning" dismiss="true" icon="fa fa-cc-paypal fa-2x">**Warning!** avec icône Font Awesome 4 paypal taille double !</alert>

<alert type="warning" dismiss="true" icon="fa fa-cc-paypal fa-5x">**Warning!** avec icône Font Awesome 4 paypal taille 5x !</alert>

<alert type="warning" dismiss="true" icon="fa fa-spinner fa-spin">**Warning!** avec icône Font Awesome 4 spinner !</alert>

<alert type="warning" dismiss="true" icon="fab fa-cc-paypal">**Warning!** avec icône Font Awesome 5 paypal → NON !</alert>

Icônes seuls : cf [[icons_plugin]] 

{{fa>refresh?128&fa-spin}}

{{fa>refresh?24&fa-spin}}

{{fa>home?64}}

{{fa>home?128&color=red}}

==== Badges ====

Inbox <badge>42</badge>
 
<btn type="primary">Messages <badge>4</badge></btn>


==== Button ====

<button type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</button>



==== Carousel ====
  * Pour inclusion aussi ici : [[teaching:didactiquechimie:methodologie#neurosciences_et_education]]
    * [[https://alchetron.com/Cognitive-architecture]]
    * [[https://3starlearningexperiences.wordpress.com/2020/10/05/that-our-x-y-or-z-is-the-same-%e2%89%a0-were-all-the-same/]]
    * [[https://commons.wikimedia.org/wiki/File:Metacognition.jpg]]


<carousel  interval="false">
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/GHS-pictogram-explos.svg/600px-GHS-pictogram-explos.svg.png}}
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/GHS-pictogram-flamme.svg/600px-GHS-pictogram-flamme.svg.png}}
<caption>
Description
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/GHS-pictogram-rondflam.svg/600px-GHS-pictogram-rondflam.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/GHS-pictogram-bottle.svg/600px-GHS-pictogram-bottle.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/GHS-pictogram-acid.svg/600px-GHS-pictogram-acid.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/GHS-pictogram-skull.svg/600px-GHS-pictogram-skull.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/GHS-pictogram-exclam.svg/600px-GHS-pictogram-exclam.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/GHS-pictogram-silhouette.svg/600px-GHS-pictogram-silhouette.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/GHS-pictogram-acid.svg/600px-GHS-pictogram-acid.svg.png}}
<caption>
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/GHS-pictogram-pollu.svg/600px-GHS-pictogram-pollu.svg.png}}
<caption>
</caption>
</slide>
</carousel>

  * autre carousel... :

<carousel interval="false">
<slide>
{{https://3starlearningexperiences.files.wordpress.com/2020/09/xyz1.png?nolink|}}
<caption>
=== Image simplifiée de notre architecture cognitive ===
Source : 3starlearningexperiences.wordpress.com 
</caption>
</slide>
<slide>
{{https://alchetron.com/cdn/cognitive-architecture-cec00fd7-2ef6-4aca-833a-dc6acb84494-resize-750.jpeg?nolink|}}
<caption>
=== Structure commune d'architectures cognitives ===
Source de l'image : Alchetron - Université du Michigan
</caption>
</slide>
<slide>
{{https://upload.wikimedia.org/wikipedia/commons/1/14/Metacognition.jpg?nolink|}}
<caption>
=== Metacognition ===
Source : Wikimedia commons
</caption>
</slide>
</carousel>


==== Collapse ====
Quel est le nombre d'oxydation du manganèse dans l'ion permanganate ?

<button collapse="foo">Cliquez ici</button>
 
<collapse id="foo" collapsed="true"><well>
+7

L'ion permanganate <chem>(MnO4)-</chem> est une espèce chimique à géométrie tétraédrique caractérisée par un atome de manganèse central lié à quatre atomes d'oxygène et portant une charge globale équivalente à un électron (-1). Chaque atome d'oxygène possède le nombre d'oxydation -2, donc si x est le n.o. recherché pour l'atome de manganèse, on a x + 4 * -2 = -1

Le manganèse est donc à l'état d'oxydation +7, ce qui fait que l'ion permanganate(VII) est un agent oxydant puissant, puisque tout les autres composés du manganèse ont un nombre d'oxydation inférieur.
</well></collapse>

==== Grids ====

<grid>
<col sm="6">.col-sm-6</col>
<col sm="6">.col-sm-6</col>
</grid>

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

==== Jumbotron ====

<jumbotron>
Hello, world !

This is a simple hero unit, a simple jumbotron-style 
component for calling extra attention to featured
content or information.
</jumbotron>

==== Panel ====

<panel type="default" title="Title of Panel" subtitle="Subtitle" icon="fa fa-home">
Panel content
</panel>

==== Text ====
  * <text type="muted">muted</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>


==== Thumbnail ====

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

<code><grid>
...
<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></code>

==== Tooltip ====

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


==== Well ====

<well>Look, I'm in a well!</well>

==== Nav ====

<nav>
  * [[:start]]
  * [[:plugin:bootswrapper|Plugin]]
  * [[:playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>