Après 2 ans d’attente depuis la première phase alpha, Bootstrap sort enfin la phase beta de la version 4. La migration vers la version 4 du plus répandu des framework CSS est bien moins aisée que pour le passage de la 2 à la 3.
Si la version 3 apportait une logique mobile-first, cette dernière mouture atteint le stade la maturité tant pour le CSS3 que pour la rationalisation de sa nomenclature.
Loin de blâmer la communauté de développeurs, il fallait surtout attendre la quasi disparition des navigateurs d’ancienne génération qui supportaient mal ou pas le CSS3.
Avant toute chose, vérifiez qu’il ne vous faudra pas supporter les navigateurs old-school ; en effet, Bootstrap 4 est compatible avec :
- IE10+,
- iOS7+,
- Chrome, Mozilla, Opera, etc.
Si vous débutez, concevez vos designs en mobile-first. Vous éviterez de vous arrachez les cheveux ou d’effectuer des rattrapes peu élégants pour optimiser votre site sur tous les supports.
Modifications
Build System
- Less est abandonné au profit de Sass,
- Grunt est abandonné au profit de npm
Grille
- Passage aux attributs flexbox,
- Abandon des éléments « xs » qui deviennent la propriété par défaut (mobile-first),
Composants
- Abandon des éléments panels, wells et thumbnails désormais utilisables via cards
- Abandon du set d’icônes intégré Glyphicons,
- Réécriture de l’ensemble des composants (appels HTML),
- Ajout des Cards,
- Ajout de très nombreuses classes utilitaires pour les marges, les espacements, les bordures
Accessibilité
- Meilleur contraste pour les couleurs,
- Nombreux exemples d’utilisation de l’ARIA
Utilisation
Bootstrap 4 est une réelle avancée pour le développement de thèmes, facilitant la déclinaison de charte graphique.
Son utilisation dans une démarche atomique est très simple et surtout totalement naturelle avec la rationalisation des classes.
Du côté du javascript, il s’appuie désormais sur jQuery 3.2.x et même si les scripts ont été entièrement réécris, il n’y a pas de changement majeur.