Bootstrap 3 et 4 : Quelles différences ?

18 octobre 2017 - : HTML Bootstrap - : Pas de commentaire

Bootstrap 3 et 4 : Quelles différences ?

Certains d’entre-vous ont remarqué la sortie de Bootstrap 4 en tant que version par défaut disponible au téléchargement.

Pour une personne habituée à Bootstrap 3, cette version 4 peut être déroutante au premier abord. Elle est cependant plus efficace, résolument « Mobile First » et toujours aussi simple à mettre en oeuvre.

Faisons un inventaire des principales différences.

Un nouveau palier de Responsive Design

Un nouveau palier ? Qu’est-ce donc ?

Vous avez l’habitude de voir les mentions XS, SM, MD… qui sont des paliers du Responsive Design définis par Bootstrap. Un nouveau palier fait son apparition dans cette famille. En voici la liste ainsi que les largeurs d’écran correspondantes :

  • Extra small (XS) <576px
  • Small (SM) ≥576px
  • Medium (MD) ≥768px
  • Large (LG) ≥992px
  • Extra large (XL) ≥1200px

Vous pouvez donc remarquer que le nouveau venu est le palier Extra Large, qui cible les écrans de 1200 pixels de large et plus.

Dans le même temps, le XS s’applique à des appareils ayant des écrans de moins de 576px. Un col-sm-6 en version 3 est donc maintenant un col-md-6 en version 4.

De la Flexbox, de la Flexbox !!!

Oui, vous avez bien lu, les colonnes se positionnent maintenant en utilisant la Flexbox, et n’utilise plus les Float et autres. Vous verrez donc du display:flex dans le CSS.

Mais où est le XS ???

Bien que la taille XS existe toujours dans les paliers, sa mention a complètement disparu dans le code HTML. En effet, là où nous étions habitués à écrire col-xs-6, par exemple, un simple col-6 suffit dans cette version 4.

En résumé, toutes les mentions XS ont purement et simplement disparu. Vive le « Mobile First » ?

Bienvenue les Cards

Cette version 4 signe la disparition des vignettes (thumbnails), puits (wells) et panneaux (panels) et les remplace par les cartes (cards), qui en reprennent la plupart des fonctionnalités mais en ajoutent quelques unes très intéressantes comme la galerie d’images en style Masonry.

Nouvelles classes images

Les classes permettant de mettre en forme les images ont été renommées. Ainsi :

  • .img-responsive devient .img-fluid
  • .img-rounded devient .rounded
  • .img-circle devient .rounded-circle

La navbar…

De nombreux changements dans la navbar, tellement nombreux que le plus simple est de repartir du code exemple présent dans la documentation ?

Les outils responsive

Certaines classes étaient très utiles en version 3 afin de gérer le Responsive et d’adapter les éléments affichés et leur ordre en fonction de l’écran.

En version 4, il est encore possible de mettre en oeuvre les mêmes comportements, mais les classes à utiliser ont changé.

hidden et visible

Les classes .hidden et .visible ont été purement et simplement retirées.

Elles sont remplacées par des classes plus en phase avec leur comportement.

Ainsi, le .hidden-sm est remplacé par .d-sm-none (display:none), attention, d-none s’applique au xs. Le d-block affichera l’élément.

push, pull, offset ?

La modification de l’ordre des colonnes, par push-md-3 ou pull-lg-5 par exemple, a disparu pour laisser la place à une définition d’ordre de 1 à 12. Ainsi, un élément qui aura la classe order-md-2 se situera avant un élément qui aura la classe order-md-5.

Il était également possible, avec col-md-offset-3, par exemple, de décaler une colonne de 3 unités, laissant une colonne « vierge » à sa gauche. En version 4, les classes .ml-auto et .mr-auto (ou ml-md-auto pour l’appliquer à la taille d’écran md) permettent de gérer les marges gauche (ml) et droite (mr) des éléments.

Cet article n’est pas terminé et sera complété au fil des découvertes.

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Laisser un commentaire