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 itilize rasin default navigatè a font-size(tipikman 16px) pou vizitè yo ka pèsonalize 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.

Sa a se yon paragraf plon. Li vle di soti nan paragraf regilye yo.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Yon quote byen koni, ki genyen nan yon eleman blockquote.

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

Bay non yon sous

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

Yon quote byen koni, ki genyen nan yon eleman blockquote.

Yon moun ki pi popilè nan Tit Sous

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Yon quote byen koni, ki genyen nan yon eleman blockquote.

Yon moun ki pi popilè nan Tit Sous

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Yon quote byen koni, ki genyen nan yon eleman blockquote.

Yon moun ki pi popilè nan Tit Sous

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Sa a se yon lis.
Li parèt konplètman unstyled.
Estriktirèl, li toujou yon lis.
Sepandan, style sa a sèlman aplike nan eleman imedya timoun yo.
Lis anbrike:
- yo pa afekte pa style sa a
- ap toujou montre yon bal
- epi gen maj gòch apwopriye
Sa ka toujou vin an sou la men nan kèk sitiyasyon.

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

Nan liy

Retire bal yon lis epi aplike kèk limyè marginak yon konbinezon de klas, .list-inlineak .list-inline-item.

Sa a se yon atik lis.
Ak yon lòt.
Men, yo ap parèt nan liy.

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

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.

Tèm

Definisyon pou tèm nan.

Ak kèk plis tèks definisyon placeholder.

Yon lòt tèm

Definisyon sa a kout, kidonk pa gen okenn paragraf siplemantè oswa anyen.

Tèm twonke se twonke

Sa a ka itil lè espas sere. Ajoute yon elips nan fen an.

Nidifikasyon

Lis definisyon anbre: Mwen tande ou renmen lis definisyon. Kite m mete yon lis definisyon anndan lis definisyon w la.

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

Gwosè font reponn

Apati v4.3.0, Bootstrap lage opsyon pou pèmèt gwosè polis ki reponn yo, sa ki pèmèt tèks yo echèl pi 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 .