Maison >interface Web >Tutoriel d'amorçage >Comment utiliser les cours de typographie de bootstrap pour styliser du texte?
Bootstrap fournit une variété de cours de typographie pour styliser du texte, ce qui facilite l'amélioration de l'attrait visuel et de la lisibilité de votre contenu. Voici comment les utiliser efficacement:
En-têtes : Bootstrap propose des cours pour les titres de h1
à h6
. Pour les utiliser, vous pouvez simplement appliquer la balise appropriée ou utiliser la classe .h1
sur .h6
pour styliser n'importe quel élément de texte pour ressembler à un titre.
<code class="html"><h1>Heading 1</h1> <p class="h2">Styled as Heading 2</p></code>
En-têtes d'affichage : pour les en-têtes plus grands et plus audacieux, utilisez les classes .display-1
à .display-6
.
<code class="html"><h1 class="display-1">Display Heading 1</h1></code>
Texte de plomb : Pour que un paragraphe se démarque, utilisez la classe .lead
.
<code class="html"><p class="lead">This is lead text.</p></code>
Éléments de texte en ligne : Utilisez des classes telles que .text-muted
, .text-primary
, .text-success
et autres pour modifier la couleur du texte en ligne.
<code class="html"><p class="text-muted">This text is muted.</p></code>
.text-decoration-underline
, .text-decoration-line-through
, et des classes d'alignement comme .text-start
, .text-center
, .text-end
. Poids de police et italique : vous pouvez utiliser .fw-bold
, .fw-normal
, .fst-italic
pour changer le poids et le style de la police.
<code class="html"><p class="fw-bold">Bold text</p> <p class="fst-italic">Italic text</p></code>
En utilisant ces classes, vous pouvez rapidement styliser des éléments de texte pour répondre à vos exigences de conception sans écrire CSS personnalisé.
Bootstrap fournit plusieurs classes pour ajuster les tailles et les poids des polices:
Tailles de police : Bootstrap utilise une échelle de .fs-1
à .fs-6
pour les tailles de police, fs-1
étant le plus grand et fs-6
le plus petit dans l'échelle prédéfinie.
<code class="html"><p class="fs-1">Large Text</p> <p class="fs-6">Small Text</p></code>
Poids de la police : pour les poids de police, Bootstrap a des classes allant de .fw-lighter
à .fw-bolder
, y compris .fw-normal
, .fw-bold
et .fw-semibold
.
<code class="html"><p class="fw-lighter">Lighter Text</p> <p class="fw-bold">Bold Text</p></code>
En utilisant ces classes, vous pouvez affiner l'apparence du texte pour répondre facilement à vos besoins de conception.
Les classes d'alignement du texte de Bootstrap vous permettent de contrôler efficacement l'alignement de votre texte à travers les différentes tailles d'écran. Voici comment vous pouvez les utiliser:
Alignement de base : utilisez .text-start
, .text-center
et .text-end
pour aligner le texte à gauche, au centre et à la droite, respectivement.
<code class="html"><p class="text-start">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">Right aligned text on all viewport sizes.</p></code>
Alignement réactif : Bootstrap fournit des classes réactives qui vous permettent de modifier l'alignement en fonction de la taille de la fenêtre:
.text-sm-start
, .text-md-start
, .text-lg-start
, .text-xl-start
et .text-xxl-start
pour l'alignement gauche..text-sm-center
, .text-md-center
, .text-lg-center
, .text-xl-center
et .text-xxl-center
pour l'alignement central..text-sm-end
, .text-md-end
, .text-lg-end
, .text-xl-end
et .text-xxl-end
pour l'alignement droit.Par exemple:
<code class="html"><p class="text-sm-start text-md-center text-lg-end"> This text will be left-aligned on small devices, center-aligned on medium devices, and right-aligned on large devices. </p></code>
En utilisant ces classes, vous pouvez vous assurer que votre texte est correctement aligné sur tous les appareils et tailles d'écran.
Pour créer des styles de texte réactifs à l'aide de bootstrap, vous pouvez utiliser des classes qui s'adaptent à différentes tailles d'écran. Voici quelques classes clés:
.fs-1
à .fs-6
fonctionnent sur toutes les tailles d'écran, mais pour un contrôle plus granulaire, vous pouvez utiliser des requêtes multimédias CSS personnalisées..display-1
à .display-6
Échelle de manière appropriée sur différentes tailles d'écran par défaut..text-sm-start
, .text-md-center
) pour ajuster l'alignement du texte en fonction de la taille de la vision..text-wrap
ou .text-nowrap
pour contrôler l'enveloppe de texte, et .text-truncate
pour tronquer du texte et afficher une ellipsis..text-decoration-underline
et les classes de couleurs telles que .text-primary
fonctionnent uniformément sur toutes les tailles d'écran, mais vous pouvez les personnaliser à l'aide de requêtes multimédias si nécessaire.Voici un exemple combinant ces éléments:
<code class="html"><p class="fs-3 text-sm-start text-md-center text-lg-end text-primary"> This text uses responsive font size, alignment, and color. </p></code>
En tirant parti de ces classes, vous pouvez vous assurer que votre texte est lisible et attrayant visuellement sur divers appareils et tailles d'écran.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!