Bootstrap 4 en approche

bootstrap 4 alpha dévoilée

Le 19 août dernier, l’équipe en charge du développement de Bootstrap a annoncé sur le blog l’arrivée de la version alpha de Bootstrap 4. On peut dors et déjà en apprendre plus sur les principaux changements et les grandes nouveautés de la version 4.

C’est l’info du moment ! On s’attendait à une release de Bootstrap (comme chaque année maintenant) et celle-ci a été annoncée en fin de semaine dernière sur le blog officiel. Aussi tôt annoncée, aussi tôt disponible en version Alpha (première version teste qui sera améliorée et modifiée avant une version de production finale).

De manière générales, la version 4 apporte un rafraîchissement graphique subtile (mais appréciable) ainsi que des nouveaux composants tels que les Cards ou de nouvelle balise telle que <progress> pour les barres de progression, remplaçant ainsi la classe .progress.

 

nouveau look pour les boutons

nouveau look pour les boutons

 

Passage de LESS à SCSS

Une des très grosse nouveauté de la version 4 de Bootstrap est le changement de langage au niveau du code source CSS. En effet, Bootstrap était jusqu’alors fondé sur une base LESS CSS. Ce ne sera plus le cas dans la nouvelle version. L’équipe de Bootstrap a fait le choix de passer sous SASS et plus précisément sur une version évoluée appelée SCSS ou « Sassy CSS » (elle apporte une nouvelle syntaxe similaire à une écriture CSS classique).

 

Bye Bye Pixel, bonjour REM

Non, je ne parle pas d’un célèbre groupe de rock mais bien d’une unité de mesure permettant d’appliquer des règles responsive à la grille et autres padding et margin de Bootstrap. Comme vous le savez, le framework s’oriente vers une approche « Mobile First » du web. Bootstrap favorise l’affichage mobile avant tout et ce genre d’unité de mesure suit parfaitement la philosophie adoptée.

EM ou REM ? le « rem », qui signifie « root em » est définit sur la balisequi l’utilise directement et non la balise parente comme le fait « em ». Cela signifie que nous pouvons ne définir qu’une seule taille de police sur l’élément html dans le CSS, puis, composer toutes les tailles en « rem » comme pourcentages de cette valeur initiale.
les navbars font peau neuve

les navbars font peau neuve

 

 

Système de Flexbox

Flexbox est un système de grille dynamique qui va vous permettre avec Bootstrap de réadapter votre grille en fonction de la taille d’écran. L’approche est similaire au plugin Flexboxgrid et je vous invite à aller jeter un petit coup d’oeil sur leurs exemples pour comprendre le fonctionnement « flex ». L’idée principale derrière la disposition « flex » display: flex; est de donner au conteneur la possibilité de modifier la largeur et/ou la hauteur et/ou l’ordre de son contenu pour remplir au mieux l’espace disponible. Un conteneur « flex » élargit son ou ses composants pour remplir l’espace libre disponible, ou les diminue pour éviter tout débordement.

 

Vous voulez en savoir plus ?

 

Professionnel du web depuis 10 ans, je m'affaire à mettre un point d'honneur à l'accessibilité mobile. Je suis un amoureux inconditionnel du responsive design et du framework Bootstrap depuis ses débuts.

1 Comments

  1. Pingback: Créer des boutons "outline" avec Bootstrap 4MonBootstrap

  2. Pingback: Thèmes officiels Bootstrap 4 - MonBootstrapMonBootstrap

  3. Pingback: Nouvelle version alpha de Bootstrap 4 - MonBootstrapMonBootstrap

  4. Stephanie

    Je 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 * bip *.

Leave a Reply

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