Bootstrap 3 vs Bootstrap 4 - Un aperçu

Bootstrap est le framework frontal open source le plus fiable pour développer des sites Web réactifs et mobiles. Bootstrap est un framework célèbre, Pourquoi ??? Parce que tout ce qu'il faut, c'est la connaissance de base du HTML et du CSS et nous pouvons créer un site Web attrayant et fonctionnel en utilisant des classes prédéfinies de bootstrap qui prennent en charge la réactivité sur différents appareils.

Bootstrap 3 est sorti en 2013 et la dernière version stable Bootstrap 3.3.7 est sortie en juillet 2016. En octobre 2014, Twitter a annoncé que Bootstrap 4 était en développement. La première version alpha de Bootstrap 4 est sortie en août 2015. Et maintenant en août 2017, la version bêta de Bootstrap 4.0.0 est sortie. Vous pouvez consulter ce didacticiel Bootstrap approfondi si vous souhaitez commencer à apprendre à partir de 0 .

Le centre d'attention de cet article sera les principales différences, ajouts et soustractions de la version 3 à la nouvelle version 4.0.0-beta.

Ce qui est différent dans la version 4 :

Nous pouvons maintenant commencer à parler des nouvelles fonctionnalités de Bootstrap 4. À mesure que la technologie évolue rapidement, des langages plus récents et plus intelligents sont développés pour simplifier la création de sites Web propres et rapides. C'est le cas avec la dernière version de Bootstrap. L'équipe affirme que cette "version 4 est une réécriture majeure de la quasi-totalité du projet". Nous résumerons quelques changements clés de cette amélioration.

Changements globaux :

• Passé de Less à Sass pour les fichiers CSS source.
• Passé de px rem en tant qu'unité CSS principale de Bootstrap, bien que les pixels soient toujours utilisés pour les requêtes multimédias et le comportement de la grille, car les fenêtres d'affichage de l'appareil ne sont pas affectées par la taille du type.
• La taille globale de la police est passée de 14px à 16px .
• Ajout d'un nouveau niveau de grille pour ~ 480 pixels et moins.

Système de grille:

L'étape majeure de Bootstrap 4 vers l'amélioration est son mouvement vers l'adoption de Flexbox. Dans le cadre de flexbox, inclut la prise en charge des classes d'alignement vertical et horizontal. Bootstrap 4 met beaucoup l'accent sur la personnalisation. Son nouveau système de niveau de grille permet au Bootstrap 4 de profiter de la présence de jusqu'à 5 niveaux de grille (exemple de 5 niveaux : .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). On peut facilement dire que Bootstrap 4 donne accès à un système de grille amélioré.

• Ajout d'un nouveau niveau de grille sm en dessous de 768px pour un contrôle plus granulaire. Il y a maintenant xs, sm, md, lg et xl. Cela signifie également que chaque niveau a été augmenté d'un niveau (donc .col-md-6 dans la v3 est maintenant .col-lg-6 dans la v4).
• Modification des points d'arrêt des requêtes multimédias du système de grille et des largeurs de conteneur pour tenir compte du nouveau niveau de grille et garantir que les colonnes sont divisibles de manière égale par 12 à leur largeur maximale.
• Les points d'arrêt de la grille et les largeurs des conteneurs sont désormais gérés via des cartes Sass ($grid-breakpoints et $container-max-widths) au lieu d'une poignée de variables distinctes. Celles-ci remplacent entièrement les variables @screen-* et vous permettent de personnaliser entièrement les niveaux de la grille.
• Les requêtes des médias ont également changé. Au lieu de répéter les déclarations de requête multimédia avec la même valeur à chaque fois, il y a maintenant @include media-breakpoint-up/down/only. Maintenant, au lieu d'écrire @media (min-width: @screen-sm-min) { … }, vous pouvez écrire @include media-breakpoint-up(sm) { … }.

Prise en charge du navigateur :

• Suppression de la prise en charge d'IE8 et d'iOS 6. La v4 est désormais uniquement IE9+ et iOS 7+. Pour les sites nécessitant l'un ou l'autre, utilisez la v3.

Classes utilitaires :

Dans Bootstrap 4, de nouvelles classes utilitaires ont été incluses sans entraver aucune fonctionnalité existante, quelle qu'elle soit. Ces ajouts importants sont ceux des classes d'alignement de texte réactif, des flottants réactifs et de l'intégration réactive. En plus d'offrir de nombreux raccourcis, ceux-ci permettent respectivement de modifier l'alignement du texte, le flottement des éléments et la mise à l'échelle du rapport d'aspect de tout média intégré. (exemple : .hidden-md-up masque un élément sur les fenêtres moyennes, grandes et extra-larges. Maintenant, au lieu de .hidden-md-up , utilisez .d-md-none ).

Images:

• Renommé .img-responsive en .img-fluid .
• Renommé .img-rounded en .rounded
• .img-circle renommé en .rounded-circle

Les tables:

• Les tableaux réactifs ne nécessitent plus d'élément d'habillage. En termes simples, dans Bootstrap 3, la classe .table-responsive doit être ajoutée au parent <div>. Mais dans Bootstrap 4 , la classe .table-responsive doit être ajoutée à l'élément <table> .
• Ajout d'une nouvelle option .table-inverse .
• Ajout de modificateurs d'en-tête de tableau : .thead-default et. .thead-inverse
• Classes contextuelles renommées pour avoir un .table- -. Par conséquent, .active .success , .warning , .danger et .table-info en .table-active , .table-success , .table-warning , .table-danger et .table-info.

La navigation:

Dans Bootstrap 4, le composant de navigation a été grandement simplifié. Il est nécessaire de créer une nouvelle liste d'éléments utilisant la dernière classe de base de navigation. Il y a quelques ajouts récents comme la classe nav-link, la classe nav-item et les styles de barre de navigation également.

• Composant réécrit avec flexbox.
• .navbar-default est maintenant .navbar-light , bien que .navbar-dark reste le même. Cependant, ces classes ne définissent plus background-color s ; au lieu de cela, ils n'affectent essentiellement que la color .
• .navbar-toggle est maintenant .navbar-toggler et a différents styles et balisage interne (pas plus de trois <span> s).
• Suppression complète de la classe .navbar-form . Ce n'est plus nécessaire; à la place, utilisez simplement .form-inline et appliquez les utilitaires de marge si nécessaire.
• Les barres de navigation n'incluent plus margin-bottom ou border-radius par défaut.

Un tableau de comparaison de Bootstrap Version 3 et Version 4

Comme nous l'avons déjà dit, l'équipe Bootstrap a réécrit le framework. Les changements ci-dessus ne sont donc que des changements clés que nous avons écrits ici. Pour lire en profondeur, veuillez suivre le lien Bootstrap 4.

Faut-il migrer vers Bootstrap 4 ou rester sur Bootstrap 3

Nous avons parlé des fonctionnalités offertes par Bootstrap 4. Nous pouvons voir que beaucoup de travail a été fait pour optimiser et nettoyer les éléments et les classes inutiles dans l'ensemble du framework. Bootstrap 4 promet d'être beaucoup plus rapide et rationalisé pour encore plus de flexibilité et de facilité lors de la création d'un site Web génial adapté aux mobiles.

Bootstrap 4, déplacé vers flexbox. Cela peut être considéré comme l'une des réalisations les plus importantes et les plus importantes. Cela offrira les avantages suivants :

• Grille basée sur Flexbox
• Nouveau niveau de grille XLl
• Dernière grille de mise en page automatique
• Options de personnalisation de la barre de navigation
• Nouveaux utilitaires d'espacement
• Configuration Sans Glyphicons (zone sans ballonnement)
• Taille réactive
• Flotteurs réactifs
• Marges automatiques
• Centrage vertical

Conclusion

Bootstrap a toujours facilité la vie des développeurs et par la mise à jour de la version, bootstrap a maintenant beaucoup plus de nouvelles fonctionnalités et options pour rendre les choses encore plus faciles pour les développeurs et c'est pourquoi les gens migrent de Bootstrap 3 vers Bootstrap 4 car il est plus pratique et accessible que son homologue précédent.