Bootstrap 4 : Faisons un tour des nouveautés

de | avril 13, 2016

Bootstrap est certainement un des Frameworks css le plus connu et les plus utilisé. Si vous ne le connaissez pas encore, je vous invite à allez jeter un coup d??il sur le site officiel. Actuellement en version 3, le sujet qui nous intéresse ici est la prochaine itération du Framework. La version 4 est actuellement en alpha-2 et est disponible à cette adresse : http://v4-alpha.getbootstrap.com.

Cela fait quelque temps maintenant que je teste cette version et pour une version alpha, celle-ci est remarquablement stable. Le premier changement concerne la compatibilité avec les navigateurs. Comme beaucoup de Framework actuels, Bootstrap supprime le support d’Internet Explorer 8. La version 9 d’IE est supportée mais avec quelques fonctionnalités en moins. Si vous utilisez bootstrap en mode SASS, vous pouvez maintenant configurer le Framework en changeant quelques variables.

$spacer Contrôle l’espacement par défaut utilisé par Bootstrap pour calculer ses marges intérieures et extérieures
$enable-flex Permet d’activer le support de flex. J’en reparle juste après
$enable-rounded Active les arrondis sur les composants. A désactiver si vous recherchez un design plus « flat »
$enable-shadow Active le support des ombres sur les composants
$enable-gradient Active les dégradés sur les composants
$enable-transition Active des transitions prédéfinis sur les composants

Flexbox

Flexbox est une norme CSS plutôt ancienne (première version en 2009) mais qui perce actuellement du fait de son adoption par les principaux navigateurs, y compris IE 10. Après plusieurs refontes, cette norme est actuellement à l’état de ?Last Call Working Draft? (brouillon en dernier appel). Flexbox est un système de positionnement en « Boites Flexible ». Flexbox se propose de résoudre les problèmes des positionnements type block ou inline traditionnels comme le centrage vertical ou la mise à la même hauteur de plusieurs div en fonction du contenu. Pour plus d’informations sur l’utilisation de Flexbox, je vous redirige sur l’excellente introduction du site Alsacreations.

Card

Dans la version 3, bootstrap proposait le mécanisme des thumbnails pour permette notamment l’affiche d’image ou de galerie photo. Avec la version 4, les thumbnails mais aussi les panels et les « wells » disparaissent pour laisser la place aux Cards. Le composant Card est un conteneur de mise en forme de contenu hautement flexible et personnalisable. Avec lui, la création de galerie photo, d’article de blog ou de bloc de sidebar devient vraiment trivial. Les possibilités sont quasiment infinies.

Tooltip et Popover

Les composants tooltip et popover  évoluent et se basent maintenant sur la bibliothèque Tether. Ces composants ne fonctionnent pas dans cette version. C’est le seul bug que j’ai actuellement rencontré. Premièrement, il vous faudra importer manuellement la librairie si vous utilisez bower pour installer bootstrap. En effet bootstrap n’inclut pas Tether comme dépendance. Ensuite les tooltips et popover ne fonctionne tous simplement pas à l’heure actuelle.

Spacing

Bootstrap 4 propose des classes utilitaires forts pratiques afin de contrôler les marges intérieures et extérieures de vos composants. Ces classes s’écrive sous la forme

<propriété><orientation><taille>

Le premier paramètre est à choisir parmi les suivants :

  • m : Pour les marges extérieures ( margin )
  • p : Pour les marges intérieures ( padding )

L’orientation se définie comme suit :

  • t : pour top
  • b : pour bottom
  • l : pour left
  • r : pour right
  • x : pour left et right
  • y : pour top et bottom
  • a : pour l’ensemble des cotés.

Enfin la taille est comprise entre 1 et 3 fois la taille de la variable $spacer. Par défaut 1rem. Prenons un exemple. Pour augmenter la marge extérieure entre deux blocs (margin-bottom), j’ai juste à ajouter la classe m-b-1, au bloc supérieur. Simple non? Pour centrer un élément : m-x-auto.

Conclusion

A l’heure actuelle, les changements apportés à Bootstrap 4 s’annonce moins important que ceux entre la version 2 et 3. Néanmoins, le support de Flexbox et l’ajout du composant Card laisse entrevoir un grand nombre de possibilités. La conception de site « responsive » deviens encore plus simple et rapide. Je suis pour le moment vraiment enthousiaste et j’attends avec impatience la version final.

00

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.