Typografie

Dokumentation und Beispiele für Bootstrap-Typografie, einschließlich globaler Einstellungen, Überschriften, Fließtext, Listen und mehr.

Auf dieser Seite

Globale Einstellungen

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 Schriftartenstapelfont-family , der für jedes Betriebssystem und Gerät die beste auswählt .
Für eine umfassendere und zugänglichere Schriftskala verwenden wir den Standardstamm des Browsers font-size(normalerweise 16 Pixel), damit Besucher ihre Browser-Standardeinstellungen nach Bedarf anpassen können.
Verwenden Sie die Attribute $font-family-base, $font-size-base, und $line-height-baseals unsere typografische Basis für <body>.
Stellen Sie die globale Linkfarbe über ein $link-color.
Verwenden Sie $body-bg, um ein background-colorauf einzustellen <body>( #fffstandardmäß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-baseeinsteigen rem.

Überschriften

Alle HTML-Überschriften <h1>bis <h6>sind verfügbar.

Überschrift	Beispiel
`<h1></h1>`	h1. Bootstrap-Überschrift
`<h2></h2>`	h2. Bootstrap-Überschrift
`<h3></h3>`	h3. Bootstrap-Überschrift
`<h4></h4>`	h4. Bootstrap-Überschrift
`<h5></h5>`	h5. Bootstrap-Überschrift
`<h6></h6>`	h6. Bootstrap-Überschrift

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1through .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

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Anpassen von Überschriften

Verwenden Sie die enthaltenen Hilfsklassen, um den kleinen sekundären Überschriftentext aus Bootstrap 3 neu zu erstellen.

Ausgefallene Display-Überschrift mit verblasstem Sekundärtext

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Überschriften anzeigen

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

Anzeige 5

Anzeige 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Anzeigeüberschriften werden über die $display-font-sizesSass-Karte und zwei Variablen konfiguriert, $display-font-weightund $display-line-height.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Führen

Heben Sie einen Absatz hervor, indem Sie hinzufügen .lead.

Dies ist ein Leitsatz. Es hebt sich von normalen Absätzen ab.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline-Textelemente

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.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Beachten Sie, dass diese Tags für semantische Zwecke verwendet werden sollten:

stellt Text dar, der zu Referenz- oder Notationszwecken markiert oder hervorgehoben ist.
steht für Nebenkommentare und Kleingedrucktes wie Copyright und Rechtstext.
<s>stellt Elemente dar, die nicht mehr relevant oder nicht mehr genau sind.
stellt eine Spanne von Inline-Text dar, die so gerendert werden sollte, dass angezeigt wird, dass sie eine nicht-textuelle Anmerkung enthält.

Wenn Sie Ihren Text formatieren möchten, sollten Sie stattdessen die folgenden Klassen verwenden:

.markwendet die gleichen Stile an wie .
.smallwendet die gleichen Stile an wie .
.text-decoration-underlinewendet die gleichen Stile an wie .
.text-decoration-line-throughwendet die gleichen Stile an wie <s>.

Obwohl oben nicht gezeigt, können Sie und in HTML5 verwenden. ist dazu gedacht, Wörter oder Phrasen hervorzuheben, ohne zusätzliche Bedeutung zu vermitteln, während es hauptsächlich für Sprache, Fachbegriffe usw.

Text-Dienstprogramme

Ändern Sie Textausrichtung, Transformation, Stil, Gewicht, Zeilenhöhe, Dekoration und Farbe mit unseren Textdienstprogrammen und Farbdienstprogrammen .

Abkürzungen

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 .initialismeine Abkürzung für eine etwas kleinere Schriftgröße hinzu.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Block Zitate

Zum Zitieren von Inhaltsblöcken aus einer anderen Quelle in Ihrem Dokument. Umschließen Sie <blockquote class="blockquote">beliebiges HTML als Zitat.

Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Eine Quelle benennen

Die HTML-Spezifikation erfordert, dass die Zuordnung von Blockzitaten außerhalb der <blockquote>. Wenn Sie eine Zuordnung bereitstellen, schließen Sie Ihre <blockquote>in ein ein <figure>und verwenden Sie ein <figcaption>oder ein Element auf Blockebene (z. B. ) mit der .blockquote-footerKlasse. Stellen Sie sicher, dass Sie auch den Namen des Quellwerks einschließen <cite>.

Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Ausrichtung

Verwenden Sie nach Bedarf Textdienstprogramme, um die Ausrichtung Ihres Blockquotes zu ändern.

Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Listen

Ungestylt

Entfernen Sie den Standard- list-styleund 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.

Dies ist eine Liste.
Es wirkt völlig ungestylt.
Strukturell ist es immer noch eine Liste.
Dieser Stil gilt jedoch nur für unmittelbar untergeordnete Elemente.
Verschachtelte Listen:
- sind von diesem Stil nicht betroffen
- zeigt immer noch eine Kugel
- und haben einen angemessenen linken Rand
Dies kann in einigen Situationen immer noch nützlich sein.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

In der Reihe

Entfernen Sie die Aufzählungszeichen einer Liste und wenden Sie etwas Licht marginmit einer Kombination aus zwei Klassen an, .list-inlineund .list-inline-item.

Dies ist ein Listenelement.
Und noch einer.
Aber sie werden inline angezeigt.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Ausrichtung der Beschreibungsliste

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-truncateKlasse hinzufügen, um den Text mit Auslassungspunkten abzuschneiden.

Beschreibungslisten

Eine Beschreibungsliste ist perfekt, um Begriffe zu definieren.

Begriff

Definition für den Begriff.

Und etwas mehr Platzhalter-Definitionstext.

Ein anderer Begriff

Diese Definition ist kurz, also keine zusätzlichen Absätze oder ähnliches.

Abgeschnittener Begriff wird abgeschnitten

Dies kann nützlich sein, wenn der Platz knapp ist. Fügt am Ende Auslassungspunkte hinzu.

Verschachtelung

Verschachtelte Definitionsliste: Ich habe gehört, Sie mögen Definitionslisten. Lassen Sie mich eine Definitionsliste in Ihre Definitionsliste einfügen.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Responsive Schriftgrößen

In Bootstrap 5 haben wir standardmäßig responsive Schriftgrößen aktiviert, sodass Text über Geräte- und Darstellungsgrößen hinweg natürlicher skaliert werden kann. Schauen Sie sich die RFS-Seite an, um herauszufinden, wie das funktioniert.

Sass

Variablen

Überschriften haben einige dedizierte Variablen für Größe und Abstand.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Verschiedene typografische Elemente, die hier und in Reboot behandelt werden, haben ebenfalls dedizierte Variablen.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

Mixins

Es gibt keine speziellen Mixins für Typografie, aber Bootstrap verwendet Responsive Font Sizing (RFS) .