Source

Typografy

Dokumintaasje en foarbylden foar Bootstrap-typografy, ynklusyf globale ynstellings, kopteksten, lichemstekst, listen, en mear.

Globale ynstellings

Bootstrap stelt basis globale werjefte, typografy, en keppelingsstilen yn. As mear kontrôle nedich is, besjoch dan de tekstuele nutklassen .

Brûk in memmetaal lettertypestapel dy't it bêste font-familyfoar elk OS en apparaat selekteart.
Foar in mear ynklusive en tagonklike type skaal, wy nimme de browser standert root font-size(typysk 16px), sadat besikers kinne oanpasse harren browser standert as nedich.
Brûk de $font-family-base, $font-size-base, en $line-height-baseattributen as ús typografyske basis tapast op de <body>.
Stel de wrâldwide keppelingskleur yn fia $link-coloren tapasse keppelingsûnderstreken allinich op :hover.
Brûk $body-bgom in yn te stellen background-colorop de <body>( #fffstandert).

Dizze stilen kinne fûn wurde binnen _reboot.scss, en de globale fariabelen wurde definiearre yn _variables.scss. Soargje derfoar dat jo ynstelle $font-size-base.rem

Headings

Alle HTML-koppen, <h1>fia <h6>, binne beskikber.

Heading	Foarbyld
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

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

.h1troch .h6klassen binne ek beskikber, foar as jo wolle oerienkomme mei it lettertype styling fan in kop, mar kin net brûke de assosjearre HTML elemint.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

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

Oanpasse kopteksten

Brûk de ynbegrepen nutklassen om de lytse sekundêre koptekst fan Bootstrap 3 opnij te meitsjen.

Fancy werjeftekopskrift Mei ferdwûne sekundêre tekst

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Toan kopteksten

Tradysjonele koptekst-eleminten binne ûntworpen om it bêste te wurkjen yn it fleis fan jo side-ynhâld. As jo in koptekst nedich hawwe om út te stean, beskôgje dan it brûken fan in werjeftekoptekst - in gruttere, wat mear opinige koptekststyl.

Display 1

Display 2

Display 3

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

Foarsprong

Meitsje in paragraaf opfallend troch ta te foegjen .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 tekst eleminten

Styling foar mienskiplike ynline HTML5-eleminten.

Jo kinne de markearring brûke omhichtepunttekst.

~~Dizze rigel tekst is bedoeld om behannele te wurden as wiske tekst.~~

~~Dizze rigel tekst is bedoeld om behannele te wurden as net mear akkuraat.~~

Dizze rigel tekst is bedoeld om behannele te wurden as in tafoeging oan it dokumint.

Dizze rigel tekst sil werjaan as ûnderstreke

Dizze rigel tekst is bedoeld om behannele te wurden as lytse print.

Dizze rigel werjûn as fet tekst.

Dizze rigel werjûn as kursive 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 binne ek beskikber om deselde stilen ta te passen as <mark>en <small>wylst alle net-winske semantyske gefolgen wurde foarkommen dy't de tags bringe.

Wylst net hjirboppe werjûn, fiel jo frij om te brûken <b>en <i>yn HTML5. <b>is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>it meast foar stim, technyske termen, ensfh.

Tekst utilities

Feroarje tekstôfstimming, transformearje, styl, gewicht en kleur mei ús tekst- en kleurhelpprogramma's .

Ofkoartings

Stilisearre ymplemintaasje fan HTML's <abbr>elemint foar ôfkoartings en akronyms om de útwreide ferzje te sjen op hover. Ofkoartings hawwe in standert ûnderstreekje en krije in helpoanwizer om ekstra kontekst te jaan by hover en oan brûkers fan assistinte technologyen.

Taheakje .initialismoan in ôfkoarting foar in wat lytsere lettertypegrutte.

attr

HTML

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

Blockquotes

Foar it oanheljen fan blokken ynhâld fan in oare boarne binnen jo dokumint. Wrap <blockquote class="blockquote">om elke HTML as it sitaat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

In boarne neame

Foegje in ta <footer class="blockquote-footer">foar it identifisearjen fan de boarne. Wrap de namme fan it boarnewurk yn <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.

Immen ferneamd yn Boarne Titel

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

Alignment

Brûk teksthulpprogramma's as nedich om de ôfstimming fan jo blokquote te feroarjen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.

Immen ferneamd yn Boarne Titel

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

Immen ferneamd yn Boarne Titel

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

Listen

Unstyled

Fuortsmite de standert list-styleen lofter marzje op list items (allinich direkte bern). Dit jildt allinich foar items fan direkte bernlist , wat betsjuttet dat jo de klasse ek moatte tafoegje foar alle nestede listen.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem by massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- 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>

Ynline

Fuortsmite de kûgels fan in list en tapasse wat ljocht marginmei in kombinaasje fan twa 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>

Beskriuwing list alignment

Rjochtsje termen en beskriuwingen horizontaal út troch de foarôf definieare klassen fan ús rastersysteem (as semantyske mixins) te brûken. Foar langere termen kinne jo opsjoneel in .text-truncateklasse taheakje om de tekst mei in ellips te trunken.

Beskriuwing listen

In beskriuwingslist is perfekt foar it definiearjen fan termen.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is ôfkoarte

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definysje list: 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>

Responsive typografy

Responsive typografy ferwiist nei skaalfergrutting fan tekst en komponinten troch gewoan it root-elemint oan te passen font-sizebinnen in searje mediafragen. Bootstrap docht dit net foar jo, mar it is frij maklik om ta te foegjen as jo it nedich binne.

Hjir is in foarbyld fan it yn 'e praktyk. Kies hokker font-sizes en media queries jo wolle.

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