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-color​​op 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.

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 typografie

Responsieve typografie verwijst naar het schalen van tekst en componenten door simpelweg de hoofdelementen aan te passen font-sizebinnen een reeks mediaquery's. Bootstrap doet dit niet voor u, maar het is vrij eenvoudig toe te voegen als u het nodig heeft.

Hier een voorbeeld ervan in de praktijk. Kies welke font-sizes en mediaquery's je maar wilt.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}