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 selekteart font-familyfoar elk OS en apparaat.
Foar in mear ynklusive en tagonklike type skaal brûke wy de standertroot fan 'e browser font-size(typysk 16px), sadat besikers har browserstanderts as nedich kinne oanpasse.
Brûk de $font-family-base, $font-size-base, en $line-height-baseattributen as ús typografyske basis tapast op de <body>.
Stel de globale 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 werjeftekoptekst 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. Hâld der rekken mei dat dizze kopteksten net standert reagearje, mar it is mooglik responsive lettertypegrutte yn te skeakeljen .

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.

Dit is in lead paragraaf. It stiet út fan reguliere paragrafen.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline tekst eleminten

Styling foar mienskiplike ynline HTML5-eleminten.

Jo kinne de mark tag 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.

In bekend sitaat, befette yn in blokquote-elemint.

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

In boarne neame

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

In bekend sitaat, befette yn in blokquote-elemint.

Immen ferneamd yn Boarne Titel

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

Alignment

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

In bekend sitaat, befette yn in blokquote-elemint.

Immen ferneamd yn Boarne Titel

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

In bekend sitaat, befette yn in blokquote-elemint.

Immen ferneamd yn Boarne Titel

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

Listen

Unstyled

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

Dit is in list.
It liket folslein unstyled.
Struktureel is it noch in list.
Dizze styl jildt lykwols allinich foar direkte berneleminten.
Nested listen:
- wurde net beynfloede troch dizze styl
- sil noch in kûgel sjen litte
- en hawwe passende linker marzje
Dit kin yn guon situaasjes noch fan pas komme.

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

Ynline

Fuortsmite de kûgels fan in list en tapasse wat ljocht marginmei in kombinaasje fan twa klassen, .list-inlineen .list-inline-item.

Dit is in list item.
En noch ien.
Mar se wurde ynline werjûn.

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

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.

Term

Definysje foar de term.

En wat mear plakhâlder definysje tekst.

In oare term

Dizze definysje is koart, dus gjin ekstra paragrafen of sa.

Truncated term is ôfkoarte

Dit kin nuttich wêze as romte krap is. Foeget in ellips ta oan 'e ein.

Nesting

Nested definysje list: Ik hearde dat jo fan definysjelisten hâlde. Lit my in definysjelist yn jo definysjelist sette.

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

Responsive lettertypegrutte

Fanôf v4.3.0 wurdt Bootstrap ferstjoerd mei de opsje om responsive lettertypegrutte yn te skeakeljen, wêrtroch tekst natuerliker kin skaalje oer apparaat- en viewportgrutte. RFS kin ynskeakele wurde troch de $enable-responsive-font-sizesSass-fariabele te feroarjen trueen Bootstrap opnij te kompilearjen.

Om RFS te stypjen , brûke wy in Sass-mixin om ús normale font-sizeeigenskippen te ferfangen. Responsive lettertypegrutte sille wurde gearstald yn calc()funksjes mei in miks fan remen viewport-ienheden om it responsive skaalgedrach yn te skeakeljen. Mear oer RFS en syn konfiguraasje is te finen op syn GitHub repository .