Source

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 makastrek a sukog ti kita, ipapanmi 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 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-adu bassit ti opinionna nga estilo ti paulo.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus ti dolor ti panagsubasta. Duis mollis, est saan a komodo a luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 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

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

Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer nga 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>

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

Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat a ante.

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

Panagtunos

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

Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat a ante.

Maysa a nalatak iti Source Title 
<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 agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat a ante.

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

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.

  • Lorem ipsum dolor agtugaw amet
  • Consectetur nga adipiscing nga elit
  • Integer nga molestie lorem iti masa
  • Facilisis iti pretium nisl nga aliquet
  • Nulla volutpat nga aliquam nga velit
    • Phasellus nga iaculis nga neque
    • Purus dagiti sodales nga ultricies
    • Vestibulum nga laoreet nga porttitor sem
    • Ac tristique nga libero nga volutpat ni
  • Faucibus porta nga lakos nga fringilla vel
  • Aenean agtugaw amet erat nunc
  • Eget nga porttitor nga 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>

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.

  • Lorem nga ipsum
  • Phasellus nga iaculis
  • Nulla nga 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>

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

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit nga saan nga mi porta gravida iti eget metus.

Malesuada nga porta
Etiam porta sem malesuada nga agtagibalay nga euismod.
Ti naputolan a termino ket naputolan
Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimentum nibh, ut fermentum masa laeng agtugaw amet risus.
Panag-umok
Naisanglad a listaan ​​ti depinasion
Aenean a posuere, tortor a sed ti lunod a feugiat, nunc augue blandit a madre. 
<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>

Responsibo a tipograpia

Ti sungbat a tipograpia ket mangibagbaga ti panagsukog ti teksto ken dagiti paset babaen ti basta panangibagay ti ramut nga elemento's font-sizeiti uneg ti serye dagiti panagsaludsod ti media. Saan nga aramiden ti Bootstrap daytoy para kenka, ngem medyo nalaka nga inayon no kasapulam dayta.

Adtoy ti pagarigan dayta iti praktis. Pilien ti aniaman font-sizea s ken media queries a kayatmo.

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