Modificateurs de niveau texte

Dans le domaine de GCweb, les modificateurs de niveau texte jouent un rôle essentiel dans la définition des aspects visuels et fonctionnels du texte d'un site Web. Ils permettent aux développeurs Web d'affiner les attributs de texte tels que la taille, la couleur, le poids et le style, garantissant ainsi que le contenu textuel est non seulement esthétique, mais également accessible et facile à lire.

.stretched-link

Utilisé pour rendre un bloc entier cliquable, en « étirant » efficacement un lien hypertexte sur l'ensemble du bloc. Assurez-vous que l'élément que vous souhaitez rendre cliquable est positionné. Cela peut être fait en ajoutant position: relative à un élément.

<div class="positon-relative"><a class="stretched-link" href="#">Lien étiré</a></div>

.small

Diminue la taille de la police de l'élément.

Exemple de texte en petit format

<p class="small">...</p>

.mark

Met le texte en surbrillance

Exemple de texte en surbrillance.

<p class="mark">...</p>

.lead

Augmente la taille de la police et la hauteur de la ligne.

Exemple de texte d'introduction

<p class="lead">...</p>

.nowrap

Empêche le retour à la ligne du texte.

<div class="row">
	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
		<div class="well">
			<p class="nowrap">Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		</div>
	</div>
</div>

.fnt-nrml

Réinitialise le font-weight à normal.

L'élément suivant a un [font-weight] normal.

<p>L'élément suivant a un <strong class="fnt-nrml">[font-weight]</strong> normal.</p>

.text-*

Peut être utilisé pour aligner du texte ou modifier sa casse.

.text-nowrap

Empêche le retour à la ligne du texte.

<div class="row">
	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
		<div class="well">
			<p class="text-nowrap">Texte d'exemple: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		</div>
	</div>
</div>

Alignement du texte

.text-left

Alignement à gauche

<p class="text-left">...</p>

.text-right

Alignement à droite

<p class="text-right">...</p>

.text-center

Aligné au centre

<p class="text-center">...</p>

.text-justify

Texte justifié. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas magnam odit tenetur veniam sed ! Iusto adipisci eius autem magnam erreur. À son alias earum, corrupti aspernatur culpa repudiandae aperiam amet labore magnam nemo praesentium a inventore accusantium quod velit quia nostrum ut aliquam ex debitis. Suscipit, inventer soluta ? Aspernatur, illo !

<p class="text-justify">...</p>

Transformation de texte

.text-lowercase

Texte en minuscules.

<p class="text-lowercase">Texte en minuscules</p>

.text-uppercase

Texte en majuscules.

<p class="text-uppercase">Majuscules Texte</p>

.text-capitalize

Texte avec la première lettre de chaque mot en majuscule.

<p class="text-capitalize">Texte avec la première lettre de chaque mot en majuscule.</p>