Bootstrap est l’un des frameworks frontaux les plus populaires pour la création de sites et d’applications web. Depuis sa sortie initiale en 2011, Bootstrap est passé d’un simple ensemble de code HTML et CSS à un écosystème massif comprenant des milliers de composants et de plugins. Avec chaque nouvelle version, Bootstrap ajoute plus de fonctionnalités et étend son champ d’action pour répondre aux besoins croissants des concepteurs professionnels et des développeurs amateurs. Sans aucun doute, Bootstrap 5 est l’une des plus grandes mises à jour jamais publiées. Dans cet article, nous allons voir quelles sont les nouvelles fonctionnalités ajoutées par cette version, explorer quelques changements intéressants dans la structure du code source et apprendre comment s’y mettre le plus rapidement possible.
Quoi de neuf dans Bootstrap 5 ?
Jetons un coup d’œil à certains des changements les plus importants de Bootstrap 5 : – L’équipe Bootstrap a entièrement reconstruit le code source à partir de zéro. Cela a donné lieu à un système plus moderne et modulaire qui devrait être plus facile à maintenir et à étendre à l’avenir. – Bootstrap utilise désormais Flexbox pour son système de mise en page. Cela signifie que tous les éléments de Bootstrap ont été repensés pour le Web moderne. – Le menu de navigation a désormais un comportement réactif pour les appareils mobiles et de bureau. Vous pouvez facilement basculer entre deux modes de navigation : un menu déroulant sur les appareils mobiles et une navigation latérale sur les ordinateurs. – Bootstrap prend désormais en charge une gamme étendue de points d’arrêt pour son système de grille réactive. Le changement le plus notable est l’ajout de points d’arrêt pour les tablettes et les écrans d’ordinateur larges. – Le code source de Bootstrap 5 a été entièrement réécrit à l’aide de npm et Webpack. En d’autres termes, Bootstrap est désormais un module JavaScript moderne construit avec ES2015 et d’autres outils de construction modernes. – Bootstrap 5 a été repensé de fond en comble pour offrir une meilleure expérience utilisateur à tous les utilisateurs. Le nouveau look est plus simple et plus facile à utiliser, que ce soit sur un ordinateur ou un appareil mobile. – Bootstrap 5 a simplifié un grand nombre de ses composants et plugins pour les rendre plus faciles à utiliser. Le nouveau code est également plus cohérent et plus facile à maintenir, ce qui permet de passer moins de temps à corriger les bugs et les problèmes.
Nouveau système de grille avec plus de points de rupture
Le système de grille réactive de Bootstrap 5 a été entièrement repensé pour utiliser la puissance de Flexbox. Cela vous permet de créer facilement des mises en page réactives personnalisées pour votre site Web et vos applications sans être un expert en CSS. La nouvelle grille a été étendue à un plus grand nombre de points de rupture, ce qui la rend adaptée à tous les types d’appareils, y compris les tablettes, les grands écrans et les écrans extra-larges. Le nouveau système de grille a une convention de dénomination plus intuitive, ce qui facilite la mémorisation des points d’arrêt et la création de grilles personnalisées pour votre contenu. Bootstrap 5 utilise un système de grille bidimensionnel où chaque axe a un nom : – Le premier axe est utilisé pour déterminer la largeur du contenu. Il peut s’agir d’une colonne unique ou d’une grille à plusieurs colonnes. – Le deuxième axe est utilisé pour déterminer la hauteur du contenu. Il peut s’agir d’une seule ligne ou d’une grille à plusieurs lignes. Le système de grille est basé sur un système à 12 colonnes, et chaque point d’arrêt a sa propre valeur de largeur. La valeur de grille par défaut pour un point d’arrêt correspond à 10 % de la largeur de l’écran, ce qui donne une mise en page de 100 pixels de large sur les ordinateurs et les smartphones. Pour les points d’arrêt plus grands, la largeur par défaut est de 21 %, ce qui donne une mise en page de 330 pixels de large sur les grands écrans.
Processus de construction plus rapide avec Webpack
Bootstrap 5 est construit avec npm et Webpack, ce qui facilite l’ajout, la suppression ou la mise à jour des composants et des plugins. En outre, cela facilite également l’ajout de code personnalisé pour construire des thèmes personnalisés. La première étape pour utiliser Bootstrap 5 est d’installer ses dépendances npm. Cela peut être fait en exécutant la commande : npm install –save bootstrap@next Cette commande téléchargera et installera automatiquement toutes les dépendances nécessaires pour utiliser Bootstrap 5 sur votre projet. Vous pouvez également utiliser Yarn au lieu de npm si vous préférez, bien que cela ne soit pas aussi courant. Une fois que les dépendances npm ont été installées, vous pouvez construire Bootstrap 5 en exécutant la commande suivante : npm run build Cela créera un nouveau dossier nommé dist dans votre dossier actuel, qui contient le code source de Bootstrap 5 et toutes les dépendances. En d’autres termes, la commande ci-dessus crée une version statique de Bootstrap 5 qui peut être utilisée dans n’importe quel projet.
Composants et plugins améliorés
Le code source des composants et des plugins de Bootstrap 5 a été retravaillé pour les rendre plus cohérents et plus simples à utiliser. En outre, de nombreux composants ont été simplifiés pour offrir une meilleure expérience aux débutants et aux utilisateurs avancés. Par exemple, le menu Dropdown a une syntaxe plus simple qui permet une personnalisation plus facile. En outre, le menu déroulant accepte désormais quelques nouvelles options qui le rendent plus facile à utiliser : – Le menu déroulant peut être déclenché manuellement en cliquant sur les éléments du menu ou en utilisant le clavier. – Le menu déroulant peut être fermé manuellement ou à l’aide d’une minuterie. – Le menu déroulant peut être configuré pour rester ouvert jusqu’à ce qu’une nouvelle sélection soit effectuée.
Résumé
Bootstrap 5 est une mise à jour majeure du framework frontal le plus populaire pour la création de sites et d’applications Web. La nouvelle version étend la portée de Bootstrap pour répondre aux besoins croissants des concepteurs professionnels et des développeurs amateurs. Les nouvelles fonctionnalités comprennent une base de code actualisée, une nouvelle navigation responsive, un système de grille plus étendu avec plus de points d’arrêt, un code source réécrit pour les composants et les plugins, et un processus de construction amélioré avec Webpack. Globalement, cela fait de Bootstrap 5 un framework front-end meilleur et plus stable que jamais.
