in English

Typografie

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

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>.
Legen Sie die globale Linkfarbe über $link-colorfest und wenden Sie Linkunterstreichungen nur auf an :hover.
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. Denken Sie daran, dass diese Überschriften standardmäßig nicht responsive sind, aber es ist möglich, responsive Schriftgrößen zu aktivieren .

Anzeige 1

Anzeige 2

Anzeige 3

Anzeige 4

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

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>

.markund .smallKlassen 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.

Text-Dienstprogramme

Ändern Sie Textausrichtung, Transformation, Stil, Stärke 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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Eine Quelle benennen

Fügen Sie ein hinzu <footer class="blockquote-footer">, um die Quelle zu identifizieren. Umschließen Sie den Namen des Quellwerks mit <cite>.

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

Jemand, der in Source Title berühmt ist

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

Ausrichtung

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

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

Jemand, der in Source Title berühmt ist

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

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

Jemand, der in Source Title berühmt ist

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

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

Ab v4.3.0 wird Bootstrap mit der Option ausgeliefert, responsive Schriftgrößen zu aktivieren, sodass Text über Geräte- und Darstellungsgrößen hinweg natürlicher skaliert werden kann. RFS kann aktiviert werden, indem die $enable-responsive-font-sizesSass-Variable in trueBootstrap geändert und Bootstrap neu kompiliert wird.

Zur Unterstützung von RFS verwenden wir ein Sass-Mixin, um unsere normalen font-sizeEigenschaften zu ersetzen. Responsive Schriftgrößen werden in calc()Funktionen mit einer Mischung aus remViewport-Einheiten kompiliert, um das responsive Skalierungsverhalten zu ermöglichen. Weitere Informationen zu RFS und seiner Konfiguration finden Sie in seinem GitHub-Repository .