Tipografi

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

Nan paj sa a

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

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>

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è

html

<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

Ekspozisyon 5

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

Montre tit yo configuré atravè $display-font-sizeskat Sass la ak de varyab, $display-font-weightak $display-line-height.

Montre tit yo se customizable atravè de varyab, $display-font-familyak $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;

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.

html

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

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>

Fè atansyon ke tag sa yo ta dwe itilize pou rezon semantik:

reprezante tèks ki make oswa make pou rezon referans oswa notasyon.
reprezante kòmantè bò ak ti enprime, tankou copyright ak tèks legal.
<s>reprezante eleman ki pa enpòtan ankò oswa ki pa egzat ankò.
reprezante yon seri tèks enline ki ta dwe rann nan yon fason ki endike ke li gen yon adnotasyon ki pa tèks.

Si ou vle style tèks ou a, ou ta dwe itilize klas sa yo pito:

.markpral aplike menm estil ak .
.smallpral aplike menm estil ak .
.text-decoration-underlinepral aplike menm estil ak .
.text-decoration-line-throughpral aplike menm estil ak <s>.

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

Tèks sèvis piblik

Chanje aliyman tèks, transfòme, style, pwa, wotè liy, dekorasyon 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

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.

html

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

Bay non yon sous

Espesifikasyon HTML la mande pou yo mete atribisyon blockquote deyò <blockquote>. Lè w bay atribisyon, vlope w <blockquote>nan yon <figure>epi sèvi ak yon <figcaption>oswa yon eleman nivo blòk (egzanp, ) ak .blockquote-footerklas la. Asire w ou vlope non travay sous la <cite>tou.

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

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>

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.

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>

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

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>

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.

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>

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.

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>

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.

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>

Gwosè font reponn

Nan Bootstrap 5, nou te pèmèt gwosè polis ki reponn pa default, sa ki pèmèt tèks yo echèl plis natirèlman atravè gwosè aparèy ak Viewport. Gade nan paj RFS la pou w konnen kijan sa fonksyone.

Sass

Varyab

Tit gen kèk varyab dedye pou gwosè ak espas.

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

Eleman tipografi divès ki kouvri isit la ak nan Rdemare tou gen varyab dedye.

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

Mixins

Pa gen okenn mixin dedye pou tipografi, men Bootstrap itilize Sizing Font Responsive (RFS) .