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-family
voor 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-base
attributen als onze typografische basis toegepast op de<body>
. - Stel de algemene linkkleur in via
$link-color
en pas linkonderstrepingen alleen toe op:hover
. - Gebruik
$body-bg
om eenbackground-color
op de<body>
(#fff
standaard) 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-base
instelt 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>
.h1
through .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>
.mark
en .small
klassen 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 .initialism
een 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.
<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.
<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.
<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-style
en 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 margin
met een combinatie van twee klassen, .list-inline
en .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-truncate
klasse 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-sizes
Sass-variabele te wijzigen in true
Bootstrap en deze opnieuw te compileren.
Om RFS te ondersteunen , gebruiken we een Sass-mixin om onze normale font-size
eigenschappen te vervangen. Responsieve lettergroottes worden gecompileerd in calc()
functies met een mix van rem
en viewport-eenheden om het responsieve schaalgedrag mogelijk te maken. Meer over RFS en de configuratie ervan is te vinden op de GitHub-repository .