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.

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 $link-colorken iyaplikar dagiti linia ti silpo laeng iti :hover.
  • 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 a mabalin 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

<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 

<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-adda bassit nga opinionna nga estilo ti paulo. Laglagipem a dagitoy a paulo ket saan a makasungbat babaen ti default, ngem mabalin a pagbalinen dagiti makasungbat a kadakkel ti letra .

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

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.

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

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

.markken .smalldagiti klase ket magun-od pay a mangyaplikar kadagiti isu met laeng nga estilo a kas <mark>ken <small>bayat a maliklikan ti ania man a di matarigagayan a semantiko nga implikasionda nga iyeg koma dagiti etiketa.

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 bayat <i>a kaaduanna ket para iti timek, teknikal a termino, kdpy.

Dagiti utilidad ti teksto

Baliwan ti panagtunos ti teksto, panagbalbaliw, estilo, dagsen, 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 nga 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

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

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

Panagnagan iti maysa a gubuayan

Inayon ti <footer class="blockquote-footer">para iti panangilasin iti gubuayan. Balkoten ti nagan ti taudan nga obra iti <cite>.

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

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

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

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

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

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

Manipud iti v4.3.0, ti Bootstrap ket mangipatulod nga addaan ti pagpilian a mangpabalin kadagiti makasungbat a kadakkel ti letra, a mangipalubos ti teksto nga ag-scale nga ad-adda a natural iti ballasiw dagiti kadakkel ti alikamen ken viewport. Ti RFS ket mabalin a mapalubosan babaen ti panagbalbaliw ti $enable-responsive-font-sizesSass a variable iti trueken panagtipon manen ti Bootstrap.

Tapno suportaran ti RFS , agusar kami ti Sass mixin tapno masukatan dagiti normal font-sizea tagikua mi. Dagiti makasungbat a kadakkel ti letra ket maurnongto kadagiti calc()panagandar nga addaan iti panaglalaok remken dagiti yunit ti viewport tapno mapalubosan ti makasungbat a kababalin ti panagsukog. Ti ad-adu pay maipapan ti RFS ken ti panagisaadna ket mabalin a masarakan iti pagidulinan ti GitHub na .