Bootstrap 4 Nouvelles fonctionnalités

La prochaine version majeure du framework Bootstrap sera bientôt disponible. La version alpha peut déjà être téléchargée sur le site Web de développement de Bootstrap, et le code source est également disponible sur Github..

Twitter Bootstrap est actuellement le framework frontal le plus populaire. Il permet aux développeurs de créer rapidement des sites Web mobiles et réactifs. Bootstrap permet d’utiliser intelligemment le trio frontal standard HTML5, CSS3 et Javascript. Il est actuellement utilisé par plus de 6 millions de sites sur le Web..

Bien que Bootstrap 4 soit encore en phase de développement (alors ne l'utilisez pas encore sur un site actif), les développeurs ont fait un travail fabuleux. Dans cet article, nous allons jeter un oeil à la nouvelle version qui comprend de nombreuses fonctionnalités intéressantes qui vont sûrement rationaliser et améliorer le flux de travail de développement frontal.

1. Sass au lieu de MOINS

Jusqu’à présent, Bootstrap utilisait LESS comme principal pré-processeur CSS, mais pour la nouvelle version majeure, les règles de style seront refactorisées en Sass, qui est beaucoup plus populaire parmi les développeurs front-end, dispose d’une base de contributeurs énorme, généralement plus simple à utiliser et plus possibilités. Merci au puissant Libsass Sass Complier écrit en C / C++ Bootstrap 4 compilera beaucoup plus rapidement qu'avant.

2. Nouveau niveau de grille pour les petits écrans

Bootstrap dispose d'un système de grille réactif sophistiqué qui permet aux développeurs de cibler des périphériques avec différentes fenêtres. Bootstrap 3 a actuellement 4 classes de grille pour les colonnes, .col-xs-XX pour les téléphones mobiles, .col-sm-XX pour les tablettes, .col-md-XX pour les ordinateurs de bureau, et .col-lg-XX pour les plus grands ordinateurs de bureau. Bootstrap 4 améliorera le système de grille avec un cinquième qui facilitera la tâche des développeurs. ciblez les plus petits périphériques sous une largeur de fenêtre de 480px.

La nouvelle classe de grille a pris le nom de la plus petite précédente et a poussé les noms actuels des niveaux de grille d'un cran vers le haut. Dans Bootstrap 4, les grands ordinateurs de bureau utilisent le .col-xl-XX sélecteur de classe. Il est important de savoir que, malgré le nouveau nom, ils n'ont pas ajouté de nouvelle classe pour les très grands écrans mais pour les très petits..

3. Introduit les unités CSS relatives

Bootstrap 4 abandonne enfin le support d'Internet Explorer 8. C'est vraiment une bonne chose, car cela leur permet de se débarrasser des polyfills embêtants et de les convertir en unités CSS relatives. Au lieu de pixels, la nouvelle version majeure sera utiliser des REM et des EM qui permettent de mettre en place une typographie sensible sur les sites Bootstrap. Cela augmentera également la lisibilité et rendra les sites plus accessibles aux utilisateurs handicapés..

Si vous souhaitez tester le fonctionnement des unités relatives avec le nouveau Bootstrap 4, consultez cette démonstration sur Codepen..

4. nouvelles cartes bootstrap

L’équipe de développement a décidé d’unifier certains éléments précédents de l’interface utilisateur de Bootstrap. Elle a donc décidé d’introduire un nouveau composant d'interface utilisateur appelé cartes. Les cartes remplaceront les anciens puits, miniatures et panneaux, et fourniront aux utilisateurs un flux de travail plus simple. Ne vous inquiétez pas, les cartes garderont des éléments familiers, tels que les titres, les en-têtes et les pieds de page des puits, les vignettes et les panneaux..

Comme les cartes seront plus flexibles que les composants d'interface utilisateur actuels, elles permettront un plus grand espace pour les implémentations créatives. Certains pionniers ont déjà mené des expériences sur Codepen avec des cartes Bootstrap. Vous pouvez les vérifier ou créer vos propres cartes.

5. Nouveau module de redémarrage

Le nouveau module de redémarrage remplace le précédent normaliser.css réinitialiser le fichier. Il ne l'abandonne pas; au contraire, il construit plus de règles sur elle. Le déménagement visait à inclure tous les sélecteurs CSS génériques et à réinitialiser les styles dans un fichier SCSS simple et convivial. Vous pouvez consulter le code source ici si vous souhaitez mieux comprendre le fonctionnement du nouveau module..

Il est bon de savoir que les nouveaux styles de réinitialisation définissent intelligemment la propriété CSS de la taille de la boîte sur boîte à bordure sur le élément, qui est donc hérité par chaque élément enfant de la page. La nouvelle règle de style rend les mises en page réactives plus gérables. Si vous souhaitez découvrir la différence entre les types de disposition content-box et border-box, consultez cette démonstration pratique fournie par CSS-Tricks.com (elle n'a pas été créée pour Bootstrap 4, elle montre simplement comment le dimensionnement de la boîte fonctionne généralement).

6. Support de la Flexbox optionnelle

Bootstrap 4 permet toutefois de tirer parti de Flexbox Layout de CSS3 - Internet Explorer 9 ne prenant pas en charge le module flexbox - la version par défaut de Bootstrap 4 utilise les propriétés CSS float et display pour implémenter une mise en page fluide.

Flexbox a une structure facile à utiliser qui peut parfaitement être utilisée dans une conception réactive, car elle fournit un conteneur flexible qui s’agrandit ou se rétrécit de manière à occuper au mieux l’espace disponible. Utilisez la fonctionnalité opt-in flexbox uniquement si vous ne pas besoin de soutien pour IE9.

7. Personnalisation variable variable

Toutes les variables Sass utilisées dans la nouvelle version de Bootstrap sont incluses dans un fichier unique appelé _variables.scss, qui rationalisera considérablement le processus de développement. Vous n’avez rien à faire à part copier les paramètres de ce fichier dans un autre fichier appelé _custom.scss changer les valeurs par défaut.

Vous pouvez personnaliser beaucoup de choses telles que les couleurs, l'espacement, les styles de lien, la typographie, les tableaux, les points d'arrêt de la grille et les conteneurs, le nombre de colonnes et la largeur des gouttières, etc..

8. Nouvelles classes d’utilité pour l’espacement

Bootstrap 3 possède déjà de nombreuses classes d’utilitaires pratiques, telles que celles qui changent de manière flottante ou clearfix, mais Bootstrap 4 en ajoute encore plus. le nouvelles classes d'espacement permettre aux développeurs de modifier rapidement les marges et les marges sur leurs sites.

La syntaxe pour les nouvelles classes est assez simple, par exemple en ajoutant le .classe m-a-0 lie une règle de style met les marges à 0 de tous les côtés de l'élément donné (margin-all-0). Alors que les marges utilisent le m- préfixe, les rembourrages sont coiffés avec le p- préfixe. Dans les documents de développement, vous pouvez consulter toutes les nouvelles classes d’utilitaires d’espacement..

9. Infobulles et Popovers alimentés par longe

Dans Bootstrap 4, les info-bulles et les popovers utilisent la bibliothèque supercool Tether, un moteur de positionnement permettant de conserver un élément parfaitement positionné juste à côté d'un autre élément de la même page. Cela signifie infobulles et popovers sera automatiquement placé correctement sur les sites Bootstrap 4.

N'oubliez pas que Tether étant une bibliothèque JavaScript tierce, vous devez l'inclure séparément dans le code HTML avant votre fichier bootstrap.js..

10. Plugins JavaScript refactorisés

L’équipe de développement a refactorisé chaque plugin JavaScript pour la nouvelle version à l’aide de EcmaScript 6. Grâce à une utilisation intelligente des dernières spécifications et aux améliorations les plus récentes, elle al’intention d’améliorer l’expérience frontale..

Le nouveau Bootstrap 4 a également subi d’autres améliorations de JavaScript, telles que vérification du type d'option, méthodes de démontage génériques, et Support UMD, tous travailleront ensemble pour que le framework frontal le plus populaire fonctionne plus facilement que jamais auparavant.

À lire: 10 alternatives légères à Bootstrap & Foundation