Différences entre Bootstrap 3 et 4
La description
Bootstrap est un framework front-end mobile first puissant et populaire pour la création de sites mobiles réactifs sur le Web à l'aide de framework HTML, CSS et JS.
Le tableau suivant montre les différences entre Bootstrap 3 et Bootstrap 4 -
| S.No. | Composant | Bootstrap 3 | Bootstrap 4 |
|---|---|---|---|
| 1 | Fichiers source CSS | MOINS | SCSS |
| 2 | Système de grille | Système de grille à 4 niveaux (xs, sm, md, lg) | Système de grille à 5 niveaux (xs, sm, md, lg, xl) |
| 3 | Unité CSS | px | rem |
| 4 | Taille de police | 14 px | 16px |
| 5 | Structure déroulante | Créé avec <ul> et <li> | Créé avec <ul> ou <div> |
| 6 | Colonnes de compensation | col-md-offset-4 | offset-md-4 |
| sept | Images | .img sensible classe | .img fluide classe |
| 8 | les tables | Ajouter une classe .table-responsive à l'élément <div> parent | Ajouter une classe .table-responsive à l'élément <table> |
| 9 | Glyphicons | Prise en charge | Non supporté |
| dix | Objets multimédias | Utilise des classes pour les objets multimédias, tels que .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list et .media-body | Utilise uniquement la classe .media pour les objets multimédias. |
| 11 | Tables sombres / inverses | Non supporté | Utilise la classe .table-dark pour créer des tableaux sombres / inverses |
| 12 | Cases à cocher et boutons radio | Affiche les cases à cocher et des boutons radio en utilisant .Radio , .Radio-ligne , .checkbox ou .checkbox-ligne des classes | Affiche les cases à cocher et des boutons radio en utilisant .form-chèque , .form-check-étiquette , .form-enregistrement d' entrée ou .form-enregistrement en ligne des classes |
| 13 | Taille du contrôle de formulaire | Augmenter ou diminuer la taille d'une commande d'entrée en utilisant .input-lg et .input-sm cours | Augmenter ou diminuer la taille d'une commande d'entrée en utilisant .form-control-lg et .form-control-sm cours |
| 14 | Texte d'aide | Afficher le texte d'aide à l'aide de la classe .help-block | Afficher le texte d'aide à l'aide de la classe .form-text |
| 15 | modes | Utilise les classes .btn-default et .btn-info sur les boutons | Utilise les classes .btn-secondary , .btn-light et .btn-dark sur les boutons et supprime la classe .btn-default . |
| 16 | Boutons de contour | Non supporté | Les boutons de style avec la couleur du contour en utilisant * .btn-SCHÉMA classe |
| 17 | Tailles des boutons | La classe .btn-xs est disponible | Disponible uniquement pour les classes .btn-sm et .btn-lg et a supprimé la classe .btn-xs |
| 18 | En-têtes de menu | Utilisez la classe .dropdown-header pour la balise li | Utilisez la classe d'en-tête .dropdown pour les balises h1 - h2 |
| 19 | Diviseurs | Utilisez la classe .divider dans l'élément li | Utilisez la classe .dropdown-divider dans l'élément div |
| 20 | Barres de navigation fixes | Fixer la barre de navigation vers le haut ou le bas à l'aide fixe .navbar-montantes et .navbar-à fond fixe des classes | Fixer la barre de navigation en haut ou en bas en utilisant .fixed-haut et .fixed-bas des classes |
| 21 | Téléavertisseurs | Alignez les pages à l'aide des classes .previous et .next | Non supporté |
| 22 | Jumbotron pleine largeur | Il n'utilise pas la classe .jumbotron-fluid sur les jumbotrons pleine largeur | Il utilise la classe .jumbotron-fluid pour les jumbotrons pleine largeur |
| 23 | Élément de carrousel | Utilise la classe .item pour les éléments de carrousel. | Utilise la classe d' élément .carousel pour les éléments de carrousel. |
| 24 | Puits, panneaux et miniatures | Prise en charge | Non supporté. Utilisez plutôt des cartes |
| 25 | Navs en ligne | Il n'inclut pas la classe .nav-inline | Afficher les navs en ligne à l'aide de la classe .nav-inline |