Typografy

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

Op dizze side

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 kinne oanpasse 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 globale keppelkleur yn fia $link-color.
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

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>

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

html

<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

Display 5

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

Displaykoppen wurde konfigureare fia de $display-font-sizesSass-kaart en twa fariabelen, $display-font-weighten $display-line-height.

Displaykoppen binne oanpasber fia twa fariabelen, $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;

Foarsprong

Meitsje in paragraaf opfallend troch ta te foegjen .lead.

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

html

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

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 dizze tags moatte wurde brûkt foar semantysk doel:

stiet foar tekst dy't markearre of markearre is foar referinsje- of notaasjedoelen.
fertsjintwurdiget kant-opmerkingen en lytse letters, lykas copyright en juridyske tekst.
<s>fertsjintwurdiget elemint dat net mear relevant of net mear akkuraat.
stelt in span fan ynline tekst foar dy't werjûn wurde moat op in manier dy't oanjout dat it in net-tekstuele annotaasje hat.

As jo jo tekst stylearje wolle, moatte jo ynstee de folgjende klassen brûke:

.marksil deselde stilen tapasse as .
.smallsil deselde stilen tapasse as .
.text-decoration-underlinesil deselde stilen tapasse as .
.text-decoration-line-throughsil deselde stilen tapasse as <s>.

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

Tekst utilities

Feroarje tekstôfstimming, transformearje, styl, gewicht, line-hichte, dekoraasje 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

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.

html

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

In boarne neame

De HTML-spesifikaasje fereasket dat blockquote-atskriuwing bûten de <blockquote>. By it jaan fan attribúsje, wrap jo <blockquote>yn in <figure>en brûk in <figcaption>of in bloknivo-elemint (bgl. ) mei de .blockquote-footerklasse. Wês wis dat jo de namme fan it boarnewurk <cite>ek ynpakke.

In bekend sitaat, befette yn in blokquote-elemint.

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>

Alignment

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

In bekend sitaat, befette yn in blokquote-elemint.

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>

In bekend sitaat, befette yn in blokquote-elemint.

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>

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.

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>

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.

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>

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.

Beskriuwingslisten

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 oan 'e ein ta.

Nesting

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

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>

Responsive lettertypegrutte

Yn Bootstrap 5 hawwe wy standert responsive lettertypegrutte ynskeakele, wêrtroch tekst natuerliker kin skaalje oer apparaat- en viewportgrutte. Besjoch de RFS-side om út te finen hoe't dit wurket.

Sass

Fariabelen

Kopteksten hawwe wat tawijd fariabelen foar grutte en ôfstân.

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

Ferskate typografy-eleminten dy't hjir en yn Reboot behannele binne hawwe ek tawijd fariabelen.

$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

D'r binne gjin tawijd mixins foar typografy, mar Bootstrap brûkt Responsive Font Sizing (RFS) .