in English

Typografie

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

Op deze pagina

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 globale linkkleur in via $link-color.
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

html

<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

html

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

Weergave 1

Weergave 2

Weergave 3

Weergave 4

Weergave 5

Weergave 6

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

Weergavekoppen worden geconfigureerd via de $display-font-sizesSass-kaart en twee variabelen, $display-font-weighten $display-line-height.

Displaykoppen zijn aanpasbaar via twee variabelen, $display-font-familyen $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lood

Laat een alinea opvallen door toe te voegen .lead.

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

html

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

html

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

Pas op dat deze tags moeten worden gebruikt voor semantische doeleinden:

staat voor tekst die is gemarkeerd of gemarkeerd voor referentie- of notatiedoeleinden.
staat voor kant-en-klare opmerkingen en kleine lettertjes, zoals copyright en juridische tekst.
<s>staat voor elementen die niet langer relevant of niet langer nauwkeurig zijn.
vertegenwoordigt een reeks inline-tekst die moet worden weergegeven op een manier die aangeeft dat deze een niet-tekstuele annotatie heeft.

Als u uw tekst wilt opmaken, moet u in plaats daarvan de volgende klassen gebruiken:

.markzal dezelfde stijlen toepassen als .
.smallzal dezelfde stijlen toepassen als .
.text-decoration-underlinezal dezelfde stijlen toepassen als .
.text-decoration-line-throughzal dezelfde stijlen toepassen als <s>.

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

Teksthulpprogramma's

Verander tekstuitlijning, transformatie, stijl, gewicht, regelhoogte, decoratie 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

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 bekend citaat, vervat in een blockquote-element.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Een bron noemen

De HTML-specificatie vereist dat blockquote-attributie buiten de <blockquote>. Bij het verstrekken van attributie, wikkel je <blockquote>in een <figure>en gebruik een <figcaption>of een blokniveau-element (bijv. ) met de .blockquote-footerklasse. Zorg ervoor dat u ook de naam van het bronwerk <cite>invult.

Een bekend citaat, vervat in een blockquote-element.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Uitlijning

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

Een bekend citaat, vervat in een blockquote-element.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Een bekend citaat, vervat in een blockquote-element.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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.

html

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

html

<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 wat meer tijdelijke aanduiding-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.

html

<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

In Bootstrap 5 hebben we standaard responsieve lettergroottes ingeschakeld, waardoor tekst natuurlijker kan worden geschaald over apparaat- en viewport-grootten. Kijk op de RFS-pagina hoe dit werkt.

Sass

Variabelen

Koppen hebben een aantal speciale variabelen voor grootte en afstand.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Diverse typografische elementen die hier en in Reboot worden behandeld , hebben ook speciale variabelen.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

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