Guide d'initiation aux dernières classes d'utilitaire Bootstrap –

Bootstrap 4 est sorti en version stable (enfin!) Et nous a apporté beaucoup de nouvelles fonctionnalités intéressantes. L'un d'entre eux est un ensemble de classes utilitaires Bootstrap mises à jour sur lesquelles nous nous concentrerons dans cet article.

Présentation des classes d'utilitaire Bootstrap

Les classes d'utilitaire Bootstrap sont destinées à être appliquées à divers éléments. page pour les styliser rapidement d'une certaine manière sans avoir besoin d'écrire des règles CSS personnalisées. Dans de nombreux cas, vous fournissez simplement une classe pour votre élément et observez le résultat immédiatement. Si vous n'avez jamais utilisé de cours d'utilité auparavant, ne craignez rien: dans la plupart des cas, ils sont assez simples, mais puissants. Ils sont très pratiques car vous n'avez pas besoin de réinventer la roue et vous pouvez vous concentrer sur des tâches plus complexes lors de la création d'une application Web.

De nombreuses classes d'utilitaires Bootstrap définissent la position de l'élément, modifient ses propriétés d'affichage et de flottement. , ajustez les marges et les rembourrages, colorez le texte et l'arrière-plan, etc. Une liste complète de ces classes peut être trouvée sur le site officiel getbootstrap.com et dans cet article, je vais couvrir quelques classes utilitaires Bootstrap intéressantes qui peuvent grandement simplifier votre vie en tant que développeur. Donc, devons-nous commencer?

Flex

Flex est une nouvelle fonctionnalité très attendue de Bootstrap 4. Elle nous permet de gérer facilement la disposition et l'alignement d'un élément avec un tas de classes. Notez cependant que cette fonctionnalité repose sur sur la propriété display: flex qui n'est peut-être pas supportée par les anciens navigateurs. Il est intéressant de noter que le système de quadrillage de Bootstrap repose désormais également sur la flexbox.

Flex est un sujet assez important en soi et nous n'en parlerons pas complètement dans cet article. Permettez-moi de montrer rapidement quelques résultats que vous pouvez obtenir avec cette fonctionnalité.

Tout d'abord, il est possible de contrôler facilement la direction de vos éléments (c'est-à-dire s'ils seront affichés de gauche à droite ou de droite à gauche). Par exemple:

  
 Elément Flex 1 
  
 Elément Flex 2 
  
 Elément Flex 3 

Cela rendra trois éléments alignés à droite, avec le premier élément situé sur le right-most position:

L'ordre des éléments peut être encore contrôlé avec les classes comme ] order-N où N est le numéro de la position:

  
 Premier élément flexible 
  
 Deuxième élément flexible 
  
 Troisième élément flexible 

Notez que cette fonctionnalité prend en charge la réactivité avec les classes comme order-sm-1 .

Les éléments peuvent aussi être alignés d'une manière spécifique sur l'axe X ou Y. Par exemple:

  
 Élément Flex 

Cela va centrer l'élément sur l'axe Y:

Flotteur

Flotteur est un nouvel utilitaire qui remplace le bon vieux "tire" . Dans Bootstrap 3 vous écrirez:

 Tirez vers la gauche 

Dans Bootstrap 4:

 Flotteur vers la gauche! 

Une amélioration intéressante est que les flotteurs sont devenus réactifs aussi, ce qui signifie que vous n'avez pas besoin pour créer vos propres styles pour prendre soin de différents points d'arrêt. Par exemple, l'élément suivant flottera vers la droite uniquement sur les écrans moyens (ou plus grands):

Affichage

La propriété d'affichage a également été complètement retravaillée dans Bootstrap 4. Elle prend désormais en charge tous les écrans valeurs (de aucun à flex ) et est pleinement réactif. Les classes correspondantes ressemblent à .d- {breakpoint} - {valeur} :

• breakpoint peut avoir des valeurs de sm md lg ou xl . Si cette valeur est ignorée, xs est utilisé par défaut, ce qui signifie que l'affichage aura la même valeur sur toutes les fenêtres. La {valeur} est l'une de ces supporté par afficher propriété .

Cela signifie que vous pouvez masquer un élément pour les fenêtres comme ceci:

 Masquer sur les écrans plus larges que lg 

De plus, cet utilitaire fonctionne avec des mises en page d'impression aussi. Par exemple, un élément peut être caché pour l'impression:

 Écran seulement (Cacher à imprimer seulement) 

Dimensionnement

Avec Bootstrap 4 vous pouvez également contrôler le dimensionnement de vos éléments avec facilité. Supposons que nous voulions afficher un div qui occupe 25% de la largeur du parent:

 Largeur 25% 

Qu'en est-il de la hauteur? C'est aussi possible:

 Hauteur 25% 

Vous voulez fournir max-height ou max-width ? Utilisez les classes mh-100 ou mw-100 . Comme vous le voyez, rien de complexe!

Espacement

La fonction Espacement présente une large gamme d'utilitaires petits mais pratiques qui peuvent être utilisés pour définir rapidement les marges et les paddings de n'importe quel élément. Les développeurs paresseux comme moi vont sûrement adorer cet ajout!

Les classes correspondantes ressemblent à {propriété} {sides} - {taille} :

• {property} est soit m (marge) ou p (remplissage)
• {sides} peut avoir des valeurs comme t (haut) ou l ( la gauche). S'il a une valeur vide, le dimensionnement sera appliqué aux quatre côtés de l'élément
• {size} est un entier de 0 à 5 ou automatique . Cet entier spécifie un multiplicateur transmis à la formule qui calcule le dimensionnement résultant ($ spacer * MULTIPLIER) . La valeur par défaut de $ spacer est 1 rem . Par exemple 1 correspond au multiplicateur 0.25 2 correspond au multiplicateur 0.5 3 à la valeur de $ spacer seul, 4 correspond au multiplicateur 1.5 et finalement 5 correspond au multiplicateur 3

Le code suivant signifie que l'élément aura des marges gauche et droite avec la valeur de 1rem ( x signifie "Axe X"):

Text

Les utilitaires Text étaient disponibles dans Bootstrap 3, mais dans la nouvelle version, ils sont devenus

Alignement

Comme précédemment, vous pouvez spécifier l'alignement du texte et, par exemple, le centrer:

 Le texte est centré! 

De plus, ces classes d'utilitaires sont également réactives maintenant, ce qui signifie que nous pouvons centrer ce texte uniquement sur les vues extra-larges:

 Le texte est centré uniquement sur les très grands écrans! 

Transformer

Transformer est une nouvelle petite fonctionnalité qui peut changer le texte en minuscule, en majuscule ou en majuscule. Par exemple:

 capiTaliZed 

Cela affichera notre texte comme "CapiTaliZed" (seule la première lettre "c" est en majuscule):

Font Weights [19659055] Modifier le poids d'une police est maintenant aussi simple que possible:

 Texte en gras. 
 Texte léger. 

Couleurs

Vous pouvez désormais rendre votre site plus lumineux avec une collection de classes d'utilitaire Bootstrap pour couleur ! Cette fonctionnalité était déjà disponible dans la version précédente de Bootstrap, mais maintenant elle fournit de nouvelles classes et options. Par exemple, nous pouvons maintenant combiner la couleur et l'arrière-plan de la façon suivante:

 Texte 

Ceci affichera du texte rouge sur fond noir:

Dans l'ensemble, les classes qui changent la couleur du texte lui-même ressemblent à text- {color} . L'arrière-plan peut être modifié avec des classes comme bg- {color} .

Il y a aussi un support pour gradients d'arrière-plan mais il faut activer explicitement le $ enable -gradients Sass variable à true .

Borders

Ceci est une fonctionnalité nouvelle et assez cool de Bootstrap 4 qui vous permet de rapidement définir les bordures de n'importe quel élément (et même chaque bordure individuellement!).

Par exemple, le code suivant ajoutera une bordure grise pour l'élément:

Si, pour une raison quelconque, vous ne vous intéressez qu'à la bordure supérieure, alors écrivez ceci:

Les classes ressemblent à border- {side} où side peut avoir les valeurs suivantes:

• left
• right
• bottom
• top
• pas de valeur (dans ce cas, la bordure sera définie pour tous les côtés)

Nous pouvons être encore plus précis en utilisant ce qu'on appelle les classes de frontières soustractives . Ces classes ressemblent à peu près à celles listées ci-dessus, mais doivent se terminer par un -0 postfix: border- {side} -0 . Donc, si nous disons:

notre élément aura toutes les bordures sauf la plus haute. Vous pouvez combiner ces classes et, par exemple, n'afficher que les bordures gauche et inférieure:

Assez propre, hein?

Color 'Em All!

De plus, le ] border color peut également être modifié à l'aide des classes d'utilitaire Bootstrap. Les couleurs disponibles correspondent à celles qui figurent sur la page des couleurs

Ainsi, par exemple, nous pouvons dire ce qui suit pour que le texte de l'élément apparaisse en rouge:

Tweak the Radius

Enfin, le radius de n'importe quel élément peut être modifié aussi avec le aide aux classes suivantes:

• arrondie
• arrondie
• arrondie à gauche
• arrondie à droite
• arrondie [19659048] cercle arrondi
• arrondi-0

cercle arrondi ensembles border-radius d'un élément à 50% alors que arrondi-0 annule tout arrondi. D'autres classes arrondissent légèrement la bordure correspondante en définissant la valeur sur 0.25rem :

Embeds

Embeds est une nouvelle fonctionnalité de classes d'utilitaires Bootstrap qui pourrait grandement simplifier les choses pour vous. Comme son nom l'indique, il vous permet de créer des intégrations responsives qui ont un ratio spécifique sur différents périphériques.

Qu'est-ce que cela signifie? Supposons que vous souhaitiez afficher une vidéo YouTube sur votre site Web. Vous pouvez le faire comme ceci:

Cela permettra de s'assurer que le rapport de la vidéo est toujours de 16: 9 et qu'elle évoluera correctement! Il existe d'autres ratios disponibles:

• embed-responsive-21by9
• embed-responsive-16by9
• embed-sensible-4by3
• embed-responsive-1by1

Close Icon

Dernier mais non le moindre est ce petit utilitaire qui fait ce qu'il dit: affiche une icône de fermeture . Une chose à retenir est de spécifier du texte pour les lecteurs d'écran de la manière suivante:

   & times; 

Cela ressemble à ceci:

Conclusion

Dans cet article, nous avons discuté des classes d'utilitaires Bootstrap qui simplifient le style des différents éléments de la page Web. Nous avons couvert les utilitaires comme flex, display, border, et vu quelques exemples de leur utilisation. Bien sûr, il y a plus à ces classes, alors assurez-vous de parcourir la documentation officielle où vous trouverez des exemples encore plus utiles.

Aimez-vous les nouvelles fonctionnalités de Bootstrap 4? Existe-t-il des classes d'utilitaire Bootstrap spécifiques que vous avez trouvées particulièrement utiles ou intéressantes? Partagez votre opinion dans les commentaires, et n'hésitez pas à poser vos questions!

Si vous avez entendu parler de Bootstrap mais que vous avez retardé l'apprentissage parce que cela semble trop compliqué, alors jouez notre Introduction à Bootstrap 4 cours pour une introduction rapide et amusante à la puissance de Bootstrap.

Ilya Bodrov est professeur d'informatique personnelle, ingénieur senior travaillant chez Campaigner LLC, auteur et assistant d'enseignement chez Sitepoint et conférencier au Moscow Aviations Institute. Ses principaux langages de programmation sont Ruby (avec Rails) et JavaScript. Il aime coder, enseigner aux gens et apprendre de nouvelles choses. Ilya possède également des certificats Cisco et Microsoft et travaillait comme tuteur dans un centre éducatif pendant quelques années. Pendant son temps libre, il tweete, écrit des posts pour son site participe à des projets OpenSource, fait du sport et joue de la musique.