Actualités

Bootstrap 4.0 est officiellement disponible

Un aperçu des changements notables dans la collection d'outils pour la création de sites Web

Fin 2014, l’équipe Bootstrap a annoncé le développement de la version 4.0, et depuis hier, soit plus de trois ans après, Bootstrap 4.0 est enfin disponible. Bootstrap n’est plus à présenter auprès des développeurs Web, car c’est sans doute le framework HTML, CSS et JavaScript le plus populaire pour développer des projets mobiles first et responsives sur le Web. Il offre des outils utiles à la création du design de sites et d’applications Web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.

Bootstrap 4 est une réécriture majeure de l’ensemble du projet, avec donc des changements incompatibles avec les versions précédentes. Pour ce que vous devez savoir lorsque vous passez de la version 3 à cette nouvelle version de Bootstrap, les changements généraux les plus notables sont :

activation de Flexbox par défaut ;
passage du préprocesseur CSS Less à Sass pour les fichiers source CSS ;
passage de l’unité de mesure px à l’unité relative rem en tant qu’unité CSS principale. Les pixels sont toutefois encore utilisés pour les requêtes média et le comportement de la grille ;
passage de la taille de police globale de 14px à 16px ;
réorganisation des niveaux de la grille pour ajouter une cinquième option (pour les plus petits périphériques à 576px et moins) et suppression de l’infixe -xs de ces classes ;
remplacement du thème facultatif séparé par des options configurables via des variables SCSS ;
révision du système de build pour utiliser une série de scripts NPM au lieu de Grunt ;
l’utilisation non responsive de Bootstrap n’est plus prise en charge ;
suppression du Customizer en ligne en faveur d’une documentation d’installation plus complète et de builds personnalisées ;
ajout de plusieurs dizaines de nouvelles classes utilitaires pour les paires propriété-valeur CSS communes et les raccourcis d’espacement margin/padding.

Ce qu’il faut retenir en ce qui concerne les changements importants au niveau du système de grille c’est il y a plus flexibilité avec le passage à Flexbox. On note en outre la mise à jour des noms de classe de grille et un nouveau niveau de grille, mais également la mise à jour des tailles de grille, des mixins et des variables.

Pour ce qui est des composants, on peut citer parmi les changements notables la suppression des panneaux, des vignettes et des puits pour un nouveau composant englobant, appelé cartes. Les cartes sont des conteneurs flexibles et extensibles. Elles incluent des options pour les headers et les footers, une grande variété de contenu, des couleurs d’arrière-plan contextuelles et de puissantes options d’affichage. On a aussi, pour les changements relatifs aux composants, la suppression de la police d’icône Glyphicons, et du composant pager de Bootstrap comme il s’agissait essentiellement de boutons légèrement personnalisés. À cela, on peut ajouter la refactorisation de presque tous les composants pour utiliser plus de sélecteurs de classes non imbriqués.

Enfin, côté support des navigateurs, on notera la suppression du support d’Internet Explorer (IE) 8 et 9 et des navigateurs sur iOS 6. Bootstrap 4.0 ne va supporter que IE10+ et iOS 7+. Pour les sites qui ont besoin des versions qui ne sont plus supportées, il est donc recommandé d’utiliser la version 3 de Bootstrap. La nouvelle version du framework pour le développement mobile first et responsive sur le Web vient également avec un support officiel pour le navigateur et WebView sur Android v5.0 Lollipop. Les versions antérieures du navigateur Android et de WebView ne sont prises en charge que de manière non officielle.

Autres aticles de la rubrique

Vidéo du jour

Duel de la semaine

Newsletter

Je souhaite rester informé et recevoir toutes les informations sur TechDeGeek dans ma boite mail