Bootstrap 5.2 / Inhoud

Typografie

Documentatie en voorbeelden voor de typografie van Bootstrap, waaronder globale instellingen, koppen, bodytekst, lijsten en meer.

Globale instellingen

Bootstrap stelt basale globale display-, typografie- en linkstijlen in. Wanneer je meer controle nodig hebt, bekijk dan de tekst-utility-klassen.

Gebruik een native font stack die per besturingssysteem en apparaat de beste font-family kiest.
Voor een inclusievere en toegankelijkere typografische schaal gebruiken we de standaard root-font-size van de browser (meestal 16px), zodat bezoekers hun browserstandaarden naar wens kunnen aanpassen.
Gebruik de attributen $font-family-base, $font-size-base en $line-height-base als onze typografische basis, toegepast op de <body>.
Stel de globale linkkleur in via $link-color.
Gebruik $body-bg om een background-color op de <body> in te stellen (standaard #fff).

Deze stijlen vind je in _reboot.scss, en de globale variabelen zijn gedefinieerd in _variables.scss. Zorg dat je $font-size-base in rem instelt.

Koppen

Alle HTML-koppen, <h1> tot en met <h6>, zijn beschikbaar.

Kop	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

HTML

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

Ook de klassen .h1 tot en met .h6 zijn beschikbaar, voor wanneer je de fontstyling van een kop wilt overnemen maar het bijbehorende HTML-element niet kunt gebruiken.

HTML

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

Koppen aanpassen

Gebruik de meegeleverde utility-klassen om de kleine secundaire koptekst uit Bootstrap 3 na te maken.

HTML

<h3>
  Mooie display-kop
  <small class="text-muted">Met vervaagde secundaire tekst</small>
</h3>

Display-koppen

Traditionele kop-elementen zijn ontworpen om het best te werken in de kern van je pagina-content. Wanneer je wilt dat een kop opvalt, overweeg dan een display-kop — een grotere, iets uitgesprokener kopstijl.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

HTML

<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-koppen worden geconfigureerd via de Sass-map $display-font-sizes en twee variabelen: $display-font-weight en $display-line-height.

Display-koppen zijn aanpasbaar via twee variabelen: $display-font-family en $display-font-style.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Lead

Laat een alinea opvallen door .lead toe te voegen.

HTML

<p class="lead">
  Dit is een lead-alinea. Hij springt eruit ten opzichte van gewone alinea's.
</p>

Inline tekstelementen

Styling voor gangbare inline HTML5-elementen.

HTML

<p>Je kunt de mark-tag gebruiken om tekst te <mark>markeren</mark>.</p>
<p><del>Deze regel tekst is bedoeld om als verwijderde tekst te worden behandeld.</del></p>
<p><s>Deze regel tekst is bedoeld om als niet langer accuraat te worden behandeld.</s></p>
<p><ins>Deze regel tekst is bedoeld om als toevoeging aan het document te worden behandeld.</ins></p>
<p><u>Deze regel tekst wordt onderstreept weergegeven.</u></p>
<p><small>Deze regel tekst is bedoeld om als kleine lettertjes te worden behandeld.</small></p>
<p><strong>Deze regel wordt vetgedrukt weergegeven.</strong></p>
<p><em>Deze regel wordt cursief weergegeven.</em></p>

Let op: deze tags horen om semantische redenen te worden gebruikt:

 staat voor tekst die is gemarkeerd of geaccentueerd ter referentie of annotatie.
 staat voor kanttekeningen en kleine lettertjes, zoals copyright- en juridische tekst.
<s> staat voor elementen die niet langer relevant of niet langer accuraat zijn.
 staat voor een stuk inline tekst dat zo weergegeven moet worden dat duidelijk is dat het een niet-tekstuele annotatie heeft.

Wil je je tekst opmaken, gebruik dan in plaats daarvan de volgende klassen:

.mark past dezelfde stijlen toe als .
.small past dezelfde stijlen toe als .
.text-decoration-underline past dezelfde stijlen toe als .
.text-decoration-line-through past dezelfde stijlen toe als <s>.

Hoewel hierboven niet getoond, kun je in HTML5 gerust  en  gebruiken.  is bedoeld om woorden of zinsdelen te laten opvallen zonder extra belang uit te drukken, terwijl  vooral voor stemgebruik, vaktermen en dergelijke is.

Tekst-utilities

Wijzig tekstuitlijning, -transformatie, -stijl, -gewicht, regelhoogte, decoratie en kleur met onze tekst-utilities en kleur-utilities.

Afkortingen

Gestileerde implementatie van het HTML-element <abbr> voor afkortingen en acroniemen, om de uitgeschreven versie bij hover te tonen. Afkortingen hebben standaard een onderstreping en krijgen een help-cursor om bij hover en voor gebruikers van hulptechnologieën extra context te bieden.

Voeg .initialism toe aan een afkorting voor een iets kleinere font-size.

HTML

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

Blockquotes

Voor het citeren van blokken content uit een andere bron binnen je document. Wikkel <blockquote class="blockquote"> om de HTML die als citaat dient.

HTML

<blockquote class="blockquote">
  <p>Een bekend citaat, opgenomen in een blockquote-element.</p>
</blockquote>

Een bron vermelden

De HTML-specificatie vereist dat de bronvermelding van een blockquote buiten de <blockquote> wordt geplaatst. Wanneer je een bron vermeldt, wikkel je je <blockquote> in een <figure> en gebruik je een <figcaption> of een block-element (bijv. ) met de klasse .blockquote-footer. Zorg dat je de naam van het bronwerk ook in <cite> wikkelt.

HTML

<figure>
  <blockquote class="blockquote">
    <p>Een bekend citaat, opgenomen in een blockquote-element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Iemand beroemds in <cite title="Brontitel">Brontitel</cite>
  </figcaption>
</figure>

Uitlijning

Gebruik naar behoefte tekst-utilities om de uitlijning van je blockquote te wijzigen.

HTML

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Een bekend citaat, opgenomen in een blockquote-element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Iemand beroemds in <cite title="Brontitel">Brontitel</cite>
  </figcaption>
</figure>

HTML

<figure class="text-end">
  <blockquote class="blockquote">
    <p>Een bekend citaat, opgenomen in een blockquote-element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Iemand beroemds in <cite title="Brontitel">Brontitel</cite>
  </figcaption>
</figure>

Lijsten

Zonder styling

Verwijdert de standaard-list-style en de linkermarge op lijstitems (alleen directe kinderen). Dit geldt alleen voor direct onderliggende lijstitems, wat betekent dat je de klasse ook aan eventuele geneste lijsten moet toevoegen.

HTML

<ul class="list-unstyled">
  <li>Dit is een lijst.</li>
  <li>Hij oogt volledig zonder styling.</li>
  <li>Structureel is het nog steeds een lijst.</li>
  <li>Deze stijl geldt echter alleen voor direct onderliggende elementen.</li>
  <li>Geneste lijsten:
    <ul>
      <li>worden niet door deze stijl beïnvloed</li>
      <li>tonen nog steeds een opsommingsteken</li>
      <li>en hebben een passende linkermarge</li>
    </ul>
  </li>
  <li>Dit kan in sommige situaties toch handig zijn.</li>
</ul>

Inline

Verwijder de opsommingstekens van een lijst en pas wat lichte margin toe met een combinatie van twee klassen: .list-inline en .list-inline-item.

HTML

<ul class="list-inline">
  <li class="list-inline-item">Dit is een lijstitem.</li>
  <li class="list-inline-item">En nog een.</li>
  <li class="list-inline-item">Maar ze worden inline weergegeven.</li>
</ul>

Uitlijning van definitielijsten

Lijn termen en beschrijvingen horizontaal uit met de vooraf gedefinieerde klassen van ons grid-systeem (of met semantische mixins). Voor langere termen kun je optioneel een .text-truncate-klasse toevoegen om de tekst met een beletselteken af te kappen.

HTML

<dl class="row">
  <dt class="col-sm-3">Definitielijsten</dt>
  <dd class="col-sm-9">Een definitielijst is perfect om termen te definiëren.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definitie van de term.</p>
    <p>En nog wat opvultekst als definitie.</p>
  </dd>

  <dt class="col-sm-3">Nog een term</dt>
  <dd class="col-sm-9">Deze definitie is kort, dus geen extra alinea's of iets dergelijks.</dd>

  <dt class="col-sm-3 text-truncate">Afgekapte term wordt afgekapt</dt>
  <dd class="col-sm-9">Dit kan handig zijn wanneer de ruimte krap is. Voegt aan het einde een beletselteken toe.</dd>

  <dt class="col-sm-3">Nesten</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Geneste definitielijst</dt>
      <dd class="col-sm-8">Ik hoorde dat je van definitielijsten houdt. Laat me een definitielijst in je definitielijst zetten.</dd>
    </dl>
  </dd>
</dl>

Responsieve lettergroottes

In Bootstrap 5 hebben we responsieve lettergroottes standaard ingeschakeld, waardoor tekst natuurlijker meeschaalt met apparaat- en viewportformaten. Bekijk de RFS-pagina om te ontdekken hoe dit werkt.

Sass

Variabelen

Koppen hebben een aantal eigen variabelen voor afmetingen en tussenruimte.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Diverse typografische elementen die hier en in Reboot behandeld worden, hebben eveneens eigen variabelen.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Mixins

Er zijn geen speciale mixins voor typografie, maar Bootstrap gebruikt wel Responsive Font Sizing (RFS).