Créer un backend simplement avec Bootstrap

Bootstrap est un framework permettant de développer des interfaces graphiques professionelles très simplement et très rapidement. Pour preuve du sérieux, le framework est développé et maintenu par Twitter! Je vais vous présenter rapidement dans cet article les différentes composantes du framework.

Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

• Utilisation de HTML5
• Un « reset » CSS très simple basé sur Normalize.css
• Un système de grille css (grid system)
• Un système simple de « layout »
• Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

• Un système de typographique
• Gestion des styles et « helper » pour les tableau HTML
• Gestion des éléments de formulaire
• Des boutons personnalisables (très chics)
• « helper » pour les images
• Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

• Groupes de boutons
• « Labels » et badges
• Fils d’ariane (breadcrumbs)
• « Alerts box » : Info, succès, échec, attention
• Barres de progression
• « Thumbnails »
• …

Framework Javascript

• « Modal box » très bien faites et facile à modifier
• Gestion des transitions
• Système de « tabs »
• Système de « tooltips »
• Alert javascript amélioré
• Autocompletion pour formulaire
• Système de « Popover » très bien fait
• …

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

• Bootstrap home
• Wrap Bootstrap