Bootstrap V4 : quelles nouveautés pour 2016 ?

imageàlaUne

Bootstrap a vu le jour en août 2011 comme projet open-source sur Github. Depuis, le framework imaginé par Twitter est devenu, au fil des mises à jour, un incontournable pour développer des projets « responsive » et « mobile-first » sur le web. À l’aube de la sortie de Bootstrap v4, encore en version Alpha, revenons sur ce qui change.

Du passage de Less à Sass, à l’ajout de Flexbox, Cards ou Reboot en passant par le nouvel outil Tether, Thomas vous a concocté une sélection des évolutions majeures de cette nouvelle version de Bootstrap.

Besoin d'un développeur ?webmaster ?rédacteur ?

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le prestataire idéal.

Trouver un prestataire

L’utilisation de SASS, une personnalisation simplifiée

L’équipe de Bootstrap a décidé de laisser de côté le language dynamique de génération de feuille de style LESS, au profit du SASS, qui n’est autre qu’une version améliorée du SCSS. Pour accompagner ce changement, Bootstrap peut compter sur un nouveau système de compilation, plus rapide que jamais : Libsass.

Le fichier SASS va également servir pour le lancement de «Reboot», l’outil qui vient compléter le fichier «Normalize.css» en simplifiant l’utilisation des HTML resets.

Un système de grille repensé, encore plus flexible

Bootstrap a décidé de s’adapter aux nouvelles utilisations des sites web qui utilisent son framework, notamment en donnant plus d’importance aux appareils mobiles. En plus du passage à une nouvelle unité de mesure, avec le REM, pour déterminer ses règles en terme de responsive design, le framework utilise désormais un système de grille dynamique, Flexbox. Cet outil permet au contenu de s’adapter parfaitement à l’espace disponible, grâce à la valeur « display: flex » à placer dans le CSS.

Cards, encore et toujours plus de flexibilité

Il ne faut pas voir en ce nouvel outil, «cards» une véritable nouveauté, mais plutôt comme une amélioration des «wells, thumbnails, et panels» qui ont été retirés pour l’occasion. Ces «cards» caractérisés dans le HTML sous forme de tableau bénéficient de l’ajout de nombreuses options qui leurs permettent de s’intégrer plus facilement dans certaines zones, telles que le footer.

 

card-columns

 

Retrait du soutien IE8, fini les encombrements

En abandonnant le soutien IE8 et l’utilisation des unités rem et em, Bootstrap nous permet enfin de profiter pleinement du CSS3 ; terminé donc les hacks ou fallbacks. Pour les adeptes d’IE8, pas de panique, vous pouvez toujours utiliser la version 3 du framework.

Tether, des infobulles intelligentes

La nouvelle bibliothèque JavaScript, Tether, peut gérer efficacement l’auto-positionnement des infobulles et «popovers» sur les pages.

Tether inclut la possibilité de limiter l’espace de l’élément à une zone bien définie. S’il venait à dépasser de cette zone, il pourra être épinglé sur le bord, placé de l’autre côté de l’élément, ou disparaître.

Bootstrap v4 c’est aussi beaucoup d’autres nouveautés

Au niveau graphique, Bootstrap poursuit sa démarche toujours plus minimaliste à travers son design épuré en Flat design.

L’amélioration de sa documentation, rendue encore plus claire et entièrement rédigée en «Markdown». À noter également, l’ajout d’extraits de code prêts à l’emploi, dans une documentation déjà très bien fournie.

Le framework s’est (enfin) concentré sur l’ajout de nouvelles animations et transitions.

La personnalisation des menus a aussi été simplifiée, il est donc plus facile d’intégrer des éléments tels que des images ainsi qu’un deuxième niveau.

De nouveaux thèmes officiels

Le framework a profité de sa mise à jour pour proposer de nouveaux thèmes, « made in Bootstrap ». Cette distinction a un coût, 99$ tout de même pour chacun des 3 thèmes proposés. Vous pouvez également utiliser des outils pour créer des thèmes Bootstrap.

 

bs-themes

Avec cette 4ème version, Bootstrap ne déroge donc pas à sa volonté de proposer un service de qualité, simple et flexible en ajoutant toujours plus de fonctionnalités.

Convaincus par Bootstrap ? La version Alpha est disponible au téléchargement sur le site officiel.

Vous souhaitez moderniser et créer votre site internet avec Bootstrap mais vous ne savez pas comment faire ? Faites appel à un développeur Freelance, au meilleur prix, en déposant une annonce sur notre site internet Codeur.com.

3 Commentaires

  1. e trouve qu'il y a pas graaande chose dans la version 4 à l'exception de quelques améliorations core et je pense qu'on peut toujours faire avec la version 3 et je me permets de partager avec vous mon tuto sur Bootstrap 3 : http://bit.ly/1Ut96yp.

  2. mouais.... J'ai vue la version 4 de bootstrap alpha dès la notification de bootstrap, mais très franchement, il n'y a pas de quoi s'emballer car il n'y a pas beaucoup de nouveautés en rapport à ce que l'on demandait. Hormis le format rem, les flexbox les autres ajouts n'étaient pas forcément nécessaires.
    Vous auriez du plutôt faire un article objectif dans ce sens.
    Déjà le fait de passer à SASS et délaisser LESS je trouve cela très dommage car on peut faire déjà énormément de choses en terme d'architecture et maintenabilité avec less.
    On attendait un off-canvas dans le menu pour bootstrap 4 et des customs checkbox / radios d'origines. Et non toujours pas...
    Très franchement je ne vois pas l'utilité de ce nouveau bootstrap pas vraiment bien pensé.
    On sera toujours obligé de faire sa surcouche javascript, d'outils "récurrent" !
    Du coup bien des utilisateurs préférerons se retourner vers des UI-kit plus complet ou bien Materialize ou Semantic-UI.

    Concernant le bootstrap je préfère de loin rester sous la version 3 et pas de version 4.

  3. Aujourd'hui nous sommes en mai 2017, ça fait plus d'un an que cet article annonçant le sortie de Bootstrap V4 est paru mais le projet reste toujours en version alpha. Je pensais attendre la sortie de la version 4 stable pour donner un petit coup de jeune à mon site . Est-ce qu'il y a de nouvelles infos sur la mise à dispo de cette version ?

Laissez un commentaire

Votre adresse email ne sera pas publiée. Les champs requis sont indiqués *