Différences : 1. Bootsrap3 utilise une disposition flottante et Bootstrap4 utilise une disposition flexible ; 2. Le système de grille dans Bootstrap4 n'a pas besoin d'ajouter un nombre spécifié de colonnes, mais Bootsrap3 ne le peut pas ; 3. Bootstrap3 a 4 types de grille et Bootstrap4 en a ; 5 types de grille.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version bootsrap4, ordinateur DELL G3
La différence entre Bootstrap4 et Bootstrap3
Bootsrap3 utilise une disposition flottante, tandis que Bootstrap4 utilise une disposition flexible
Bootstrap4 Le système de grille n'a pas besoin d'ajouter un nombre spécifié de colonnes, comme une ligne. Il contient 2 colonnes, et les lignes seront divisées également dans n'importe quelle taille.
Bootstrap3 n'a que 4 types de grille. types : (col-xs extra small, col-sm small, col-md, medium col-lg large)
Bootstrap4 a 5 types de raster (col-extra small, col-sm-small, col-md- medium, col-lg-large, col-xl -Extra large)
Bootstrap4 utilise rem comme unité
Bootstrap4 définit le décalage de colonne via offset-sm-4, tandis que Bootstrap3 utilise col-sm-offset- 4
Bootstrap4 ajoute un conteneur réactif tel que conteneur-sm, conteneur-md..., lorsque la taille de l'écran est plus petite que la classe de grille, il occupera tout l'écran
Remarque :
La hidden-xs,visible-xsclasse dans Bootstrap3 ne peut pas être utilisée dans Bootstrap 4
Si dans Bootstrap 4 Si vous souhaitez vous cacher à une certaine taille, vous devez vous référer au tableau suivant
| Bootstrap3 | Bootstrap4 |
|---|---|
| hidden -xs | d-sm-block |
| hidden-sm | d -sm-none d-md-block |
| hidden-md | d-md-none d-lg-block |
| hidden-lg | d-lg-none d-xl-block |
| visible-XS | |
| visible-SM-BLOCK D -MD-Aucun | |
| visible- md | d-md-block d-lg-none |
| visible-lg | d-lg-block d-xl-none |
| visible-xl | d-xl-block |
| Il convient de mentionner que l'utilisation de Hidden-sm en B3 ne se cachera que dans la taille sm, et les autres tailles seront affichées normalement en B4, si vous spécifiez simplement d-sm-none. , l'élément sera masqué dans la taille sm, mais les tailles supérieures à sm seront également masquées et les tailles inférieures à sm seront affichées normalement. Cela implique des problèmes de compatibilité ascendante, donc lorsque vous définissez l'élément sm pour qu'il soit masqué, vous devez également le définir. l'affichage de la taille md, comme indiqué dans le tableau ci-dessus, et ainsi de suite pour les autres | Masquer la compatibilité ascendante, affichant la compatibilité descendante
"]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
