Bootstrap's Standardeinstellungen
Bootstrap's globalen Standardschriftgröße ist 14px, mit einer Zeilenhöhe von 1,428.
Dies wird an den <body> und alle Absätze.
Darüber hinaus werden alle <p> Elemente haben einen unteren Rand , die die Hälfte ihrer berechneten line-height gleich (10px Standard).
Bootstrap vs. Browser Defaults
In diesem Kapitel werden wir uns einige HTML - Elemente suchen , die ein wenig anders durch gestylt werden Bootstrap als Browser Standardeinstellungen.
<h1> - <h6>
Standardmäßig wird Bootstrap die HTML -Überschriften (Stil <h1> bis <h6> ) auf folgende Weise:
Beispiel
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Versuch es selber " <small>
In Bootstrap das HTML <small> Element wird verwendet , um eine leichtere, sekundäre Text in jeder Position zu erstellen:
Beispiel
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Versuch es selber " <mark>
Bootstrap wird die HTML - Stil <mark> Element in folgender Weise:
<abbr>
Bootstrap wird die HTML - Stil <abbr> Element in der folgenden Art und Weise:
<blockquote>
Bootstrap wird die HTML - Stil <blockquote> Element in der folgenden Art und Weise:
Beispiel
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.
Versuch es selber " Um das Zitat auf der rechten Seite zeigen, verwenden Sie die .blockquote-reverse - Klasse:
Beispiel
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.
Versuch es selber " <dl>
Bootstrap wird die HTML - Stil <dl> Element in der folgenden Art und Weise:
<code>
Bootstrap wird die HTML - Stil <code> Element in der folgenden Art und Weise:
Beispiel
The following HTML elements: span , section , and div defines a section in a document.
Versuch es selber " <kbd>
Bootstrap wird die HTML - Stil <kbd> Element in der folgenden Art und Weise:
<pre>
Bootstrap wird die HTML - Stil <pre> Element in der folgenden Art und Weise:
Beispiel
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Versuch es selber " Kontext-bezogene Farben und Hintergründe
Bootstrap hat auch einige kontextuellen Klassen , die verwendet werden können , zur Verfügung zu stellen " , das heißt durch Farben".
Die Klassen für Textfarben sind: .text-muted , .text-primary , .text-success , .text-info , .text-warning und .text-danger :
Beispiel
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.
Versuch es selber " Die Klassen für die Hintergrundfarben sind: .bg-primary , .bg-success , bg-info , bg-warning und .bg-danger :
Beispiel
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Versuch es selber " Mehr Typografie Klassen
Die Bootstrap-Klassen unten weiter zu Stil HTML-Elemente hinzugefügt werden:
| Klasse | Beschreibung | Beispiel |
|---|---|---|
.lead | Bildet stehen ein Absatz aus | Versuch es |
.small | Zeigt an, dass kleinere Text (auf 85% der Größe des Mutter) | Versuch es |
.text-left | Zeigt linksbündigen Text | Versuch es |
.text-center | Gibt Zentrum bündiger Text | Versuch es |
.text-right | Gibt rechtsbündigen Text | Versuch es |
.text-justify | Gibt bündiger Text | Versuch es |
.text-nowrap | Gibt keinen Wrap Text | Versuch es |
.text-lowercase | Gibt kleingeschrieben Text | Versuch es |
.text-uppercase | Zeigt groß geschrieben Text | Versuch es |
.text-capitalize | Zeigt aktivierten Text | Versuch es |
.initialism | Zeigt den Text innerhalb eines <abbr> Element in einem etwas kleineren Schriftgröße | Versuch es |
.list-unstyled | Entfernt die Standardliste Stil und linken Rand auf Listenelemente (funktioniert sowohl <ul> und <ol> ). Diese Klasse bezieht sich nur auf unmittelbare Kinder Listenelemente (die Standard-list-style aus beliebigen verschachtelte Listen zu entfernen, gelten diese Klasse auf alle verschachtelte Listen als auch) | Versuch es |
.list-inline | Orte alle Listenelemente in einer einzigen Zeile | Versuch es |
.dl-horizontal | Linien auf die Bedingungen ( <dt> ) und Beschreibungen ( <dd> ) in <dl> Elemente Seite an Seite. Beginnt wie Standard <dl> s, aber wenn das Browser - Fenster erweitert wird , werden sie in einer Reihe aufstellen Side-by-Side | Versuch es |
.pre-scrollable | Macht ein <pre> Element scrollbaren | Versuch es |
Füllen Sie Bootstrap Typography Referenz
Eine vollständige Referenz aller Typographie Elemente / Klassen gehen , um unsere komplette Bootstrap Typography Referenz .
Schauen Sie auch in unserer Bootstrap Helper - Klassen Referenz für weitere Informationen über Kontextklassen.