Forum | Derniers tutoriels de développement web
 

Bootstrap CSS Typographie Référence


Bootstrap's des paramètres par défaut

Bootstrap's global par défaut font-size est 14px, avec une line-height de line-height de 1.428.

Ceci est appliqué à la <body> et tous les paragraphes.

En outre, tous les <p> éléments ont une marge inférieure qui est égale à la moitié de leur hauteur de ligne calculée (10px par défaut).


Typographie

Les éléments ci-dessous sont des éléments HTML qui seront stylés un peu différemment par Bootstrap que par défaut du navigateur. Regardez les «Try It» exemples pour voir les résultats / différences.

Les classes ci-dessous est utilisé pour le style des autres éléments.

Element / Classe La description Exemple
<h1> - <h6>
or
.h1 - .h6
h1 - h6 rubriques Essayez - le
<small> Crée un texte secondaire plus léger en toute position

Rubrique (texte secondaire)

Essayez - le
.small Indique le texte plus petit (fixé à 85% de la taille de la société mère): Texte plus petit Essayez - le
.lead Rend un texte se démarquer: Démarquez texte Essayez - le
<mark>
or
.mark
Faits saillants du texte: Le texte surligné Essayez - le
<del> Indique le texte supprimé: Le texte supprimé Essayez - le
<s> Indique le texte ne sont plus pertinentes: Non plus texte pertinent Essayez - le
<ins> Indique le texte inséré: Le texte inséré Essayez - le
<u> Indique le texte souligné: texte souligné Essayez - le
<strong> Indique le texte en gras: texte en gras Essayez - le
<em> Indique le texte en italique: texte en italique Essayez - le
.text-left Indique le texte aligné à gauche Essayez - le
.text-center Indique le texte aligné au centre Essayez - le
.text-right Indique le texte aligné à droite Essayez - le
.text-justify Indique un texte justifié Essayez - le
.text-nowrap Indique aucun texte wrap Essayez - le
.text-lowercase Indique le texte en minuscules: TEXTE en minuscules Essayez - le
.text-uppercase Indique le texte en majuscule: texte en majuscule Essayez - le
.text-capitalize Indique le texte capitalisée: text capitalisée Essayez - le
<abbr> Le <abbr> élément indique une abréviation ou acronyme. Les abréviations avec un attribut title ont une bordure inférieure en pointillés et un curseur d'aide sur le vol stationnaire, en fournissant un contexte supplémentaire sur le vol stationnaire. Essayez - le
.initialism Affiche le texte à l' intérieur du <abbr> élément dans une taille de police légèrement plus petite Essayez - le
<address> Présente l'information de contact Essayez - le
<blockquote> Indique des blocs de contenu à partir d'une autre source Essayez - le
.blockquote-reverse Indique une blockquote avec un contenu aligné à droite Essayez - le
<ul> Indique une liste à puces Essayez - le
<ol> Indique une liste ordonnée Essayez - le
.list-unstyled Supprime la liste de style par défaut et la marge de gauche sur les éléments de liste (fonctionne à la fois sur <ul> et <ol> ). Cette classe applique uniquement aux immédiats éléments de la liste des enfants (pour supprimer la liste de style par défaut à partir des listes imbriquées, appliquer cette classe pour toutes les listes imbriquées ainsi) Essayez - le
.list-inline Places tous les articles de la liste sur une seule ligne Essayez - le
<dl> Indique une liste de description Essayez - le
.dl-horizontal Aligne les termes et descriptions dans le <dl> élément côte à côte. Commence comme défaut <dl>s , mais quand la fenêtre du navigateur se développe, elle aligner côte à côte Essayez - le

Code

Element / Classe La description Exemple
<var> Indique les variables: x = a b + y Essayez - le
<kbd> Indique l' entrée qui est généralement saisie via le clavier: CTRL + P Essayez - le
<pre> Indique plusieurs lignes de code Essayez - le
<pre class="pre-scrollable"> Indique plusieurs lignes de code avec scrollbar Essayez - le
<samp> Indique la sortie de l' échantillon à partir d' un programme d'ordinateur: Exemple de sortie Essayez - le
<code> Indique des extraits de code inline: span , div Essayez - le