Maison >interface Web >Tutoriel d'amorçage >La différence entre bootstrap3 et bootstrap4

La différence entre bootstrap3 et bootstrap4

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼original
2019-07-17 16:52:434263parcourir

La différence entre bootstrap3 et bootstrap4

Avant-propos : Après l'émergence de bootstrap4, les inconvénients de bootstrap3 ont été modifiés pour le rendre plus pratique pour les développeurs front-end utilisant le framework. (bootstrap est appelé bs ci-dessous)

1. Système de grille

Par rapport au bs3 d'origine, le bs4 a une plage d'adaptation plus large. Parmi les xs sm md lg du passé bs3, bs4 a ajouté une gamme xl pour s'adapter à l'écran ultra grand. ​

La différence entre bootstrap3 et bootstrap4

La version originale utilisait toutes la disposition float, et la nouvelle version utilise la disposition flex. Et dans la nouvelle version, le système de grille col n'a pas besoin d'ajouter un nombre spécifié de colonnes. Par exemple, s'il y a 2 colonnes à la suite, elles seront automatiquement divisées en -6 et -6. Si l’une des trois colonnes spécifie son numéro de colonne, mais pas les deux autres, c’est (12-x/)2.

2. img-circle et round-circle dans la nouvelle version

Dans l'ancienne version, img-circle ne fonctionne que pour les images, tandis que dans la nouvelle version, le cercle arrondi fonctionne pour tous. Tous les éléments sont en vigueur, vous ne le saurez pas tant que vous ne l'utiliserez pas.

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

3. Objets multimédias

Suppression de media-left, media-. Seul le corps-média de droite y sera adaptatif. Si vous écrivez une image avant le corps, elle sera à gauche, et après le corps, elle sera à droite.

Four.display series/offset/margin/padding

Offset : col-[size]-offset-[x] n'est plus utilisé à la place Est offset-[ size]-[x]

Marge : ml marge gauche mr marge droite, mt marge supérieure, mb marge inférieure mx-direction horizontale my- direction verticale

ml- 1

Rembourrage : pl,pr,pt,pb, px,py

5. Couleur

informations secondaires primaires succès avertissement danger clair foncé

bg - [color]

texte -[color]

btn-[]

badge - [] correspondant au label bs3

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:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn