Source

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.

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ɔ wan mɔ inkluziv ɛn aksesbul tayp skel, wi de tek di brɔwza difɔlt rut font-size(tipikli 16px) so 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ɛn aplay link ɔndalayn dɛn nɔmɔ pan :hover.
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 edlayn 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

<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

<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. Yu fɔ mɛmba se dɛn edlayn dɛn ya nɔ de ansa bay difɔlt, bɔt i pɔsibul fɔ mek yu ebul fɔ yuz di font saiz dɛn we de ansa .

Displei we de sho 1

Displei we de sho 2

Displei we de sho 3

Displei we de sho 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>

Lid

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

Vivamus sagittis lakus vel augu laoreet rutrum faucibus dolor ɔkta. Duis mollis, est we nɔto kɔmɔdo luktɔs.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

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

.markɛn .smallklas dɛn de bak fɔ yuz di sem stayl dɛn we dɛn de yuz <mark>ɛn <small>we dɛn de avɔyd ɛni sɛmantik implikashɔn we dɛn nɔ want we di tɛg dɛn go briŋ.

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ɔtants 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, ɛn kɔlɔ wit wi tɛks yutiliti ɛn kɔlɔ 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 shɔt fɔ wan smɔl font-sayz.

attr

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.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

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

Fɔ gi nem to wan sɔs

Ad wan <footer class="blockquote-footer">fɔ no di say we dɛn pul am. Rap di nem fɔ di sɔs wok insay <cite>.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

Sɔmbɔdi we gɛt nem na Sos Taytul

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

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.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

Sɔmbɔdi we gɛt nem na Sos Taytul

<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 sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

Sɔmbɔdi we gɛt nem na Sos Taytul

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

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.

Lorem ipsum dolor sidon amet
Konsectetur adipiscing elit we de na di bɔdi
Integer molestie lorem na massa
Fasilisis in prɛtiɔm nisl alikɛt
Nulla volutpat alikɔm velit
- Fasɛl iakulis nɛk
- Purus sodales di wan dɛn we de bɔn
- Vestibulum laoreet pɔtitɔr sem
- A tristik libero volutpat na
Faucibus porta lakɔs fringila vel
Aenean sidon amet erat nunc
Eget porttitor lorem we yu de du

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

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.

Lorem ipsum we de na di wɔl
Faselɔs iakulis we de na di bɔdi
Nulla volutpat fɔ di wan dɛn we de

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

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.

Yuismod bin de

Vestibulum id ligula porta felis yuismod semper eget lasinia odio sem nec elit.

Donec id elit non mi porta gravida na eget metus.

Malesuada we de na di wɔl

Etiam porta sem malesuada magna mollis yusmod.

Truncated term na trunkated

Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimɛnt nibh, ut fɛmintɔm massa jɔs sidɔm amet risus.

Fɔ mek dɛn nɛst

Nested difinishɔn list: Aenean posuere, tortor sed kɔsɔs feugiat, nɔnk ɔg blandit nɔnk.

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

Fɔnt saiz dɛn we de ansa

Bootstrap v4.3 ship wit di opshɔn fɔ ɛnabul rispɔnsiv font saiz dɛn, we de alaw tɛks fɔ skel mɔ natura wan akɔdin to divays ɛn viupɔt saiz dɛn. RFS kin ɛnabul bay we yu chenj di $enable-responsive-font-sizesSass vɛriɔbul to trueɛn rikompayl Bootstrap.

Fɔ sɔpɔt RFS , wi de yuz wan Sass mixin fɔ riples wi nɔmal font-sizeprɔpati dɛn. Rispɔnsiv font saiz dɛn go kɔmpilayt insay calc()fɛnshɔn dɛn wit wan miks remɛn viupɔt yunit dɛn fɔ mek di rispɔnsiv skel bihayvya. Yu kin fɛn mɔ bɔt RFS ɛn in kɔnfigyushɔn na in GitHub ripɔsitɔri .