PlayGround
# Smileys
icon_cool.png icon_eek.png icon_eek.png icon_sad.png icon_smile.png icon_smile2.gif icon_doubt.gif icon_doubt2.gif icon_confused.png icon_biggrin.png icon_razz.png icon_surprised.png icon_surprised.png icon_silenced.png icon_silenced.png icon_neutral.png icon_wink.png facepalm.gif
_ |
---|
icon_question.png icon_exclaim.png :@: like.png icon_lol.gif fixme.png deleteme.png
WRAP
Des colonnes
première colonne
Seconde colonne
bloc simple
bloc information
bloc astuce
bloc important
bloc alerte
bloc aide
bloc téléchargement
bloc à faire
particulièrement important
particulièrement important
important
peu important
WRAP style note, ajouté à WRAP
wrap style note, ajouté à WRAP
box
box
box
box
box
box
box
box
Greffon Bootstrap
Détail de l'utilisation et exemples : http://www.lotar.altervista.org/dokuwiki/wiki/plugin/bootswrapper.
Affix
(non testé)
ACCORDION + PANEL
Premier sujet
Contenu du premier sujet
Second sujet
Contenu du second sujet
ALERT (type différents possibles, dismiss possibles)
BADGE
BADGE Et il peut aussi s'inclure dans un bouton :
BUTTON
on peut aussi mettre des liens :
CALLOUT
Callout par défaut
Voilà un callout par défautet il y en a d'autres
il y en a des complémentaires, on peut faire varier les couleurs et les icones
CARROUSEL + CAPTION
(caption n'est pas obligatoire)
COLLAPSE
GRID (ou ROW)
IMAGE
JUMBOTRON
on peut utiliser aussi
<jumbotron background=":wiki:plugin:bootswrapper:35723-fielx.jpg" color="#fff">
Migration 13 15 !
Voilà une manière d'attirer l'attention sur des informations importantes que les clients doivent connaître.
LABEL
default primary success info warning danger
Les mêmes avec des DIV
LEAD
LIST-GROUP
MACROS
Saut de page
Clear de Flux
MODAL
NAV
de type TABS
- Compta client
de type PILLS
- Compta client
Avec des PANE dedans
PAGE HEADER
Example de page header
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
PANEL
titre
sous titreLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Titre du panneau
SubtitleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
POPOVER
PROGRESS + BAR
TEXT
Pour gérer les alignements
les tailles
- taille de texte medium.
- taille de texte xx-small.
- taille de texte.
- taille de texte.
- taille de texte.
- taille de texte.
- taille de texte.
- taille de texte.
- taille de texte.
les transformations
- texte en minuscules
- texte en majuscules
- texte en capitales
les couleurs
- muted
- primary
- success
- info
- warning
- danger
et les fonds
- muted
- primary
- success
- info
- warning
- danger
On peut combiner, évidemment
texte primaire avec fond succès aligné à droite.
THUMBNAIL
TOOLTIP
Lorem ipsum dolor sit amet.
WELL
HTML TAGS
<b>Bold</b>
<i>Italic</i>
<s>Strikethrough</s>
<u>Underline</u>
<small>smaller</small>
<q>Quotation</q>
<abbr>ABBR</abbr>
<dfn>Definition</dfn>
<kbd>Ctrl</kbd>
<samp>Output</samp>
<var>x</var>
<mark>marked</mark>
<cite>Citation</cite>
<time>datetime</time>
<section> Section </section>
<figure> figure content <figcaption>Caption</figcaption> </figure>
<aside> Aside text </aside>
<article> Article text </article>
<dl> <dt>Term</dt> <dd>Description</dd> </dl>
<address> Address </address>
<details><summary>Summary</summary>
Details </details>