• Possibilité d'ajouter une balise (popup>) permettant l'ouverture de l'image dans une fenêtre popup :

{{popup> :wiki:docs_en_cours:atc_adresse.png?direct&400 |}}

• Modification de la taille de l'image en modifiant les chiffres finaux : 400 ou 600 ou …
  

• Ajout d'un halo autour de l'image pour la faire ressortir, avec la balise WRAP imgweb :
  

<WRAP imgweb>{{popup> :wiki:docs_en_cours:atc_adresse.png?direct&300 |}}</WRAP>

• Retour à la ligne

Un retour à la ligne simple n'a aucun impact dans le visuel, juste une meilleure lecture du “codage”

Pour voir apparaître un retour à la ligne il faut faire un double “Maj + Entrée”
ou bien par l'utilisation de deux contre-obliques “\\” en fin de ligne ou suivies d'un espace en cours de texte

• Couleur

Les couleurs de barres, boutons, etc… sont symbolisées par les mots :

• Défaut : Pas de couleur
• Primary : Bleu
• Success : Vert
• Danger : Rouge
• Warning : Orange
• Info : Bleu clair
• Link : Gris clair

• Bloc code

possibilité d'insérer des blocs code en utilisant les balises

"<code> ou  <file> ou bien en mettant 2 espaces avant le code"

Permet de mettre un texte sur deux colonnes avec 2 formats de taille de colonne

<WRAP group>

<WRAP half column>
Ligne 1\\ \\Maj Entrée
Ligne 2  Maj Entrée
</WRAP>

<WRAP column>
Ligne a\\ \\Maj Entrée
Ligne b  Maj Entrée
</WRAP>

</WRAP>

<WRAP group>

<WRAP column third>
Ligne 1\\ \\Maj Entrée
Ligne 2  Maj Entrée
</WRAP>

<WRAP column>
Ligne a\\ \\Maj Entrée
Ligne b  Maj Entrée
</WRAP>

</WRAP>

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Possibilité de modifier :

• la mise en forme du texte
• la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Met le texte en rouge

Possibilité de modifier la mise en forme du texte

Ex: Ce message est Particulièrement Important. Merci de le prendre en considération.

Met le texte en surlignage jaune

Possibilité de modifier la mise en forme du texte

Ex: Ce message est important. Merci d'en tenir compte.

Met le texte en écriture plus petite

Possibilité de modifier la mise en forme du texte

Ex: Ce message est peu important

La documentation d'utilisation de cette barre de travail est accessible depuis le lien suivant : Bootstrap Wrapper

Certaines fonctions devront être utilisées en combiné avec d'autres fonctions et n'ont pas d'intérêt seules.

Un accordéon réalisé avec le composant panel.

Couleur non modifiable, Possibilité de modifier la mise en forme du texte

Badge

Créé une barre de longueur variable (gérée par “value”)pour schématiser des proportions

Striped : rayé

Show value : indique la valeur choisie dans la barre

Animate : rayure en mouvement

Créé une barre schématisant une progression ajustable

Créé des boutons de couleurs et tailles différentes selon les besoins. A utiliser en combinaison avec d'autres fonctionnalités

Default Primary Success Info Warning Danger Link

Créé cadre avec une barre de couleur sur le côté gauche

Fait défiler des images, avec éventuellement un commentaire dessus

Défilement automatique ou manuel

Ex :

Logo Analys

Logo Atys XE

Previous Next

Procédure :

<carousel >
<slide> **//Logo Analys//**
{{ :wiki:dossier:documents:mondossier:logo_analys.png?nolink |}}</slide>
<slide> **__Logo Atys XE__**
{{ :wiki:dossier:documents:mondossier:logo_atys_xe.png?nolink |}}</slide>
</carousel>

Possibilité de fixer la hauteur du carousel pour éviter les mouvement de texte autour du carousel lorsque la hauteur change.

• Utilisation d'une balise positionnée avant le carousel
  

<WRAP carousel_s>
<carousel interval="5000" keyboard="true">
<slide>page 1  </slide>
<slide>page 2  </slide>
</carousel>
</WRAP>

• 4 hauteurs de carousel possible :
  • <WRAP carousel_s> : hauteur 350
  • <WRAP carousel_m> : hauteur 550
  • <WRAP carousel_l> : hauteur 650
  • <WRAP carousel_xl> : hauteur 850

Combiner la fonction collapse avec button permet de créer un bouton qui actionne l'ouverture d'une fenêtre. Si on veut que la fenêtre soit dans un cadre gris clair, il faut en plus utiliser la fonction well :

Procédure :

<button collapse="foo">Click Me</button> 
<collapse id="foo" collapsed="true">
<well>
Test
</well>
</collapse>

Visuel :

Click Me

Permet d'insérer des images dans des ronds, carrés ou dans un cadre…

Permet d'attirer l'attention sur certains titres en les grossissant.

Procédure :

<jumbotron>
Hello, world! 
</jumbotron>

Surlignage du texte en couleur, possibilité de modifier le style du texte (italique, souligné, etc…)

Surlignage en vert du texte

Procédure :

<label type="success">__Surlignage en vert du texte__</label>

Permet de démarquer un paragraphe des autres en le grossissant :

Procédure :

<lead>Ce texte se démarque</lead>

Permet de créer une liste sous forme de tableau à 1 colonne.

Possibilité de combiner cette liste avec l'utilisation de Badges, de liens, d'icones, etc…

Procédure :

<list-group>
  * {{glyphicon>pencil?18}} Ligne 1
  * Ligne 2
  * etc...
</list-group>

Permet d'ouvrir une fenêtre dynamique de taille variable par action sur un bouton :

Large modal Small modal

<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>
 
<modal id="modal-large" size="lg" title="Large modal">...</modal>
<modal id="modal-small" size="sm" title="Small modal">...</modal>

Créé une barre de navigation (horizontale ou verticale (stacked)) ouvrant sur des menus qui peut amener vers un lien interne ou externe

Procédure :

<nav type="tabs" justified="true" >
  * Site Analys
    * https://www.analys-informatique.com/accueil
  * Dokuwiki
    * [[:start|Le wiki d'ATYS]]
    * [[wiki:dossier:tracabilite|La traçabilité dans Atys]]
</nav>

Procédure :

<nav type="tabs" stacked="true">
  * Site Analys
    * https://www.analys-informatique.com/accueil
  * Dokuwiki
    * [[:start|Le wiki d'ATYS]]
    * [[wiki:dossier:tracabilite|La traçabilité dans Atys]]
</nav>

Créé un titre, sans qu'il apparaisse dans la table des matières

Créé un encadré de couleur avec Titre, Sous-titre et éventuellement un pied.

Pas de possibilité de mettre en gras, italique etc… pour les titres , sous-titres et pieds, mais possible pour le texte

Procédure :

<panel type="success" title="Titre" footer="Pied" subtitle="Sous-titre" >**Texte à renseigner**</panel>

Associé à un bouton, permet l'ouverture d'une bulle :

• titre optionnel
• possibilité de gérer la position de la bulle (top, bottom, right, left)

Click to the button

Procédure :

<popover placement="bottom"   title="Popover title"   content="Contenu du popover : texte descriptif">
<btn  type="danger"  size="lg">Click to the button</btn>
</popover>

Créé une “bulle” commentaire en passant la souris sur le mot identifié (souligné).

Lorem ipsum

Créé un cadre sur fond gris autour du texte. Mise en forme du texte possible.