• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Gérez vos composants à l'aide de classes utilitaires

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bootstrap comprend un groupe de classes utilitaires que vous pouvez appliquer à la plupart des composants et éléments de votre page. Elles vous permettent de contrôler des aspects, tels que la couleur, la forme, le positionnement ou la taille de l’élément. Vous avez déjà rencontré certaines d'entre elles, telles que les classes .bg-*  pour contrôler la couleur d'arrière-plan, les classes .w-*  pour contrôler la largeur d'un élément et les classes .d-*  pour contrôler la propriété d'affichage d'un élément.

Dans ce chapitre, vous découvrirez d'autres classes utilitaires que vous pouvez utiliser pour améliorer le site de l'école d’informatique (Info School).

Espacez les éléments de votre site

Vous avez pu remarquer que certains éléments des pages du site sont plutôt rapprochés. En tant que site d’apprentissage, il serait de rigueur de donner un peu d’air à votre contenu pour favoriser sa lecture !

Heureusement, Bootstrap intègre ce genre de classes spécifiques. Celles-ci sont à juste titre nommées classes utilitaires d'espacement

Ces classes utilisent le format suivant :

  • {propriété}{côté}-{taille}   pour les écrans xs ;

  • {propriété}{côté}-{point d’arrêt}-{taille}  pour les écrans sm, md, lg et xl.

La propriété est définie par :

  • m - pour les classes qui définissent la marge externe ;

  • p - pour les classes qui définissent la marge interne.

Pour le côté, on utilise les lettres suivantes :

  • t - pour les classes qui règlent le haut de la marge ;

  • b - pour les classes qui règlent le bas de la marge ;

  • l - pour les classes qui règlent la marge gauche ;

  • r - pour les classes qui règlent la marge droite ;

  • x - pour les classes qui règlent les marges horizontales (gauche et droite) ;

  • y - pour les classes qui règlent les marges verticales (haut et bas) ;

  • laissez vide - pour les classes qui règlent à la fois les marges verticales et horizontales.

La taille est définie numériquement :

  • 0 - pour les classes qui suppriment la marge, la réglant sur 0 ;

  • 1 - (par défaut) pour les classes qui règlent la marge sur 0,25 rem ;

  • 2 - (par défaut) pour les classes qui règlent la marge sur 0,5 rem ;

  • 3 - (par défaut) pour les classes qui règlent la marge sur 1 rem (marge de base Bootstrap) ;

  • 4 - (par défaut) pour les classes qui règlent la marge sur 1,5 rem ;

  • 5 - (par défaut) pour les classes qui règlent la marge sur 3 rem ;

  • auto - pour les classes qui règlent la marge sur auto.

Par exemple :

  • Pour régler la marge externe du haut d'un élément sur 1,5 rem, ajoutez la classe   .mt-4  (m pour marge, t pour top (haut), 4 pour 1,5 rem).

  • Pour régler la marge interne de tous les côtés d'un élément sur 1 rem, ajoutez la classe   .p-3  (p pour padding (marge interne), 3 pour 1 rem).

  • Pour régler la marge interne verticale d'un élément sur 0, ajoutez la classe   .py-0  (p pour padding (marge interne), y pour haut et bas, c'est-à-dire les deux côtés dans le sens y, et 0 pour… 0).

  • Pour régler la marge externe horizontale d'un élément sur auto, ajoutez la classe   .mx-auto  (m pour marge, x pour gauche et droite, c'est-à-dire les deux côtés dans le sens x et auto pour… auto).

Vous pouvez ajouter ces classes utilitaires d'espacement aux éléments de la page, tels que les lignes, les boutons ou les cartes. Tout ce qui semble approprié pour fournir aux éléments de la page la quantité nécessaire d'espacement.

Notez que la formule des utilitaires d'espacement peut inclure un point d'arrêt :   {propriété}{côté}-{point d’arrêt}-{taille}.

En fonctionnant comme la grille Bootstrap, cela permet d'appliquer de l'espace en fonction de la zone de visualisation. Par exemple, lorsque les cartes sont empilées les unes sur les autres dans des écrans qui se trouvent au-dessous du grand point d'arrêt, appliquez une marge verticale. Cela permet de séparer sensiblement les cartes sur les pages Accueil et Cours de l'école d’informatique (Info School).

Testez les différents utilitaires d’espacement sur les cartes, le formulaire, les titres ou les autres éléments de la page, jusqu'à ce que cela vous convienne. Vous pouvez consulter le dossier partie-4/chapitre-3/spacing dans le dépôt Git du cours, à titre de comparaison.

Ajoutez des bordures et des ombres

Vous pouvez améliorer les cartes sur les pages Accueil et Cours du site en les faisant ressortir un peu plus. C'est assez simple à faire à l'aide des classes utilitaires bordure et ombre de Bootstrap.

Pour ajouter une bordure à un élément ou modifier la bordure par défaut, ajoutez une classe.border-{valeur}à l'élément. 

Pour contrôler la couleur de la bordure d'un élément, {valeur} peut être n'importe laquelle des options que vous avez rencontrées avec les classes .bg-*  et .button-*. À savoir, primary, secondary, success, danger, warning, info, light ou dark. Vous disposez également de l'option supplémentaire white pour la couleur de la bordure.

Le tableau suivant montre les classes disponibles pour contrôler l'ombre d'un élément :

Classe

Effet d'ombre

Valeurs CSS par défaut

.shadow-none

Aucune ombre

box-shadow: aucune

.shadow-sm

Petite ombre 

box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)

.shadow

Ombre normale

box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)

.shadow-lg

Grande ombre

Box-shadow: 0 1rem 3rem rgba(0,0,0,.175) 

Essayez des options différentes pour les bordures et les ombres de la carte sur les pages Accueil et Cours du site. Choisissez celles qui feront le mieux ressortir les cartes sur les pages. Puis testez-les sur différents éléments, pour voir si vous trouvez un effet que vous souhaiteriez ajouter.

Vous pouvez consulter le dossier partie-4/chapitre-3/bordures-ombres dans le dépôt Git du cours, si vous avez besoin de suggestions ou d'inspiration.

Utilisez la classe “lien étendu”

Nous utiliserons une autre classe utilitaire de Bootstrap pour améliorer les cartes sur les pages Accueil et Cours. Cette classe a été introduite dans Bootstrap version 4.3. Si vous voulez l'utiliser dans vos projets, vous devrez donc vous assurer d'utiliser cette version ou une version ultérieure.

La classe utilitaire lien étendu rend l’intégralité d’un bloc cliquable. 

Par exemple, si vous ajoutez la classe  .stretched-link  à l’élément  <a>  situé dans un composant tel qu’une carte, cette dernière deviendra cliquable dans son intégralité.

Ajoutez la classe  .stretched-link aux liens des cartes sur la page Cours (lessons.html) pour voir les améliorations que cette classe apporte !

En résumé

  • Bootstrap comprend des classes utilitaires d'espacement pour la gestion des marges internes et externes des éléments.

  • Utilisez les classes utilitaires de Bootstrap pour ajouter des bordures et des ombres aux composants et aux éléments.

  • Utilisez la classe .stretched-link pour améliorer la fonctionnalité du composant carte, afin de rendre l’intégralité du composant cliquable. 

Vous pouvez consulter le dossier partie-4/chapitre-3/stretched-link dans le dépôt Git du cours, si vous avez besoin de suggestions.

Maintenant que vous avez testé plusieurs classes utilitaires et composants de Bootstrap, vous êtes prêt à apprendre à personnaliser le thème de Bootstrap.

Exemple de certificat de réussite
Exemple de certificat de réussite