Introduction à la typographie Bootstrap

La typographie est l'une des dernières fonctionnalités du bootstrap. Il est particulièrement utilisé pour le style et la mise en forme des éléments de texte. En utilisant la fonction de typographie de bootstrap, quelqu'un est capable de créer des en-têtes, des paragraphes, d'autres éléments en ligne et des listes. Fondamentalement, le bootstrap utilise 1rem (16px) car la taille de la police, y compris la hauteur de ligne, reste 5. Par défaut, les familles de polices utilisées par le bootstrap sont sans serif, Arial, il définit la façon dont le contenu doit s'afficher sur le corps, la couleur d'arrière-plan sur le corps, utilise la police taille et hauteur de ligne pour créer des marges, des rembourrages, etc.

Caractéristiques de la typographie Bootstrap

Voici les différentes caractéristiques de la typographie comme suit:

1) Rubriques

Les en-têtes HTML sont divisés en

à

Rubrique Bootstrap
affiché en taille de police

Rubrique Bootstrap

affiché en taille de police

Rubrique Bootstrap

affiché en taille de police

Rubrique Bootstrap

affiché en taille de police
Rubrique Bootstrap
affiché en taille de police
Rubrique Bootstrap
affiché en taille de police

En utilisant du code HTML, il donne la sortie comme indiqué ci-dessous:

En utilisant la typographie Bootstrap, il est stylisé et formaté en utilisant les classes respectives comme indiqué ci-dessous:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Les résultats du code ci-dessus à l'aide de la typographie Bootstrap sont les suivants:

2) Rubriques réactives

Les titres réactifs sont l'une des meilleures choses que l'on puisse concevoir en utilisant la typographie. ce sont les éléments dans lesquels le texte est ajusté automatiquement en utilisant la classe responsive selon la taille de l'appareil. Ainsi, on peut facilement voir le même texte de manière appropriée sur différents appareils.

Ajoutez simplement la classe responsive dans votre balise d'en-tête comme suit:

Responsive Header

Il affichera donc la sortie sous la forme:

En-tête réactif.

Vous pouvez également vérifier le même texte sur les différents appareils ainsi qu'en redimensionnant le navigateur, il affichera les modifications.

3)

Cette balise est utilisée pour créer un texte secondaire plus léger et plus petit dans votre titre. Par défaut, il définit 85% de la taille de l'en-tête parent.

Exemple:

Example heading secondary text

Production:

h5 en-tête du texte secondaire

4)

Cette balise est utilisée pour mettre en évidence le texte.

Exemple :

Bootstrap Typography

Bootstrap Typography

Ceci est utilisé pour mettre en évidence le texte.

5)

Cette balise est utilisée pour marquer une abréviation. Les abréviations ont un soulignement par défaut et gagnent un curseur d'aide pour fournir un contexte supplémentaire au survol et aux utilisateurs des technologies d'assistance.

Exemple:

Il y a tellement de pays dans le monde, c'est le meilleur pays

6)

Indique le texte supprimé

Exemple:

Cette balise est utilisée pour afficher le texte supprimé.

Production:

Cette balise est utilisée pour montrer.

sept)

L'élément blockquote est utilisé pour présenter le contenu d'une autre source.

Exemple:

Blockquotes

Blockquotes

L'élément blockquote est utilisé pour présenter le contenu d'une autre source:


Il en faut très peu pour vivre une vie heureuse; tout est en vous, dans votre façon de penser. La vie, c'est comme jouer du violon en public et apprendre l'instrument au fur et à mesure.

Production:

Blockquotes
L'élément blockquote est utilisé pour présenter le contenu d'une autre source:

Il en faut très peu pour vivre une vie heureuse; tout est en vous, dans votre façon de penser. La vie, c'est comme jouer du violon en public et apprendre l'instrument au fur et à mesure.

8)
:

Cette balise est utilisée pour afficher une liste de descriptions.

Exemple:

L'élément dl indique une liste de description:


Pain

- Blanc

- Marron

Boissons froides

- Pepsi

Production:

L'élément dl indique une liste de description:

Pain
blanc
marron
Boissons froides
Pepsi.

9)

La déclaration de code en ligne doit être groupée dans l'élément de code.

Exemple:

Les éléments HTML suivants: span, section et div définissent une section dans un document.

Production:

Les éléments HTML suivants: span, section et div définissent une section dans un document.

10) Couleurs contextuelles

Ce n'est rien d'autre qu'une classe différente qui est utilisée pour transmettre du sens en utilisant différentes couleurs.
Il a différentes classes comme .text-muted, .text-info, .text-primary, .text-success, .text-warning, .text-danger.

Exemple:

Utilisez les classes contextuelles pour fournir du «sens à travers les couleurs»:

Ce texte est mis en sourdine.

Ce texte est important.

Ce texte indique le succès.

Ce texte représente quelques informations.

Ce texte représente un avertissement.

Ce texte représente un danger.

Production:

Ce texte est mis en sourdine.
Ce texte est important.
Ce texte indique le succès.
Ce texte représente quelques informations.
Ce texte représente un avertissement.
Ce texte représente un danger.

Où pouvons-nous utiliser

  • La plupart des concepteurs Web préfèrent utiliser la typographie bootstrap pour une meilleure apparence et convivialité du format de texte.
  • Il est particulièrement utilisé lors de la mise en forme et de la mise en forme du contenu texte.
  • La plupart du temps, il y a un problème concernant la réactivité du texte. La taille du texte varie selon les différents appareils. Donc, ces problèmes sont clarifiés en utilisant la fonctionnalité de typographie bootstrap.
  • La typographie Bootstrap est personnalisée de manière simple pour être présentée de manière attrayante à l'utilisateur final.
  • Ces éléments de texte sur une page Web seront toujours rendus via le lien vers la feuille de style Bootstrap 4 de la même manière, sauf que ces éléments sont remplacés par d'autres classes de style.
  • Le Bootstrap fournit aux développeurs des fonctionnalités de typographie pratiques pour leur permettre de créer facilement des en-têtes, des paragraphes, des listes et d'autres éléments en ligne qui seraient attrayants pour les lecteurs.

Conclusion

  • Comme pour tous les détails donnés dans le contenu ci-dessus, les différentes fonctionnalités de typographie de Bootstrap pour les en-têtes, les blocs de citation, le texte principal, le texte marqué, les abréviations avec des exemples appropriés.
  • Ces fonctionnalités robustes et jolies de Bootstrap en font un framework de développement frontal très populaire et unique qui est largement utilisé par de nombreuses organisations.
  • Le bootstrap est livré avec toutes les balises de typographie que nous voulons styliser, tout d'une balise à

    et toute la hiérarchie des titres.

Articles recommandés

Ceci est un guide de la typographie Bootstrap. Ici, nous discutons des différentes fonctionnalités de la typographie Bootstrap comme les en-têtes, les citations, les abréviations, les marqueurs, etc.

  • Commandes d'amorçage
  • Composants d'amorçage
  • Comment installer Bootstrap
  • Disposition d'amorçage

Catégorie:

Développement de logiciels