La typographie joue un rôle important lorsqu'il s'agit d'attirer l'attention d'un utilisateur. Dans la conception Web, la typographie fait référence à un style exquis votre texte afin qu'il semble attrayant pour l'œil humain. Quelle devrait être la taille de la police, les accords, l'alignement, le style, etc. Bootstrap 5 fournit diverses classes qui vous aident à styliser votre texte de différentes manières. Ce rapport traite de ces classes en détail.

Bootstrap 5 titres

Vous pouvez créer des en-têtes dans bootstrap 5 en utilisant le

pour

Tags comme vous le faites en html. Cependant, dans Bootstrap 5, vous remarquerez que les titres ont une famille de polices différente de celles créées en utilisant uniquement HTML. De plus, la taille de la police est réactive, ce qui signifie qu'elle change correspondant à la taille de la fenêtre du navigateur.

Exemple

Cet exemple démontre les titres de bootstrap 5.

Html

C'est un titre

C'est un titre

C'est un titre

C'est un titre

C'est un titre

C'est un titre

Nous avons simplement créé un conteneur div et placé des titres à partir de

pour

À l'intérieur de ce conteneur.

Sortir

Les titres de bootstrap 5 ont été créés avec succès.

Cours de cap

Bootstrap 5 permet à ses utilisateurs de faire ressembler d'autres éléments à des titres à travers l'utilisation du .H1 pour .H6 Des classes.

Exemple

Supposons que vous souhaitiez afficher un paragraphe en tant que titre, puis suivez l'extrait de code ci-dessous.

Html

C'est un paragraphe.

C'est un paragraphe.

C'est un paragraphe.

C'est un paragraphe.

C'est un paragraphe.

C'est un paragraphe.

Ici chacun des

Les éléments ont reçu un cours de tête différent.

Sortir

Les paragraphes étaient stylisés à l'aide de cours de cap.

Cours d'affichage

Si vous souhaitez agrandir vos titres avec un poids de police plus léger, vous pouvez attribuer vos cours en titres .affichage à travers .affichage-6.

Exemple

Voici comment ces cours d'affichage fonctionnent.

En-tête 1

En-tête 2

En tête 3

En tête 4

En tête 5

En tête 6

Dans le code ci-dessus, chacun

L'élément a reçu une classe d'affichage différente pour démontrer correctement le concept de ces classes.

Sortir

Les classes d'affichage fonctionnent correctement.

Petite classe

Dans le but de rendre une certaine partie d'un texte plus petit, le .petit classe ou le L'élément est utilisé.

Exemple

Supposons que vous vouliez un certain texte dans votre cap, puis suivez la démonstration ci-dessous.

Html

Bonjour Monde!

Ici, une rubrique a été créée et une partie de la rubrique a été réduite en taille en utilisant le petit classe. Une autre chose que vous remarquerez, c'est que nous avons utilisé la classe .texto Pour fournir une certaine couleur au texte. Vous pouvez utiliser des classes de couleur de texte de la même manière pour styliser vos éléments.

Sortir

Une partie de la rubrique a été réalisée avec succès.

Classe de marque

Nous voulons souvent mettre en évidence un certain texte pour le faire ressortir ou peut-être pour attirer l'attention des lecteurs. Dans bootstrap 5, vous pouvez le faire en utilisant le .marquer classe ou le élément.

Exemple

Soulignons un texte.

Html

Cet extrait de code montre comment soulignerun texte.

Ici, l'élément a été utilisé pour mettre en évidence un morceau du paragraphe généré dans le code ci-dessus.

Sortir

Le texte a été mis en évidence.

Classe Blockquote

Aux fins de citer le texte provenant d'autres sources, utilisez le .blocsquote classe dans le

élément.

Exemple

Supposons que vous vouliez citer un dicton d'une autre source.

Html

Certains disent…

Dans le code ci-dessus, pour citer un dicton, nous avons utilisé le

élément et écrit le dicton dans un

élément. Après, pour nommer la source du dicton, nous utilisons le .classe Blockquote-Footer dans la balise.

Sortir

Un dicton a été cité avec succès.

Classe principale

Afin de faire ressortir vos paragraphes .mener classe dans le

élément.

Exemple

Dans l'exemple ci-dessous, nous comparons un paragraphe normal avec un paragraphe avec une classe de tête pour montrer la différence entre les deux.

Html

C'est un paragraphe.

C'est un autre paragraphe.

Sortir

La classe principale fonctionne correctement.

Certains autres types de classes ainsi que leurs cours associés ont été répertoriés dans le tableau ci-dessous.

Types de classe	Des classes	Description
Alignement du texte	.démarrer par texte, .centre de texte, .texte	Pour aligner le texte.
Alignement de texte basé sur l'appareil	.Text-SM / MD / LG / XL-Start / Center / End	Pour aligner le texte en fonction de différents types d'appareils.
Transformation de texte	.text-lotcase, .textaine, .Capitalisation de texte	Pour transformer le cas du texte.
Coloration du texte	.texto-primaire, .texto, .succès texte, .texte-secondaire, .avance de texte, .danger de texte, .en texte	Pour fournir de la couleur au texte.
Emballage de texte et débordement	.habillage de texte, .texton, .brise-texte	Pour envelopper un texte ou casser un long mot.
Tronquant le texte long	.tronqué de texte	Pour casser un long texte.

Conclusion

Les cours de typographie dans Bootstrap 5 permettent à ses utilisateurs de styliser un texte apparaissant sur un site Web avec une grande facilité. Ces classes empêchent ses utilisateurs de fabriquer des feuilles de styles étendues ainsi, réduisant le nombre de lignes de code et gagnant beaucoup de temps et d'efforts. Les cours associés à la typographie dans Bootstrap 5 ont été démontrés dans cet article avec des exemples pertinents.