io toolbox

Menu

Composants UI


Eléments basiques


Titres

Les titres sont définis pour 5 niveaux.

                        

Titre un (titre principal)

Titre deux

Titre trois

Titre quatre

Titre cinq

Paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis lacus eu ipsum ornare. Cras pharetra nulla id varius rhoncus. Quisque id faucibus quam, a lobortis massa. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse obortis lacus eu ipsum ornare. Cras pharetra nulla id varius rhoncus. Quisque id faucibus quam, a lobortis massa. Interdum et malesuada fames ac ante ipsum primis in faucibus.

html

                        

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis lacus eu ipsum ornare, sed tristique metus condimentum. Nullam pretium lacus leo, non vestibulum leo luctus at. Maecenas quis iaculis libero, sit amet ullamcorper nibh. Vivamus vitae congue felis, in porta sapien. Fusce condimentum auctor sapien et pretium. Phasellus odio lorem, convallis ac est nec, fermentum dapibus urna. Duis vestibulum ante tellus, vitae auctor ipsum venenatis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pharetra nulla id varius rhoncus. Quisque id faucibus quam, a lobortis massa. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Listes

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

html

                    
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

Encadrés

Message box qui utilise la class .encadre

html

                        
Message box qui utilise la class .encadre

Tableau

Lorem Ipsum Dolor
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia


html

                    
Lorem Ipsum Dolor
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia


Lorem Ipsum Dolor
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia


html

                    
Lorem Ipsum Dolor
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia


Lorem Ipsum Dolor
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia


html

                    
Lorem Ipsum Dolor
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia
Laboris Mollit Officia

Bouttons

Des classes primaires et secondaires ont étés mis en place pour permettre de définir des couleurs de base, Grâce à font-awesome il est également possible d'utiliser des icones pour des actions de boutons spécifiques.



.btn.primary.small .btn.primary .btn.primary.big



html

                        .btn.primary.small
                        .btn.primary
                        .btn.primary.big
                    


  Download PDF/ 6482 KB   Search   Ajouter au favoris



html

                        Download PDF/ 6482 KB
                        .btn.secondary
                        .btn.secondary.big
                    

Share it

html

                    

Text align

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

html

                    

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Float, clear

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

html

                    

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet



Contenus relatifs



Navigations




Formulaires


html

                    
        


html

                    
        


Elements complexes


Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.


html

Pour avoir un seul accordion ouvert a la fois (fermeture automatique des autres), remplacez le input type="checkbox" par input type="radio".

                        

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut elit in arcu rhoncus elementum. Aenean nec rutrum nisi, eget gravida nibh. Quisque odio nulla, tincidunt ut massa non, elementum rhoncus ante. Aliquam imperdiet egestas dignissim.