Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Typographie

Dokumentatioun an Beispiller fir Bootstrap Typographie, dorënner global Astellungen, Rubriken, Kierpertext, Lëschten, a méi.

Op dëser Säit

Global Astellungen

Bootstrap setzt Basis global Display, Typographie a Linkstiler. Wann méi Kontroll gebraucht gëtt, kuckt d' textuell Utility Klassen .

  • Benotzt e gebiertege Schrëftstack deen dat Bescht font-familyfir all OS an Apparat auswielt.
  • Fir eng méi inklusiv an zougänglech Typskala benotze mir d'Standardroot vum Browser font-size(typesch 16px) sou datt d'Besucher hir Browser-Defaults wéi néideg kënne personaliséieren.
  • Benotzt d' $font-family-base, $font-size-base, an $line-height-baseAttributer wéi eis typographesch Basis op d' <body>.
  • Setzt déi global Linkfaarf iwwer $link-color.
  • Benotzt $body-bgfir eng background-colorop der <body>( #fffStandard) ze setzen.

Dës Stiler kënnen bannent fonnt ginn _reboot.scss, an déi global Verännerlechen sinn definéiert an _variables.scss. Vergewëssert Iech ze $font-size-basesetzen rem.

Rubriken

All HTML Rubriken, <h1>duerch <h6>, sinn verfügbar.

Rubrik Beispill
<h1></h1> h1. Bootstrap Rubrik
<h2></h2> h2 vun. Bootstrap Rubrik
<h3></h3> h3 vun. Bootstrap Rubrik
<h4></h4> h4 vun. Bootstrap Rubrik
<h5></h5> h5. Bootstrap Rubrik
<h6></h6> h6. Bootstrap Rubrik 
<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>

.h1duerch .h6Klassen sinn och sinn, fir wann Dir der Schrëft Styling vun enger Rubrik ze Match wëllt, mee kann net déi verbonne HTML Element benotzen.

h1. Bootstrap Rubrik

h2 vun. Bootstrap Rubrik

h3 vun. Bootstrap Rubrik

h4 vun. Bootstrap Rubrik

h5. Bootstrap Rubrik

h6. Bootstrap Rubrik

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

Personnalisatioun vun Rubriken

Benotzt déi abegraff Utility Klassen fir de klenge sekundären Iwwerschrëfttext vum Bootstrap 3 nei ze kreéieren.

Fantastesch Affichage-Rubrik Mat verschwonnenen sekundären Text

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

Affichéieren Rubriken

Traditionell Rubrikelementer sinn entwéckelt fir am Beschten am Fleesch vun Ärem Säitinhalt ze schaffen. Wann Dir e Rubrik braucht fir erauszekommen, betruecht d'Benotzung vun engem Display-Rubrik - e gréisseren, e bësse méi Meenungsäusserungsstil.

Display 1
Display 2
Display 3
Display 4
Display 5
Display 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>

Display Rubriken sinn iwwer d' $display-font-sizesSass Kaart an zwou Variabelen konfiguréiert, $display-font-weightan $display-line-height.

Display Rubriken sinn personaliséierbar iwwer zwou Variabelen, $display-font-familyan $display-font-style.

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

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Féierung

Maacht e Paragraf erausstinn andeems Dir bäidréit .lead.

Dëst ass e Lead Paragraph. Et ënnerscheet sech aus reguläre Paragrafen.

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

Inline Text Elementer

Styling fir gemeinsam Inline HTML5 Elementer.

Dir kënnt d'Mark Tag benotzen firHighlightText.

Dës Zeil vum Text soll als geläscht Text behandelt ginn.

Dës Linn vum Text soll als net méi korrekt behandelt ginn.

Dës Zeil vum Text soll als Zousaz zum Dokument behandelt ginn.

Dës Zeil vum Text gëtt wéi ënnersträicht.

Dës Zeil vum Text soll als Feindréck behandelt ginn.

Dës Linn gëtt als fett Text gemaach.

Dës Linn gëtt als Kursiv Text gemaach.

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

Opgepasst datt dës Tags fir semanteschen Zwecker benotzt ginn:

  • <mark>representéiert Text dee fir Referenz- oder Notatiounszwecker markéiert oder markéiert ass.
  • <small>duerstellt Säit-Kommentaren a kleng Drécken, wéi Copyright a legal Text.
  • <s>stellt Element duer déi net méi relevant oder net méi korrekt sinn.
  • <u>stellt eng Spann vun Inline Text duer, dee soll op eng Manéier gemaach ginn, déi beweist datt et eng net-textuell Annotatioun huet.

Wann Dir Ären Text stiléiere wëllt, sollt Dir amplaz déi folgend Klassen benotzen:

  • .markgëllen déi selwecht Stiler wéi <mark>.
  • .smallgëllen déi selwecht Stiler wéi <small>.
  • .text-decoration-underlinegëllen déi selwecht Stiler wéi <u>.
  • .text-decoration-line-throughgëllen déi selwecht Stiler wéi <s>.

Wärend net hei uewen gewisen, fille sech gratis ze benotzen <b>an <i>an HTML5. <b>ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen, wärend <i>ass meeschtens fir Stëmm, technesch Begrëffer, etc.

Text Utilities

Ännert Textausrichtung, transforméiert, Stil, Gewiicht, Linn Héicht, Dekoratioun a Faarf mat eisen Text Utilities a Faarf Utilities .

Ofkierzungen

Stiliséierter Implementatioun vum HTML <abbr>Element fir Ofkierzungen an Akronyme fir déi erweidert Versioun um Hover ze weisen. Ofkierzungen hunn eng Default-Ënnerstëtzung a kréien en Hëllefscursor fir zousätzlech Kontext beim Hover a fir Benotzer vun Hëllefstechnologien ze bidden.

Füügt .initialismeng Ofkierzung fir eng liicht méi kleng Schrëftgréisst.

attr

HTML

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

Blockquotes

Fir Blocken Inhalt vun enger anerer Quell an Ärem Dokument ze zitéieren. Wickelt <blockquote class="blockquote">all HTML als Zitat ëm.

E bekannten Zitat, an engem Blockquote Element enthale.

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

Eng Quell benennen

D'HTML Spec erfuerdert datt d'Blockquote Attributioun ausserhalb vum <blockquote>. Wann Dir Attributioun ubitt, wéckelt Är <blockquote>an engem <figure>a benotzt en <figcaption>oder e Blockniveau Element (zB <p>) mat der .blockquote-footerKlass. Vergewëssert Iech och den Numm vun der Quellaarbecht ze <cite>wéckelen.

E bekannten Zitat, an engem Blockquote Element enthale.

Een berühmten am Source Titel
html 
<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>

Ausriichtung

Benotzt Text Utilities wéi néideg fir d'Ausrichtung vun Ärem Blockquote z'änneren.

E bekannten Zitat, an engem Blockquote Element enthale.

Een berühmten am Source Titel
html 
<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>

E bekannten Zitat, an engem Blockquote Element enthale.

Een berühmten am Source Titel
html 
<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>

Lëschten

Unstyled

Ewechzehuelen de Standard list-stylea lénks Marge op Lëscht Artikelen (nëmmen direkt Kanner). Dëst gëllt nëmme fir direkt Kannerlëscht Elementer , dat heescht datt Dir d'Klass och fir all nested Lëschte derbäi musst.

  • Dëst ass eng Lëscht.
  • Et schéngt komplett unstyled.
  • Strukturell ass et nach ëmmer eng Lëscht.
  • Allerdéngs gëllt dëse Stil nëmme fir direkt Kannerelementer.
  • Nestéiert Lëschte:
    • sinn net vun dësem Stil beaflosst
    • wäert nach eng Kugel weisen
    • an hunn passenden lénks Spillraum
  • Dëst kann an e puer Situatiounen nach praktesch kommen.
html 
<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>

An der Schlaang

Ewechzehuelen eng Lëscht d'Kugel an applizéiert e bësse Liicht marginmat enger Kombinatioun vun zwou Klassen, .list-inlinean .list-inline-item.

  • Dëst ass eng Lëscht Element.
  • An nach een.
  • Awer si ginn inline ugewisen.
html 
<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>

Beschreiwung Lëscht Ausriichtung

Alignéiere Begrëffer a Beschreiwunge horizontal andeems Dir de virdefinéierte Klassen vun eisem Gittersystem (oder semantesche Mixins) benotzt. Fir méi laang Begrëffer, kënnt Dir optional eng .text-truncateKlass derbäi fir den Text mat enger Ellipsis ze truncéieren.

Beschreiwung Lëschte
Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
Begrëff

Definitioun fir de Begrëff.

An e puer méi Plazhalter Definitioun Text.

En anere Begrëff
Dës Definitioun ass kuerz, also keng extra Abschnitter oder eppes.
Ofkierzte Begrëff ass ofgeschnidden
Dëst kann nëtzlech sinn wann Plaz knapp ass. Füügt eng Ellipsis um Enn.
Nesting
Nested Definitioun Lëscht
Ech héieren Dir gär Definitioun Lëschte. Loosst mech eng Definitiounslëscht an Ärer Definitiounslëscht setzen.
html 
<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>

Reaktiounsfäeger Schrëftgréissten

Am Bootstrap 5 hu mir reaktiounsfäeger Schrëftgréissten als Standard aktivéiert, wat Text erlaabt méi natierlech iwwer Apparat- a Viewportgréissten ze skaléieren. Kuckt Iech op der RFS Säit fir erauszefannen wéi dëst funktionnéiert.

Sass

Variablen

Rubriken hunn e puer engagéiert Variablen fir d'Gréisst an d'Distanz.

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

Verschidde Typographie Elementer déi hei ofgedeckt sinn an am Reboot hunn och engagéiert 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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

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

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

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

Et gi keng speziell Mixins fir Typographie, awer Bootstrap benotzt Responsive Font Sizing (RFS) .