Aujourd’hui, je fais un petit tour d’horizon de quelques composants, librairies et plugins Javascript que j’utilise lors d’intégrations avec le framework Bootstrap (intégration de pages web, de modules elearning en HTML5…).
Je ne présente ici que des composants responsives, qui s’adapteront à vos design web sur tablettes et mobiles.
Ce ne sont que des bibliothèques qui s’installent facilement, c’est-à-dire en liant quelques fichiers Javascript et CSS à votre page HTML. C’est un paramètre important pour moi quand je teste un composant, je veux qu’il soit facilement déployable. Les liens que je propose présentent tous une section démo pour se faire rapidement une idée du résultat.
Font Awesome
Un classique, une bibliothèque d’icônes très complète. Les icônes sont disponibles en plusieurs tailles et on en change facilement la couleur, idéal pour agrémenter un bouton cliquable. Les icônes s’intègrent en HTML ou via CSS.
Pickadate
Un petit plugin Javascript pour ajouter un date picker à vos formulaires. Je veux parler d’un petit calendrier qui apparaît pour permettre à l’utilisateur de choisir une date dans un formulaire. J’en ai testé plusieurs avec Bootstrap, celui est simple à mettre en place et facilement personnalisable. Il vient déjà par défaut avec deux thèmes et de nombreuses traductions.
Bootstrap-slider
Plugin jQuery permettant d’ajouter des petites barres de défilement dans vos pages pour différents usages. L’usage typique de ce genre de slider (je n’ai pas trouvé de nom correspondant en français) est un filtre par prix sur une boutique, l’utilisateur choisit son prix en cliquant glissant un ou des marqueurs. Apparence facilement modifiable via CSS, possibilités d’avoir plusieurs marqueurs (prix minimum et maximum par exemple).
Bootstrap-fileinput
Ce plugin jQuery permet de gérer l’upload de document dans un formulaire. Basiquement, on créé un champ input et lui associe un id pour initialiser le composant en appelant la librarie via une simple ligne Javascript. Personnalisation des couleurs, multi-upload, aperçu des fichiers, suppression, chargement AJAX, restriction de taille, de format, du nombre de fichiers…. Le plugin de gestion d’upload de fichiers le plus complet que j’ai trouvé. Il est de plus bien supporté. Il est également facilement traduisible.
Bootstrap-star-rating
Un plugin de gestion de notation en jQuery, utile pour noter un produit sur une boutique par exemple. Il a été créé par le même développeur que l’extension fileinput ci-dessous. Il est donc tout aussi bien supporté et est très complet également : taille, changement d’icônes, traduction…
Je vous invite à visiter le site plugins.krajee.com. C’est le développeur qui a développé bootstrap-fileinput et bootstrap-star-rating, il propose une dizaine d’autre plugins qui devraient être tout aussi utiles, cependant je ne parle ici que de ceux que j’ai testé.
Web font generator
Ce n’est pas un plugin mais je le mets ici car je l’utilise beaucoup quand je fais de l’intégration web. C’est un générateur en ligne de polices pour le web. Vous mettez votre police format .ttf ou .otf et il vous génère les polices aux formats web nécessaires (.woff, .svg, etc…) et il génère les lignes CSS à intégrer dans votre feuille de style. Toujours efficace, on n’est sûr de ne pas oublier un format et que notre police perso sera bien lue sur tous les navigateurs.
Voilà, c’est fini pour l’instant avec cette petite liste, je ne manquerais de la complété au fil de nouvelles découvertes et de nouveaux projets d’intégration HTML. N’hésitez pas à en partager aussi dans les commentaires ci-dessous !
EDIT : je partage aussi cet article qui ressense également nombre de plugins pour Bootstrap, dont certains semblent intéressants : lightbox, fonctionnalités supplémentaire pour formulaires, galeries d’images… Je ne les ai par contre pas tester.