Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Tipograpia

Dokumentasion ken dagiti pagarigan para iti tipograpia ti Bootstrap, a mairaman dagiti sangalubongan a panagitunos, dagiti paulo, ti bagi a teksto, dagiti listaan, ken dadduma pay.

Iti daytoy a panid

Sangalubongan a setting

Ti Bootstrap ket mangikeddeng kadagiti batayan a sangalubongan a panagiparang, tipograpia, ken dagiti estilo ti silpo. No kasapulan ti ad-adu a panangtengngel, kitaen dagiti klase ti tekstual a utilidad .

  • Usaren ti native font stack a mangpili iti kasayaatan font-familypara iti tunggal OS ken device.
  • Para iti ad-adu a nairaman ken madanon a sukog ti kita, usarenmi ti default a ramut ti browser font-size(kadawyan a 16px) tapno dagiti bisita ket mabalinda nga ipasadaan dagiti default ti browserda no kasapulan.
  • Usaren ti $font-family-base, $font-size-base, ken $line-height-basedagiti attribute a kas ti tipograpiko a batayantayo a naipakat iti <body>.
  • Itakderan ti sangalubongan a kolor ti silpo babaen ti $link-color.
  • Usaren $body-bga mangikeddeng ti a background-coloriti <body>( #fffbabaen ti default).

Dagitoy nga estilo ket mabalin a masarakan iti uneg ti _reboot.scss, ken dagiti sangalubongan a variable ket naikeddeng iti _variables.scss. Siguraduenyo nga i-set $font-size-basein rem.

Dagiti Paulo

Amin a paulo ti HTML, <h1>babaen ti <h6>, ket magun-od.

Paulo Pagwadan
<h1></h1> h1. Bootstrap nga paulo
<h2></h2> h2. Bootstrap nga paulo
<h3></h3> h3. Bootstrap nga paulo
<h4></h4> h4. Bootstrap nga paulo
<h5></h5> h5. Bootstrap nga paulo
<h6></h6> h6. Bootstrap nga paulo 
<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>

.h1babaen .h6dagiti klase ket magun-od pay, para no kayatmo a maipada ti estilo ti letra ti maysa a paulo ngem saanmo nga usaren ti nainaig nga elemento ti HTML.

h1. Bootstrap nga paulo

h2. Bootstrap nga paulo

h3. Bootstrap nga paulo

h4. Bootstrap nga paulo

h5. Bootstrap nga paulo

h6. Bootstrap nga paulo

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

Panangpasayaat kadagiti paulo

Usaren dagiti nairaman a klase ti utilidad tapno mangpartuat manen ti bassit a sekondario a teksto ti paulo manipud iti Bootstrap 3.

Magarbo a paulo ti display Adda nakusnaw a sekondario a teksto

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

Ipakita dagiti paulo

Dagiti tradisional nga elemento ti paulo ket nadisenio a kasayaatan nga agtrabaho iti karne ti linaon ti panidmo. No kasapulam ti maysa a paulo tapno agminar, ibilangmo ti panangusar iti paulo a maiparang —maysa a dakdakkel, ad-adu bassit ti opinionna nga estilo ti paulo.

Ipakita ti 1
Ipakita ti 2
Ipakita ti 3
Ipakita ti 4
Ipakita ti 5
Ipakita ti 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>

Dagiti paulo ti display ket naikonfigura babaen ti $display-font-sizesmapa ti Sass ken dua a variable, $display-font-weightken $display-line-height.

Dagiti paulo ti display ket mabalin a maibagay babaen ti dua a variable, $display-font-familyken $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;

Idaulo

Pagbalinem a naisangsangayan ti maysa a parapo babaen ti pananginayonmo iti .lead.

Daytoy ket maysa a mangidaulo a parapo. Agminar dayta kadagiti regular a parapo.

html nga 
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline nga elemento ti teksto

Estilo para kadagiti gagangay nga elemento ti inline HTML5.

Mabalinmo nga usaren ti mark tag tapnoikkan ti talmegteksto.

Daytoy a linia ti teksto ket nairanta a matrato a kas naikkat a teksto.

Daytoy a linia ti teksto ket nairanta a matrato a kas saanen nga umiso.

Daytoy a linia ti teksto ket nairanta a matrato a kas maysa a kanayonan iti dokumento.

Daytoy a linia ti teksto ket mangiparang a kas iti nagurit.

Daytoy a linia ti teksto ket nairanta a matrato a kas napino a letra.

Daytoy a linia ket naiparang a kas nalukmeg a teksto.

Daytoy a linia ket naiparang a kas naitaliko a teksto.

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

Agannad a dagita nga etiketa ket rumbeng a mausar para iti semantiko a panggep:

  • <mark>irepresentarna ti teksto a namarkaan wenno nai-highlight para kadagiti panggep ti reperensia wenno notasion.
  • <small>irepresentarna dagiti side-comments ken babassit a letra, kas iti copyright ken legal a teksto.
  • <s>irepresentarna ti elemento a saanen a mainaig wenno saanen nga umiso.
  • <u>irepresentarna ti maysa a span ti inline a teksto a rumbeng a maiparang iti wagas a mangipakita nga addaan daytoy iti saan a tekstual nga anotasion.

No kayatmo nga estilo ti tekstom, rumbeng nga usarem ketdi dagiti sumaganad a klase:

  • .markiyaplikarto dagiti isu met laeng nga estilo a kas iti <mark>.
  • .smalliyaplikarto dagiti isu met laeng nga estilo a kas iti <small>.
  • .text-decoration-underlineiyaplikarto dagiti isu met laeng nga estilo a kas iti <u>.
  • .text-decoration-line-throughiyaplikarto dagiti isu met laeng nga estilo a kas iti <s>.

Bayat a saan a naipakita iti ngato, agwayawaya nga agusar <b>ken <i>iti HTML5. <b>ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg, idinto <i>a kaaduanna ket para iti timek, teknikal a termino, kdpy.

Dagiti utilidad ti teksto

Baliwan ti panagtunos ti teksto, panagbalbaliw, estilo, dagsen, line-height, dekorasion ken kolor babaen dagiti utilidad ti teksto ken dagiti utilidad ti kolortayo .

Dagiti abbreviation

Estilo a pannakaipatungpal ti <abbr>elemento ti HTML para kadagiti abbreviation ken acronym tapno maipakita ti napalawa a bersion iti hover. Dagiti abbreviation ket addaan iti default a underline ken makagun-od ti kursor ti tulong tapno mangipaay ti kanayonan a konteksto iti hover ken kadagiti agar-aramat kadagiti makatulong a teknolohia.

Inayon .initialismiti abbreviation para iti basbassit bassit a font-size.

attr nga

HTML nga

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

Dagiti sitas ti bloke

Para iti panangadaw kadagiti bloke ti linaon manipud iti sabali a taudan iti uneg ti dokumentom. Balkoten <blockquote class="blockquote">ti aniaman nga HTML kas quote.

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

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

Panagnagan iti maysa a gubuayan

Ti HTML spec ket agkasapulan a ti blockquote attribution ket maikabil iti ruar ti <blockquote>. No mangipaay ti attribution, baluten ti mo <blockquote>iti a <figure>ken usaren ti maysa <figcaption>wenno maysa nga elemento ti lebel ti bloke (kas pagarigan, <p>) a kadua ti .blockquote-footerklase. Siguraduen nga ibalkot ti nagan ti taudan nga obra iti <cite>kasta met.

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

Maysa a nalatak iti Source Title
html nga 
<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>

Panagtunos

Usaren dagiti utilidad ti teksto no kasapulan tapno baliwan ti panagtunos ti blockquote-mo.

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

Maysa a nalatak iti Source Title
html nga 
<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>

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

Maysa a nalatak iti Source Title
html nga 
<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>

Dagiti Listaan

Saan nga estilo

Ikkaten ti default list-styleken kannigid a margin kadagiti banag ti listaan ​​(dagiti dagus nga ubbing laeng). Daytoy ket agaplikar laeng kadagiti dagus a banag ti listaan ​​dagiti ubbing , kayatna a sawen a kasapulam nga inayon ti klase para kadagiti ania man a naisanglad a listaan ​​pay.

  • Daytoy ket maysa a listaan.
  • Agparang a naan-anay a di naestilo dayta.
  • Iti estruktura, maysa pay laeng a listaan.
  • Nupay kasta, daytoy nga estilo ket agaplikar laeng kadagiti dagus nga ubing nga elemento.
  • Dagiti naisanglad a listaan:
    • saan a maapektaran iti daytoy nga estilo
    • ipakitana latta ti bala
    • ken addaan iti maitutop a kannigid a pingir
  • Mabalin a makatulong latta daytoy iti dadduma a kasasaad.
html nga 
<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>

Inline nga

Ikkaten dagiti bala ti maysa a listaan ​​ken mangikabil iti sumagmamano a lawag marginbabaen ti kombinasion ti dua a klase, .list-inlineken .list-inline-item.

  • Daytoy ket maysa a banag ti listaan.
  • Ket sabali pay.
  • Ngem maiparang dagitoy iti inline.
html nga 
<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>

Panagtunos ti listaan ​​ti deskripsion

Itunos dagiti termino ken deskripsion a paidasig babaen ti panagusar kadagiti nasakbay a naikeddeng a klase (wenno semantiko a mixin) ti sistema ti gridtayo. Para kadagiti at-atiddog ​​a termino, mabalinmo a pagpilian ti manginayon ti .text-truncateklase tapno putden ti teksto babaen ti elipsis.

Dagiti listaan ​​ti panangiladawan
Ti listaan ​​ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Termino

Depinasion para iti termino.

Ket sumagmamano pay a teksto ti depinasion ti placeholder.

Sabali pay a termino
Ababa daytoy a depinasion, isu nga awan dagiti ekstra a parapo wenno aniaman.
Ti naputolan a termino ket naputolan
Mabalin a makatulong daytoy no nailet ti espasio. Mangnayon iti elipsis iti ngudona.
Panag-umok
Naisanglad a listaan ​​ti depinasion
Nangngegko a kasla dagiti listaan ​​ti depinasion. Bay-anyo nga ikabilko ti listaan ​​ti depinasion iti uneg ti listaan ​​ti depinasionyo.
html nga 
<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>

Dagiti makasungbat a kadakkel ti letra

Iti Bootstrap 5, pinalubosanmi dagiti makasungbat a kadakkel ti letra babaen ti default, a mangipalubos ti teksto nga ad-adda a natural nga ag-scale iti ballasiw dagiti kadakkel ti alikamen ken viewport. Kitaen ti panid ti RFS tapno maammuan no kasano nga agtrabaho daytoy.

Sass nga

Dagiti Variable

Dagiti paulo ket addaan kadagiti sumagmamano a naisangsangayan a variable para iti panagdakkel ken panagsisina.

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

Dagiti nadumaduma nga elemento ti tipograpia a nasaklaw ditoy ken iti Reboot ket addaan pay kadagiti naisangsangayan a variable.

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

Dagiti mixin

Awan dagiti naisangsangayan a mixin para iti tipograpia, ngem ti Bootstrap ket agus-usar ti Responsive Font Sizing (RFS) .