Share
Bootstrap, l’un des frameworks front-end les plus populaires parmi les concepteurs Web, a récemment lancé son très très attendue version 4! Voyons ce qui est nouveau, ce qui a été supprimé et ce que vous pouvez en faire..
Nous n'avons jamais cessé d'y croire et espérons que vous ne l'avez pas non plus! Bootstrap 4.0.0 a enfin atterri! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18 janvier 2018
Selon Mark Otto et son équipe, cette itération de Bootstrap est une «réécriture majeure de l’ensemble du projet». Cela promet beaucoup d’améliorations et suggère également qu’il ya beaucoup de choses à penser si vous envisagez de migrer des projets existants vers cette nouvelle version. Il n'y a pas de «changements radicaux», mais il y a beaucoup à prendre. Il est temps d'intervenir et d'examiner les caractéristiques les plus importantes..
Traditionnellement, la disposition de Bootstrap était optimisée par des styles basés sur des flottants. Dans les versions récentes, une alternative à la flexbox était disponible, mais compte tenu de la large prise en charge de son navigateur, flexbox est désormais le maître des grilles Bootstrap. La technologie CSS à la base des grilles Bootstrap ne fait pas une différence énorme, mais la flexbox offre plus de flexibilité que les flottants. Les grilles basées sur la flexbox offrent donc un peu plus d'options. Par exemple, utiliser flexbox signifie que vous pouvez définir une colonne et redimensionner automatiquement ses frères et sœurs..
Le mouvement en faveur de flexbox a en réalité entraîné un autre changement: la prise en charge du navigateur. Bootstrap v4 a officiellement abandonné la prise en charge d'Internet Explorer 8, 9 et iOS 6. Cela signifie que vos sites Web Bootstrap ne prendront en charge que IE10 + et iOS 7+. Cela vaut la peine de prendre note de.
Les fans de Sass seront ravis d'apprendre que Bootstrap est désormais officiellement un projet Sass-first. Si vous téléchargez le code source Bootstrap, vous trouverez un dossier appelé «Sass» dans lequel vous verrez tous les partiels nécessaires. “_Variables.scss” contient toutes les variables et tous les paramètres nécessaires, puis “bootstrap.scss” regroupe tous les @importation directives vous permettant de personnaliser votre installation Bootstrap en incluant ou en excluant les composants de votre choix.
Bootstrap v4 a abandonné des pixels au profit d’unités de mesure relatives telles que rems. Cela rend le tout plus évolutif, donc si vous ne vous êtes pas encore habitué à utiliser des unités de mémoire rem, il serait temps de jeter un coup d'œil à ces ressources:
Outre le fait que Bootstrap s'éloigne des dispositions basées sur les flottants, sa réactivité s'accompagne désormais d'un niveau supplémentaire. À partir de maintenant, vous pourrez personnaliser ces cinq paramètres par défaut:
points de rupture de la grille: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)! default;
Le prochain changement notable prend la forme d'un nouveau fichier de réinitialisation. «Reboot» prend les réinitialisations de Normalize, qui utilisent uniquement des sélecteurs d’éléments, puis s’appuient sur des styles de réinitialisation basés sur les classes .table et .bordé de table enterré là-bas avec plusieurs autres).
Si vous avez déjà téléchargé une version antérieure de Bootstrap, vous serez familiarisé avec le personnalisateur en ligne. Cet outil vous a permis de cocher et décocher différents aspects du framework Bootstrap afin de créer votre version idéale..
Eh bien, c'est parti.
Au lieu de cela, Bootstrap se concentre maintenant sur sa propre structure modulaire, vous permettant d’exploiter Sass de votre côté, d’inclure uniquement ce dont vous avez besoin et de compiler votre propre résultat final déployable. .
Fais le toi-mêmeBootstrap n'inclut plus les glyphicons. Au lieu de cela, il vous est conseillé de trouver vos propres favoris et de les inclure comme bon vous semble. L'équipe Bootstrap elle-même préfère les ensembles suivants, que nous vous recommandons d'implémenter en tant que SVG plutôt qu'en utilisant des icônes de polices Web:
Le pouce levé d'IconicLes versions précédentes de Bootstrap incluaient le support Grunt pour automatiser de nombreuses tâches courantes; c'est maintenant parti. Au lieu de cela, Bootstrap est maintenant livré avec un tas de scripts npm que vous trouverez dans le fichier “package.json”. Vous pouvez vous en servir pour surveiller les modifications apportées à vos fichiers Sass, effectuer des tests de charpie sur votre JavaScript ou simplement utiliser lancer npm dist tout faire et compiler une version de distribution de votre site Web fini.
Pour plus de détails sur le fonctionnement de Bootstrap et Node.js, consultez la documentation de l'outil de construction ou consultez les didacticiels suivants:
Outre ces modifications majeures, plusieurs modifications mineures ont été apportées à la dernière version de Bootstrap. Les fans de composants tels que les panneaux, les vignettes et les puits seront déçus d'apprendre que ceux-ci ont été supprimés. Cependant, ils ont cédé la place à un composant global appelé «carte», ce qui représente en réalité une grande amélioration. Vous pouvez en savoir plus sur ces modifications, et plus encore, sur la page Migration..
Restez à l'écoute pour plus de tutoriels et de cours sur Bootstrap 4 sur Tuts +, et à la prochaine!
Accentsconagua