Source

Tipografi

Dokimantasyon ak egzanp pou tipografi Bootstrap, ki gen ladan anviwònman global, tit, tèks kò, lis, ak plis ankò.

Anviwònman mondyal yo

Bootstrap etabli ekspozisyon mondyal debaz, tipografi, ak estil lyen. Lè yo bezwen plis kontwòl, tcheke klas itilite tèks yo .

  • Sèvi ak yon pile font natif natal ki chwazi pi bon font-familypou chak OS ak aparèy.
  • Pou yon echèl kalite ki pi enklizif ak aksesib, nou sipoze rasin default navigatè a font-size(tipikman 16px) pou vizitè yo ka Customize default navigatè yo jan sa nesesè.
  • Sèvi ak $font-family-base, $font-size-base, ak $line-height-baseatribi yo kòm baz tipografik nou an aplike nan <body>.
  • Mete koulè lyen mondyal la atravè $link-colorepi aplike souliye lyen sèlman sou :hover.
  • Sèvi ak $body-bgpou mete yon background-colorsou <body>( #fffpa default).

Ou ka jwenn estil sa yo nan _reboot.scss, epi varyab mondyal yo defini nan _variables.scss. Asire w ou mete $font-size-basenan rem.

Tit

Tout tit HTML, <h1>jiska <h6>, yo disponib.

Tit Egzanp

<h1></h1>

 h1. Bootstrap tit

<h2></h2>

 h2. Bootstrap tit

<h3></h3>

 h3. Bootstrap tit

<h4></h4>

 h4. Bootstrap tit

<h5></h5>

 h5. Bootstrap tit

<h6></h6>

 h6. Bootstrap tit 
<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>

.h1atravè .h6klas yo disponib tou, pou lè ou vle matche ak stil font nan yon tit men ou pa ka itilize eleman HTML ki asosye a.

h1. Bootstrap tit

h2. Bootstrap tit

h3. Bootstrap tit

h4. Bootstrap tit

h5. Bootstrap tit

h6. Bootstrap tit

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

Pèrsonalizasyon tit

Sèvi ak klas sèvis piblik ki enkli yo pou rkree ti tèks segondè tit ki soti nan Bootstrap 3.

Anpenpan tit ekspozisyon ak tèks segondè ta vle chanje koulè 

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

Montre tit

Eleman tit tradisyonèl yo fèt pou travay pi byen nan vyann nan kontni paj ou a. Lè w bezwen yon tit pou w kanpe deyò, konsidere w sèvi ak yon tit ekspozisyon — yon stil tit ki pi gwo, yon ti kras plis opinyon. Kenbe nan tèt ou tit sa yo pa reponn pa default, men li posib pou pèmèt gwosè polis ki reponn .

Ekspozisyon 1
Ekspozisyon 2
Ekspozisyon 3
Ekspozisyon 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>

Plon

Fè yon paragraf parèt deyò lè w ajoute .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lè sa a, se pa yon bagay ki pa fasil.

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

Eleman tèks inline

Styling pou eleman komen HTML5 inline.

Ou ka itilize tag mak la poumete aksan soutèks.

Liy tèks sa a fèt pou trete kòm tèks efase.

Liy tèks sa a fèt pou trete kòm li pa egzat ankò.

Liy tèks sa a vle di yo dwe trete kòm yon adisyon nan dokiman an.

Liy tèks sa a pral rann jan yo souliye

Liy tèks sa a vle di ke yo dwe trete kòm bèl lèt.

Liy sa a rann kòm tèks fonse.

Liy sa a rann kòm tèks italik.

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

.markak .smallklas yo disponib tou pou aplike menm estil <mark>ak <small>pandan y ap evite nenpòt enplikasyon semantik vle tag yo ta pote.

Pandan ke yo pa montre pi wo a, santi yo lib pou itilize <b>ak <i>nan HTML5. <b>se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans pandan y ap <i>se sitou pou vwa, tèm teknik, elatriye.

Tèks sèvis piblik

Chanje aliyman tèks, transfòme, style, pwa, ak koulè ak sèvis piblik tèks nou yo ak sèvis piblik koulè .

Abreviyasyon yo

Enplemantasyon stilize nan <abbr>eleman HTML pou abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover. Abreviyasyon yo gen yon souliye default ak jwenn yon kurseur èd pou bay yon kontèks adisyonèl sou hover ak itilizatè teknoloji asistans.

Ajoute .initialismnan yon abrevyasyon pou yon ti kras pi piti gwosè font.

atr

HTML

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

Blockquotes

Pou site blòk kontni ki soti nan yon lòt sous nan dokiman w la. Anvlope <blockquote class="blockquote">nenpòt HTML kòm quote la.

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

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

Bay non yon sous

Ajoute yon <footer class="blockquote-footer">pou idantifye sous la. Mete non travay sous la nan <cite>.

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

Yon moun ki pi popilè nan Tit Sous 
<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>

Aliyman

Sèvi ak sèvis piblik tèks yo jan sa nesesè pou chanje aliyman blockquote ou a.

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

Yon moun ki pi popilè nan Tit Sous 
<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 a ante.

Yon moun ki pi popilè nan Tit Sous 
<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>

Lis

Unstyled

Retire defo a list-styleak maj gòch sou atik lis (timoun imedya sèlman). Sa a sèlman aplike pou atik imedya lis timoun yo , sa vle di w ap bezwen ajoute klas la pou nenpòt lis enbrike tou.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis nan 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>

Nan liy

Retire bal yon lis epi aplike kèk limyè marginak yon konbinezon de klas, .list-inlineak .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>

Deskripsyon aliyman lis

Aliman tèm ak deskripsyon orizontal lè w itilize klas predefini sistèm kadriyaj nou an (oswa mixin semantik). Pou tèm ki pi long, ou ka ajoute yon .text-truncateklas pou tronpe tèks la ak yon elips.

Lis deskripsyon yo
Yon lis deskripsyon pafè pou defini tèm.
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.
Tèm twonke se twonke
Fusce dapibus, tellus ak cursus commodo, torttor mauris condimentum nibh, ut fermentum massa jis pou chita amet risus.
Nidifikasyon
Lis definisyon anbre
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>

Gwosè font reponn

Bootstrap v4.3 ofri opsyon pou pèmèt gwosè polis ki reponn yo, sa ki pèmèt tèks yo echèl plis natirèlman atravè gwosè aparèy ak Viewport. RFS ka aktive lè w chanje $enable-responsive-font-sizesvaryab Sass trueak rekonpile Bootstrap.

Pou sipòte RFSfont-size , nou itilize yon mixin Sass pou ranplase pwopriyete nòmal nou yo. Gwosè polis ki reponn yo pral konpile nan calc()fonksyon ak yon melanj de remak inite viewport pou pèmèt konpòtman an dekale reponn. Ou ka jwenn plis enfòmasyon sou RFS ak konfigirasyon li yo nan depo GitHub li yo .