Source

Typografie

Documentatie en voorbeelden voor Bootstrap-typografie, inclusief algemene instellingen, koppen, hoofdtekst, lijsten en meer.

Algemene instellingen

Bootstrap stelt algemene algemene weergave-, typografie- en linkstijlen in. Als er meer controle nodig is, bekijk dan de tekstuele hulpprogrammaklassen .

Gebruik een native font-stack die het beste selecteert font-familyvoor elk besturingssysteem en apparaat.
Voor een meer omvattende en toegankelijke typeschaal gaan we uit van de standaard root van de browser font-size(meestal 16px), zodat bezoekers de standaardinstellingen van hun browser naar behoefte kunnen aanpassen.
Gebruik de $font-family-base, $font-size-base, en $line-height-baseattributen als onze typografische basis toegepast op de <body>.
Stel de algemene linkkleur in via $link-coloren pas linkonderstrepingen alleen toe op :hover.
Gebruik $body-bgom een background-colorop de <body>( #fffstandaard) in te stellen.

Deze stijlen zijn te vinden in _reboot.scss, en de globale variabelen zijn gedefinieerd in _variables.scss. Zorg ervoor dat u $font-size-baseinstelt rem.

Koppen

Alle HTML-koppen, <h1>via <h6>, zijn beschikbaar.

rubriek	Voorbeeld
`<h1></h1>`	h1. Bootstrap-kop
`<h2></h2>`	h2. Bootstrap-kop
`<h3></h3>`	h3. Bootstrap-kop
`<h4></h4>`	h4. Bootstrap-kop
`<h5></h5>`	h5. Bootstrap-kop
`<h6></h6>`	h6. Bootstrap-kop

<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 zijn ook beschikbaar, voor wanneer u de lettertypestijl van een kop wilt aanpassen, maar het bijbehorende HTML-element niet kunt gebruiken.

h1. Bootstrap-kop

h2. Bootstrap-kop

h3. Bootstrap-kop

h4. Bootstrap-kop

h5. Bootstrap-kop

h6. Bootstrap-kop

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

Koppen aanpassen

Gebruik de meegeleverde hulpprogramma-klassen om de kleine secundaire koptekst van Bootstrap 3 opnieuw te maken.

Mooie weergavekop Met vervaagde secundaire tekst

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

Koppen weergeven

Traditionele kopelementen zijn ontworpen om het beste te werken in het vlees van uw pagina-inhoud. Als u een kop wilt om op te vallen, overweeg dan om een weergavekop te gebruiken - een grotere, iets meer eigenzinnige kopstijl. Houd er rekening mee dat deze koppen standaard niet responsief zijn, maar het is mogelijk om responsieve lettergroottes in te schakelen .

Weergave 1

Weergave 2

Weergave 3

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

Lood

Laat een alinea opvallen door toe te voegen .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 tekstelementen

Styling voor veelvoorkomende inline HTML5-elementen.

U kunt de markeringstag gebruiken omhoogtepunttekst.

~~Deze regel tekst is bedoeld om te worden behandeld als verwijderde tekst.~~

~~Het is de bedoeling dat deze regel tekst als niet langer nauwkeurig wordt beschouwd.~~

Deze regel tekst is bedoeld als aanvulling op het document.

Deze tekstregel wordt onderstreept weergegeven

Deze regel tekst is bedoeld als kleine lettertjes.

Deze regel is vetgedrukt weergegeven.

Deze regel wordt weergegeven als cursieve tekst.

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

.marken .smallklassen zijn ook beschikbaar om dezelfde stijlen toe te passen als <mark>en <small>terwijl ongewenste semantische implicaties die de tags met zich meebrengen, worden vermeden.

Hoewel hierboven niet weergegeven, kunt u <b>en <i>in HTML5 gebruiken. <b>is bedoeld om woorden of zinsdelen te markeren zonder extra belang over te brengen, terwijl <i>het meestal is voor stem, technische termen, enz.

Teksthulpprogramma's

Verander tekstuitlijning, transformatie, stijl, gewicht en kleur met onze teksthulpprogramma's en kleurhulpprogramma's .

Afkortingen

Gestileerde implementatie van het HTML- <abbr>element voor afkortingen en acroniemen om de uitgebreide versie bij hover te tonen. Afkortingen hebben een standaard onderstreping en krijgen een helpcursor om extra context te bieden bij het aanwijzen en aan gebruikers van ondersteunende technologieën.

Voeg .initialismeen afkorting toe voor een iets kleinere lettergrootte.

attr

HTML

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

Blok citaten

Voor het citeren van inhoudsblokken uit een andere bron in uw document. Wikkel <blockquote class="blockquote">rond elke HTML als het citaat.

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

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

Een bron noemen

Voeg een toe <footer class="blockquote-footer">om de bron te identificeren. Wikkel de naam van het bronwerk in <cite>.

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

Iemand die beroemd is in Brontitel

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

Uitlijning

Gebruik indien nodig teksthulpprogramma's om de uitlijning van uw blockquote te wijzigen.

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

Iemand die beroemd is in Brontitel

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

Iemand die beroemd is in Brontitel

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

Lijsten

niet gestyled

Verwijder de standaard- list-styleen linkermarge op lijstitems (alleen directe kinderen). Dit is alleen van toepassing op items in de directe onderliggende lijst , wat betekent dat u de klasse ook voor geneste lijsten moet toevoegen.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem bij massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricieën
- 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>

In lijn

Verwijder de opsommingstekens van een lijst en pas wat licht toe marginmet een combinatie van twee klassen, .list-inlineen .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>

Beschrijving lijst uitlijning

Lijn termen en beschrijvingen horizontaal uit met behulp van de vooraf gedefinieerde klassen (of semantische mixins) van ons rastersysteem. Voor langere termen kunt u optioneel een .text-truncateklasse toevoegen om de tekst af te kappen met een weglatingsteken.

Beschrijvingslijsten

Een beschrijvingslijst is perfect voor het definiëren van termen.

Euismod

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

Donec id elit non mi porta gravida bij eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Afgekapte term wordt afgekapt

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesten

Lijst met geneste definities: 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>

Responsieve lettergroottes

Bootstrap v4.3 wordt geleverd met de optie om responsieve lettergroottes in te schakelen, waardoor tekst natuurlijker kan worden geschaald over apparaat- en viewport-grootten. RFS kan worden ingeschakeld door de $enable-responsive-font-sizesSass-variabele te wijzigen in trueBootstrap en deze opnieuw te compileren.

Om RFS te ondersteunen , gebruiken we een Sass-mixin om onze normale font-sizeeigenschappen te vervangen. Responsieve lettergroottes worden gecompileerd in calc()functies met een mix van remen viewport-eenheden om het responsieve schaalgedrag mogelijk te maken. Meer over RFS en de configuratie ervan is te vinden op de GitHub-repository .