Si tout comme moi vous utilisez Bootstrap, vous êtes certainement impatient de passer à la version 4. En date d’aujourd’hui, Bootstrap 4 en est alpha 6, ce qui veut dire qu’officiellement il est encore un peu tôt pour l’utiliser en production mais, selon le GitHub du projet, cette version alpha serait la dernière, ce qui veut dire que le beta devrait sortir très bientôt. À quoi devons-nous donc nous attendre avec Bootstrap 4?
Passer à Bootstrap 4
Qu’est-ce que ça implique de migrer Bootstrap de la version 3 à 4? La plus récente version apporte quelques changements majeurs dont l’ajout et la suppression de certaines composantes. Voici les différences à considérer :
Aurevoir, Less, Glyphicons et Internet Explorer 8!
À l’origine, Bootstrap utilisait le préprocesseur CSS Less comme moyen de compiler des variables. Pour la version 4, Bootstrap utilise Sass, considéré comme le plus puissant des deux, avec une communauté de développeurs plus grande.
Bootstrap 3 est livré avec un sous-ensemble de la police d’icônes Glyphicons. Glyphicons est maintenant chose du passé, et il n’y a rien prévu pour le remplacer.
Le support IE8 est complètement abandonné avec la dernière version de Bootstrap. Bon débarras – à moins, bien sûr, que vous construisez des applications dans un environnement où IE8 est mandaté.
Introduction des cartes, ou « Cards »
Ce que vous remarquez d’abord dans Bootstrap 4, c’est que .panel et .well ont été remplacés par .card. Cela a beaucoup de sens puisque les cartes sont l’une des tendances les plus connues en « Responsive Web Design ». Les avantages des cartes sont qu’elles peuvent être singulières, regroupées ou égales en hauteur (enfin!).
Flexbox
Dans la version précédente, Bootstrap ne prenait pas en charge « Flexbox », un mode de mise en page CSS qui est conçu pour mieux s’adapter au positionnement d’éléments, en grande partie parce que tous les navigateurs ne le supportaient pas encore. Bootstrap 4 offre maintenant « Flexbox » comme ingrédient par défaut, mais optionnel au besoin, grâce à une variable.
5 points d’arrêts, ou « Breakpoints »
Comparativement à la version précédente, Bootstrap 4 introduit un cinquième point d’arrêt nommé XL. Si XL fait penser qu’il a été ajouté pour soutenir des écrans supplémentaires, c’est en fait le contraire. Ce niveau supplémentaire étend la gamme de requêtes média jusqu’à 544 px (ou 34 em).
Police de caractères plus grosse
La taille de police par défaut passe de 14px à 16px dans le nouveau Bootstrap 4. Il y a aussi de nouveaux « Display Headings » pour produire du texte qui se démarque des en-têtes courantes. Toutes les tailles des polices sont basées sur des unités rem de sorte qu’elles soient relatives à la racine.
Migration vers Bootstrap 4
Vous avez encore un peu de temps avant de passer officiellement à Bootstrap 4. Personnellement, j’explore les nouveautés dans le cadre de projets internes mais pour les projets clients, je reste à Bootstrap 3 pour le moment. Par-contre, la version 2017 de notre site web est présentement en production et utilise l’alpha 6 de Bootstrap car après tout, on se doit bien de tester avant tout le monde.
Si vous avez besoin d’aide pour passer à Bootstrap 4, n’hésitez pas à communiquer avec nous.
- Ressources externes :
-
- Skelly, Carol, « Bootstrap 4: A Visual Guide », 6 juin 2016.
- Dickson, Ian, « Differences Between Bootstrap 3 and Bootstrap 4 », 18 août 2016.
- Awsaf-uz-zaman, Ahmad, « Bootstrap 3 vs. bootstrap 4 », 25 avril 2016
- Yegulalp, Serdar, « Brace for these 5 big changes in Bootstrap 4 », 24 août 2015
