Depuis quelques années, le framework Twitter Bootstrap fait parti des projets les plus important de la communauté web. Initialement développé par des employés de Twitter en 2010, le projet a rejoint la communauté open source en 2011 pour devenir, en 2012, le projet le plus populaire sur la plateforme de versionning GitHub.
Twitter Bootstrap, ou Bootstrap tout simplement, est un framework HTML, CSS et Javascript contenant une collection d’outils utiles pour développer le design et l’accessibilité de son site internet et/ou de son application web.
Actuellement en version 3, la nouvelle version de Bootstrap – Bootstrap 4 – devrait sortir courant 2017 et apportera son lot de nouveautés dans l’amélioration de l’expérience utilisateur et de l’accessibilité.
Un framework HTML, CSS et Javascript
Qu’est-ce qu’un framework ?
Un framework est une boîte à outils qui va permettre au développeur et à l’intégrateur d’avoir une base solide pour construire son projet. Un framework peut être comparé à une bibliothèque. Néanmoins, il se veut plus général. Chaque langage possède son/ses propres frameworks. Par exemple :
- PHP : Symfony2, Zend Framework
- Javascript : jQuery, Prototype
- CSS : Bootstrap, Foundation
- Ruby : Ruby On Rails
A ne pas confondre avec un CMS (« Gestionnaire de Contenus »), tel que WordPress.
Les fonctionnalités principales de Bootstrap
Compatibilité HTML5
Bootstrap a été conçu pour utiliser pleinement les capacités du HTML5, tout en fonctionnant de manière « dégradée » sur les autres versions (certaines fonctionnalités étant désactivées).
Grilles & Colonnes
Bootstrap permet de découper son site internet en 12 colonnes, rendant simple et intuitif le placement de contenu. On peut donc décider d’avoir une zone de contenu sur 75% de la page et une sidebar de 25% très facilement.
[bs_row class= »row »]
[bs_col class= »col-sm-8″]Voici un exemple de texte sur 2 colonnes. Ce début de texte est dans la première colonne.[/bs_col]
[bs_col class= »col-sm-4″]Mais cette 2e partie du texte se retrouve dans la colonne de droite et sur mobile elle sera juste en dessous de la 1ère colonne.[/bs_col]
[/bs_row]
Design « Responsive »
Un site internet « Responsive » est un site qui va s’adapter à l’appareil de l’internaute, qu’il soit devant un écran d’ordinateur, sur sa tablette ou son smartphone. Là où intervient Bootstrap, c’est qu’il propose plein d’outils pour faciliter cette adaptation :
- Les colonnes peuvent varier en fonction de la taille de l’écran (deux colonnes côte à côte sur un écran de PC seront sur une colonne au niveau du mobile),
- La lisibilité des tableaux est améliorée sur un smartphone,
- La barre de navigation est optimisée et plus accessible,
- …
Il faut savoir qu’en 2016, en France, près d’un 1 internaute sur 5 est sur un mobile et le temps passé sur internet depuis son smartphone atteint près 1h par jour en moyenne. Il est donc important que votre site s’adapte parfaitement à tous les écrans afin de garantir une expérience utilisateur optimale.
Composants
Bootstrap contient de nombreuses classes et composants qui permettent de mettre en forme le contenu de votre page web :
- Boutons
- Listes,
- Icônes,
- Popup,
- Formulaires,
- Accordéons,
- Carousels,
- ….
Pour découvrir tous les composants de Bootstrap, vous pouvez consulter leur site officiel.
Intégration de Bootstrap dans votre site Pro’Activ
Nouveau thème IRCF
En décembre 2016, nous avons développé un thème qui permet au client d’avoir la main sur plus d’éléments de son site : en plus de pouvoir créer / modifier des pages et des articles, le client peut également modifier ses diaporamas (type d’animation, durée, …) ainsi que changer les couleurs en temps réel (titres, menus, texte, fonds, …).
Les nouveaux thèmes créés par IRCF sont compatibles HTML5 et exploitent pleinement les possibilités de Bootstrap.
Shortcode
Nous vous proposons également des modules pré-installés qui permettent de mettre en œuvre les fonctionnalités de Bootstrap plus facilement sur vos pages et vos articles. La plupart des composants cités plus tôt dans l’article peuvent être utilisés simplement sur votre site internet.
Pour en savoir plus, n’hésitez pas à nous contacter.