Source

Typographie

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

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 Typ Skala, iwwerhuelen mir d'Browser Standardroot 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'global Linkfaarf iwwer $link-colora gëllen de Link ënnersträicht nëmmen op :hover.
  • 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

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

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

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

.marka .smallKlassen sinn och verfügbar fir déiselwecht Stiler z'applizéieren wéi <mark>a <small>wärend all ongewollt semantesch Implikatioune vermeit déi d'Tags bréngen.

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>et meeschtens fir Stëmm, technesch Begrëffer, asw.

Text Utilities

Ännert Textausrichtung, transforméiert, Stil, Gewiicht 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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Eng Quell benennen

Füügt e <footer class="blockquote-footer">fir d'Quell z'identifizéieren. Wickelt den Numm vun der Quellaarbecht an <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Een berühmten am Source Titel 
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Ausriichtung

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Een berühmten am Source Titel 
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Een berühmten am Source Titel 
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem bei 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
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Ofkierzte Begrëff ass ofgeschnidden
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested Definitioun Lëscht
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Reaktiounsfäeger Typographie

Responsive Typographie bezitt sech op d'Skaléierung vun Text a Komponenten andeems Dir d'Root Element font-sizean enger Serie vu Medienufroen einfach upassen. Bootstrap mécht dat net fir Iech, awer et ass zimmlech einfach ze addéieren wann Dir et braucht.

Hei ass e Beispill vun der Praxis. Wielt wat och ëmmer font-sizes a Medien Ufroen Dir wëllt.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}