Typografie
Dokumentation und Beispiele für Bootstrap-Typografie, einschließlich globaler Einstellungen, Überschriften, Fließtext, Listen und mehr.
Bootstrap legt grundlegende globale Anzeige-, Typografie- und Linkstile fest. Wenn mehr Kontrolle benötigt wird, sehen Sie sich die textuellen Hilfsklassen an .
- Verwenden Sie einen nativen Schriftartenstapel
font-family
, der für jedes Betriebssystem und Gerät die beste auswählt . - Für eine umfassendere und zugänglichere
font-size
Typenskala gehen wir vom Standardstamm des Browsers (normalerweise 16 Pixel) aus, sodass Besucher ihre Browser-Standardeinstellungen nach Bedarf anpassen können. - Verwenden Sie die Attribute
$font-family-base
,$font-size-base
, und$line-height-base
als unsere typografische Basis für<body>
. - Legen Sie die globale Linkfarbe über
$link-color
fest und wenden Sie Linkunterstreichungen nur auf an:hover
. - Verwenden Sie
$body-bg
, um einbackground-color
auf einzustellen<body>
(#fff
standardmäßig).
Diese Stile sind in zu finden _reboot.scss
, und die globalen Variablen sind in definiert _variables.scss
. Stellen Sie sicher, dass Sie $font-size-base
einsteigen rem
.
Alle HTML-Überschriften <h1>
bis <h6>
sind verfügbar.
Überschrift | Beispiel |
---|---|
|
h1. Bootstrap-Überschrift |
|
h2. Bootstrap-Überschrift |
|
h3. Bootstrap-Überschrift |
|
h4. Bootstrap-Überschrift |
|
h5. Bootstrap-Überschrift |
|
h6. Bootstrap-Überschrift |
.h1
through .h6
-Klassen sind ebenfalls verfügbar, wenn Sie den Schriftstil einer Überschrift anpassen möchten, aber das zugehörige HTML-Element nicht verwenden können.
h1. Bootstrap-Überschrift
h2. Bootstrap-Überschrift
h3. Bootstrap-Überschrift
h4. Bootstrap-Überschrift
h5. Bootstrap-Überschrift
h6. Bootstrap-Überschrift
Verwenden Sie die enthaltenen Hilfsklassen, um den kleinen sekundären Überschriftentext aus Bootstrap 3 neu zu erstellen.
Herkömmliche Überschriftenelemente sind so konzipiert, dass sie am besten im Kern Ihres Seiteninhalts funktionieren. Wenn Sie eine Überschrift benötigen, die hervorsticht, ziehen Sie die Verwendung einer Anzeigeüberschrift in Betracht – ein größerer, etwas eigensinnigerer Überschriftenstil.
Anzeige 1 |
Anzeige 2 |
Anzeige 3 |
Anzeige 4 |
Heben Sie einen Absatz hervor, indem Sie hinzufügen .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ist nicht commodo luctus.
Styling für gängige Inline-HTML5-Elemente.
Sie können das Markierungs-Tag verwendenMarkierenText.
Diese Textzeile soll als gelöschter Text behandelt werden.
Diese Textzeile soll als nicht mehr zutreffend behandelt werden.
Diese Textzeile ist als Ergänzung zum Dokument zu behandeln.
Diese Textzeile wird unterstrichen dargestellt
Diese Textzeile ist als Kleingedrucktes zu behandeln.
Diese Zeile wird als fetter Text dargestellt.
Diese Zeile wird als kursiver Text dargestellt.
.mark
und .small
Klassen sind ebenfalls verfügbar, um die gleichen Stile wie anzuwenden <mark>
und <small>
dabei unerwünschte semantische Implikationen zu vermeiden, die die Tags mit sich bringen würden.
Obwohl oben nicht gezeigt, können Sie <b>
und <i>
in HTML5 verwenden. <b>
soll Wörter oder Phrasen hervorheben, ohne zusätzliche Bedeutung zu vermitteln, während <i>
es hauptsächlich für Sprache, Fachbegriffe usw.
Ändern Sie Textausrichtung, Transformation, Stil, Stärke und Farbe mit unseren Textdienstprogrammen und Farbdienstprogrammen .
Stilisierte Implementierung des HTML- <abbr>
Elements für Abkürzungen und Akronyme, um die erweiterte Version beim Hover anzuzeigen. Abkürzungen sind standardmäßig unterstrichen und erhalten einen Hilfe-Cursor, um beim Hovern und für Benutzer von Hilfstechnologien zusätzlichen Kontext bereitzustellen.
Fügen Sie .initialism
eine Abkürzung für eine etwas kleinere Schriftgröße hinzu.
attr
HTML
Zum Zitieren von Inhaltsblöcken aus einer anderen Quelle in Ihrem Dokument. Umschließen Sie <blockquote class="blockquote">
beliebiges HTML als Zitat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Fügen Sie ein hinzu <footer class="blockquote-footer">
, um die Quelle zu identifizieren. Umschließen Sie den Namen des Quellwerks mit <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Verwenden Sie nach Bedarf Textdienstprogramme, um die Ausrichtung Ihres Blockquotes zu ändern.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Entfernen Sie den Standard- list-style
und linken Rand von Listenelementen (nur unmittelbar untergeordnete Elemente). Dies gilt nur für unmittelbar untergeordnete Listenelemente , was bedeutet, dass Sie die Klasse auch für alle verschachtelten Listen hinzufügen müssen.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Ganzzahlige Molestie Lorem und Massa
- Facilisis in pretium nisl aliquet
- Nulla Volutpat Aliquam Velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Entfernen Sie die Aufzählungszeichen einer Liste und wenden Sie etwas Licht margin
mit einer Kombination aus zwei Klassen an, .list-inline
und .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Richten Sie Begriffe und Beschreibungen horizontal aus, indem Sie die vordefinierten Klassen (oder semantischen Mixins) unseres Rastersystems verwenden. Bei längeren Begriffen können Sie optional eine .text-truncate
Klasse hinzufügen, um den Text mit Auslassungspunkten abzuschneiden.
- Beschreibungslisten
- Eine Beschreibungsliste ist perfekt, um Begriffe zu definieren.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida bei eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Abgeschnittener Begriff wird abgeschnitten
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Verschachtelung
-
- Verschachtelte Definitionsliste
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsive Typografie bezieht sich auf das Skalieren von Text und Komponenten durch einfaches Anpassen der Stammelemente font-size
innerhalb einer Reihe von Medienabfragen. Bootstrap erledigt das nicht für Sie, aber es ist ziemlich einfach hinzuzufügen, wenn Sie es brauchen.
Hier ist ein Beispiel dafür in der Praxis. Wählen Sie die gewünschten font-size
s und Medienabfragen aus.