Maison >interface Web >Tutoriel d'amorçage >Une brève discussion sur les différences entre Bootstrap3 et Bootstrap4

Une brève discussion sur les différences entre Bootstrap3 et Bootstrap4

青灯夜游
青灯夜游avant
2021-05-14 11:15:152527parcourir

Cet article vous présentera les différences entre Bootstrap3 et Bootstrap4. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion sur les différences entre Bootstrap3 et Bootstrap4

Différences entre Bootstrap3 et Bootstrap4

Bootstrap3  

Bootstrap4

 Less预处理 Sass预处理

bootstrap3 共有4种栅格类,依次是:

特小(col-xs-)  (<=768px)

小(col-sm-) (>=768px)

中(col-md-)  (>=992px)

大(col-lg-)  (>=1200px)

Bootstrap 4 共有5种栅格类,依次是:

特小(col-)  (<576px)

小(col-sm-) (>=576px)

中(col-md-)  (>=768px)

大(col-lg-)  (>=992px)

特大(col-xl-)  (>=1200px)

bootstrap3的栅格系统是使用浮动(float)的布局方式 Bootstrap 4使用弹性盒模型(flexbox)的布局方式
使用px为单位     使用rem和em为单位(除部分margin和padding使用px)
Bootstrap3

Bootstrap4
Moins de prétraitement Prétraitement Sass
bootstrap3 a un total de 4 classes de grille, dans l'ordre :
  • Extra petit (col-xs-) (<=768px)

    Petit (col-sm-) (>=768px)
  • Moyen (col-md-) (> ;=992px)

    Large (col-lg-) (>=1200px)
  • Bootstrap 4 a 5 types dans Classe Raster totale, dans l'ordre :

    Extra petit (col-) (<576px)
  • Petit (col-sm-) (>=576px)

    Moyen (col-md-) (>=768px)
  • Grand (col-lg-) (>=992px)

    Extra grand (col-xl-) (>=1200px )
  • Le système de grille de bootstrap3 utilise une méthode de disposition flottante Bootstrap 4 utilise la méthode de disposition du modèle de boîte flexible (flexbox)
    Utiliser px comme unité Utilisez rem et em comme unités (sauf pour certaines marges et remplissages qui utilisent px)

    Fonctionnalités Bootstrap4

    La nouvelle couche de grille est adaptée au terminal mobile Introduction complète des nouvelles fonctionnalités ES6 (réécriture de tous les plug-ins JavaScript ) ; fichiers CSS réduits d'au moins 40 % Tous les documents sont réécrits avec l'éditeur Markdown ; Prend en charge Internet Explorer 10 et supérieur, ne prend pas en charge IE9 (même si la plupart sont compatibles, ce n'est toujours pas recommandé) Pour plus de connaissances liées à la programmation, veuillez visiter :  ; Vidéo de programmation ! !

    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!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer