Bootstrap's des paramètres par défaut
Bootstrap's défaut font-size globale est 14px, avec une ligne-hauteur 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).
Bootstrap par défaut du navigateur vs.
Dans ce chapitre, nous allons examiner certains éléments HTML qui seront stylés un peu différemment par Bootstrap que par défaut du navigateur.
<h1> - <h6>
Par défaut, Bootstrap sera le style des rubriques HTML ( <h1> à <h6> ) de la manière suivante:
Exemple
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Essayez - le vous - même » <small>
Dans Bootstrap le code HTML <small> élément est utilisé pour créer un texte secondaire plus léger en toute position:
Exemple
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Essayez - le vous - même » <mark>
Bootstrap sera le style du HTML <mark> élément de la manière suivante:
<abbr>
Bootstrap sera le style du HTML <abbr> élément de la manière suivante:
<blockquote>
Bootstrap sera le style du HTML <blockquote> élément de la manière suivante:
Exemple
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Essayez - le vous - même » Pour montrer la citation sur la droite, utilisez le .blockquote-reverse classe:
Exemple
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Essayez - le vous - même » <dl>
Bootstrap sera le style du HTML <dl> élément de la manière suivante:
<code>
Bootstrap sera le style du HTML <code> élément de la manière suivante:
Exemple
The following HTML elements: span , section , and div defines a section in a document.
Essayez - le vous - même » <kbd>
Bootstrap sera le style du HTML <kbd> élément de la manière suivante:
<pre>
Bootstrap sera le style du HTML <pre> élément de la manière suivante:
Exemple
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Essayez - le vous - même » Couleurs et Fond contextuelles
Bootstrap a aussi quelques classes contextuelles qui peuvent être utilisés pour fournir des "sens à travers des couleurs".
Les classes pour les couleurs de texte sont: .text-muted , .text-primary , .text-success , .text-info , .text-warning et .text-danger :
Exemple
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Essayez - le vous - même » Les classes pour les couleurs d'arrière - plan sont: .bg-primary , .bg-success , bg-info , bg-warning , et .bg-danger :
Exemple
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Essayez - le vous - même » Plus de classes d'Typographie
Les classes Bootstrap ci-dessous peuvent être ajoutés à des éléments de style HTML en outre:
| Classe | La description | Exemple |
|---|---|---|
.lead | Rend un paragraphe se démarquer | Essayez - le |
.small | Indique plus petit texte (fixé à 85% de la taille de la société mère) | 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 | Essayez - le |
.text-uppercase | Indique le texte en majuscule | Essayez - le |
.text-capitalize | Indique le texte capitalisée | Essayez - le |
.initialism | Affiche le texte à l' intérieur d' un <abbr> élément dans une taille de police légèrement plus petite | 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-horizontal | Aligne les termes ( <dt> ) et descriptions ( <dd> ) dans <dl> éléments 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 |
.pre-scrollable | Fait un <pre> élément scrollable | Essayez - le |
Remplissez Bootstrap Typographie Référence
Pour une référence complète de tous les éléments typographiques / classes, rendez - vous à notre entière Bootstrap Typographie Référence .
Regardez aussi notre Bootstrap Helper Classes de référence pour plus d' informations sur les classes contextuelles.