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 gebruiken we de standaardroot van de browser font-size(meestal 16px), zodat bezoekers hun browserstandaarden 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.

Dit is een hoofdparagraaf. Het onderscheidt zich van gewone alinea's.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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 het hierboven niet wordt 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.

Een bekende quote, vervat in een blockquote-element.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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>.

Een bekende quote, vervat in een blockquote-element.

Iemand die beroemd is in Brontitel

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

Uitlijning

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

Een bekende quote, vervat in een blockquote-element.

Iemand die beroemd is in Brontitel

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

Een bekende quote, vervat in een blockquote-element.

Iemand die beroemd is in Brontitel

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

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.

Dit is een lijst.
Het ziet er volledig ongestileerd uit.
Structureel is het nog steeds een lijst.
Deze stijl is echter alleen van toepassing op directe onderliggende elementen.
Geneste lijsten:
- worden niet beïnvloed door deze stijl
- zal nog steeds een kogel laten zien
- en hebben de juiste linkermarge
Dit kan in sommige situaties nog steeds van pas komen.

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

Verwijder de opsommingstekens van een lijst en pas wat licht toe marginmet een combinatie van twee klassen, .list-inlineen .list-inline-item.

Dit is een lijstitem.
En nog een.
Maar ze worden inline weergegeven.

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

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.

Termijn

Definitie voor de term.

En nog wat meer placeholder-definitietekst.

een andere term

Deze definitie is kort, dus geen extra alinea's of iets dergelijks.

Afgekapte term wordt afgekapt

Dit kan handig zijn als de ruimte krap is. Voegt een weglatingsteken toe aan het einde.

Nesten

Lijst met geneste definities: Ik hoorde dat je van definitielijsten houdt. Laat me een definitielijst in je definitielijst plaatsen.

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

Responsieve lettergroottes

Vanaf v4.3.0 wordt Bootstrap 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 .