Source

Tipografi

Dokimantasyon ak egzanp pou tipografi Bootstrap, ki gen ladan anviwònman mondyal, 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 an 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 defo).

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 la font nan yon tit men ou pa ka itilize eleman ki asosye HTML.

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.

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

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 pa egzat ankò.

Liy tèks sa a fèt pou 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, ou 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 epi yo jwenn yon kurseur èd pou bay plis kontèks 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 ou an. Vlope <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 opsyonèlman 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 ac cursus commodo, tortor 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>

Tipografi reponn

Tipografi reponn refere a dekale tèks ak konpozan pa jis ajiste eleman rasin nan font-sizenan yon seri de demann medya yo. Bootstrap pa fè sa pou ou, men li se jistis fasil pou ajoute si ou bezwen li.

Men yon egzanp nan pratik. Chwazi tou sa font-sizes ak medya requêtes ou vle.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}