Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Taypografi

Dokumɛnt ɛn ɛgzampul dɛn fɔ Bootstrap taypografi, inklud di glob ɔl sɛtin dɛn, ɛd dɛn, bɔdi tɛks, list dɛn, ɛn ɔda tin dɛn.

Na dis pej

Di wɔl sɛtin dɛn

Bootstrap de sɛt di bɛsis glob ɔl displei, taypografi, ɛn link stayl dɛn. We yu nid mɔ kɔntrol, chɛk di tɛkstual yutiliti klas dɛn .

  • Yuz wan nativ font stak we de pik di bɛst font-familyfɔ ɛni OS ɛn divays.
  • Fɔ mek yu gɛt mɔ inkluziv ɛn aksesbul tayp skel, wi de yuz di brawza in difɔlt rut font-size(tipikli 16px) so dat di wan dɛn we de kam kin kɔstɔmayz dɛn brɔwza difɔlt dɛn as nid de.
  • Yuz di $font-family-base, $font-size-base, ɛn $line-height-baseatribyut dɛn as wi taypografik bays we dɛn yuz fɔ di <body>.
  • Set di global link kala via $link-color.
  • Yuz $body-bgfɔ sɛt a background-colorpan di <body>( #fffbay difɔlt).

Yu kin fɛn dɛn stayl ya insay _reboot.scss, ɛn di glob ɔl vɛriɔbul dɛn de difayn insay _variables.scss. Mek shɔ se yu sɛt $font-size-baseinsay rem.

Di edlayn dɛn

Ɔl di HTML ɛd dɛn, <h1>te to <h6>, de.

Di edlayn Ɛgzampul
<h1></h1> h1. Bootstrap we de na di ed
<h2></h2> h2. Bootstrap we de na di ed
<h3></h3> h3. Bootstrap we de na di ed
<h4></h4> h4. Bootstrap we de na di ed
<h5></h5> h5. Bootstrap we de na di ed
<h6></h6> h6. Bootstrap we de na di ed 
<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>

.h1tru .h6klas dɛn de bak, fɔ we yu want fɔ mach di font stayl fɔ wan ɛd bɔt yu nɔ ebul fɔ yuz di HTML ɛlimɛnt we gɛt fɔ du wit am.

h1. Bootstrap we de na di ed

h2. Bootstrap we de na di ed

h3. Bootstrap we de na di ed

h4. Bootstrap we de na di ed

h5. Bootstrap we de na di ed

h6. Bootstrap we de na di ed

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>

Fɔ kɔstɔmayt di edlayn dɛn

Yuz di yutiliti klas dɛn we de insay fɔ mek di smɔl sɛkɔndari ɛd tɛks bak frɔm Bootstrap 3.

Fancy display heading Wit sɛkɔndari tɛks we dɔn fad

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

Sho di edlayn dɛn

Dɛn mek tradishɔnal edlayn ɛlimɛnt dɛn fɔ wok fayn fayn wan na di mit we de na yu pej kɔntinyu. We yu nid edlayn fɔ mek i difrɛn, tink bɔt fɔ yuz displei edlayn —we na big edlayn stayl we gɛt smɔl mɔ opinion.

Displei we de sho 1
Displei we de sho 2
Displei we de sho 3
Displei we de sho 4
Displei fɔ di 5
Displei fɔ di 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>

Displei edlayn dɛn de kɔnfigyut bay di $display-font-sizesSass map ɛn tu vɛriɔbul dɛn, $display-font-weightɛn $display-line-height.

Displei edlayn dɛn kin kɔstɔmayz bay tu vɛriɔbul dɛn, $display-font-familyɛn $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;

Lid

Mek wan paregraf difrɛn bay we yu ad .lead.

Dis na paregraf we de bifo. I difrɛn frɔm paregraf dɛn we dɛn kin yuz ɔltɛm.

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

Inlayn tɛks ɛlimɛnt dɛn

Stayl fɔ kɔmɔn inlayn HTML5 ɛlimɛnt dɛn.

Yu kin yuz di mak tag fɔshotɛks.

Dis layn fɔ tɛks min fɔ trit am lɛk tɛks we dɛn dɔn dilit.

Dɛn min fɔ trit dis layn na di tɛks as sɔntin we nɔ kɔrɛkt igen.

Dis layn fɔ di tɛks min fɔ trit am as sɔntin we dɛn ad to di dɔkyumɛnt.

Dis layn fɔ di tɛks go rɛnd lɛk aw dɛn ɔndalayn am.

Dis layn fɔ di tɛks dɛn min fɔ trit am lɛk fayn print.

Dis layn we dɛn rɛnd lɛk bold tɛks.

Dis layn we dɛn rɛnd lɛk tɛks we dɛn rayt italiks.

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>

Tek tɛm se dɛn fɔ yuz dɛn tag dɛn de fɔ mek dɛn gɛt sɛmantik:

  • <mark>ripresent tɛks we dɛn mak ɔ aylayt fɔ rɛfrɛns ɔ noteshɔn pɔpɔshɔn dɛn.
  • <small>ripresent sayd-kɔmɛnt ɛn smɔl smɔl print, lɛk kɔpirayt ɛn ligal tɛks.
  • <s>riprizent elemɛnt we nɔ rili impɔtant igen ɔ we nɔ kɔrɛkt igen.
  • <u>ripresent wan span fɔ inlayn tɛks we dɛn fɔ rɛnd insay wan we we de sho se i gɛt anoteshɔn we nɔto tɛkstual.

If yu want fɔ stayl yu tɛks, yu fɔ yuz dɛn klas ya bifo dat:

  • .markgo yuz di sem stayl dɛn we <mark>.
  • .smallgo yuz di sem stayl dɛn we <small>.
  • .text-decoration-underlinego yuz di sem stayl dɛn we <u>.
  • .text-decoration-line-throughgo yuz di sem stayl dɛn we <s>.

Pan ɔl we dɛn nɔ sho am ɔp, fil fri fɔ yuz <b>ɛn <i>insay HTML5. <b>na fɔ aylayt wɔd ɔ frɛz dɛn we nɔ de gi ɔda impɔtant tin dɛn, we <i>na fɔ vɔys, tɛknikal wɔd dɛn, ɛn ɔda tin dɛn.

Tekst yutiliti dɛn

Chenj tɛks alaynɛshɔn, transfɔm, stayl, wet, layn-ayt, dɛkɔreshɔn ɛn kɔlɔ wit wi tɛks yutiliti ɛn kala yutiliti .

Di tin dɛn we dɛn kin yuz fɔ shɔt

Stylized implimentishɔn fɔ HTML in <abbr>ɛlimɛnt fɔ abrevieshɔn ɛn akɔdin fɔ sho di ɛkspanda vɛshɔn pan hova. Abbrevieshɔn dɛn gɛt difɔlt ɔndalayn ɛn dɛn gɛt ɛp kɔsa fɔ gi ɔda kɔntɛks pan hova ɛn to di wan dɛn we de yuz ɛp tɛknɔlɔji dɛn.

Ad .initialismto wan abrevieshɔn fɔ wan smɔl font-sayz.

attr

HTML

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

Blɔkkɔt dɛn

Fɔ kot blɔk dɛn fɔ kɔntinyu frɔm ɔda sɔs insay yu dɔkyumɛnt. Rap <blockquote class="blockquote">rawnd ɛni HTML as di kot.

Wan kot we bɔku pipul dɛn sabi, we de insay wan blɔkkɔt ɛlimɛnt.

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

Fɔ gi nem to wan sɔs

Di HTML spec nid fɔ mek dɛn put blɔkkɔt atribiushɔn ausayd di <blockquote>. We yu de gi atribiushɔn, rap yu <blockquote>insay a <figure>ɛn yuz wan <figcaption>ɔ wan blɔk lɛvɛl ɛlimɛnt (ɛgz., <p>) wit di .blockquote-footerklas. Mek shɔ se yu rap di nem fɔ di sɔs wok insay <cite>bak.

Wan kot we bɔku pipul dɛn sabi, we de insay wan blɔkkɔt ɛlimɛnt.

Sɔmbɔdi we gɛt nem na Sos Taytul
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>

Alignmɛnt fɔ di wan dɛn we de

Yuz tɛks yutiliti dɛn as nid de fɔ chenj di alaynɛshɔn fɔ yu blɔkkɔt.

Wan kot we bɔku pipul dɛn sabi, we de insay wan blɔkkɔt ɛlimɛnt.

Sɔmbɔdi we gɛt nem na Sos Taytul
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>

Wan kot we bɔku pipul dɛn sabi, we de insay wan blɔkkɔt ɛlimɛnt.

Sɔmbɔdi we gɛt nem na Sos Taytul
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>

List dɛn

Nɔ stayl

Rimov di difɔlt list-styleɛn lɛft margin na di list aytem dɛn (pikin dɛn nɔmɔ). Dis de onli aplay to immediate pikin list items , we min se yu go nid fɔ ad di klas fɔ ɛni nest list bak.

  • Dis na wan list.
  • I tan lɛk se dɛn nɔ stayl am atɔl.
  • Structurally, i stil bi wan list.
  • Bɔt dis stayl de jɔs aplay to di pikin ɛlimɛnt dɛn we de wantɛm wantɛm.
  • List dɛn we dɛn dɔn nɛst:
    • nɔ de afɛkt dis stayl
    • go stil sho wan bulɛt
    • ɛn gɛt di rayt lɛft margin
  • Dis kin stil fayn fɔ sɔm tin dɛn.
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>

Inlayn

Rimov wan list in bulɛt ɛn put sɔm layt marginwit wan kɔmbaynshɔn fɔ tu klas dɛn, .list-inlineɛn .list-inline-item.

  • Dis na wan tin we de na di list.
  • Ɛn wan ɔda wan.
  • Bɔt dɛn de sho dɛn insay layn.
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>

Diskripshɔn list alaynɛshɔn

Align tɛm ɛn diskripshɔn dɛn ɔrizɔntal wan bay we yu yuz wi grid sistɛm in prɛdifayn klas dɛn (ɔ sɛmantik miksin dɛn). Fɔ lɔng tɛm, yu kin opshɔnali ad wan .text-truncateklas fɔ trunkat di tɛks wit ɛlipsis.

Diskripshɔn list dɛn
Wan diskripshɔn list fayn fɔ difayn wɔd dɛn.
Wɔd

Difinishɔn fɔ di wɔd.

Ɛn sɔm mɔ pleshɔlda difinishɔn tɛks.

Wan ɔda wɔd
Dis difinishɔn shɔt, so nɔ ɛkstra paregraf ɔ ɛnitin.
Truncated term na trunkated
Dis kin fayn we di ples nɔ bɔku. Ad wan ɛlipsis na di ɛnd.
Fɔ mek dɛn nɛst
Nested difinishɔn list
A yɛri yu lɛk difinishɔn list dɛn. Mek a put wan difinishɔn list insay yu difinishɔn list.
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>

Fɔnt saiz dɛn we de ansa

Insay Bootstrap 5, wi dɔn ɛnabul rispɔnsiv font saiz dɛn bay difɔlt, we de alaw tɛks fɔ skel mɔ natura wan akɔdin to divays ɛn viupɔt saiz dɛn. Luk na di RFS pej fɔ no aw dis de wok.

Sass we bin de

Di tin dɛn we kin chenj

Di edlayn dɛn gɛt sɔm dediket vɛriɔbul dɛn fɔ sayz ɛn spɛshal.

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

Difrɛn taypografi ɛlimɛnt dɛn we dɛn kɔba ya ɛn insay Ribɔt gɛt dediket vɛriɔbul dɛn bak.

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

Mixin dɛn

No dediket miksin nɔ de fɔ taypografi, bɔt Bootstrap de yuz Responsive Font Sizing (RFS) .