Source

Tipograpiya

Dokumentasyon ug mga panig-ingnan alang sa Bootstrap typography, lakip ang mga setting sa kalibutan, mga ulohan, teksto sa lawas, mga lista, ug uban pa.

Mga setting sa kalibutan

Ang Bootstrap nagtakda sa sukaranan nga global nga pagpakita, typography, ug mga istilo sa link. Kung gikinahanglan ang dugang nga kontrol, susiha ang mga klase sa textual utility .

  • Paggamit og lumad nga font stack nga nagpili sa pinakamaayo font-familyalang sa matag OS ug device.
  • Para sa usa ka mas inklusibo ug accessible nga tipo nga sukdanan, among isipon ang browser default root font-size(kasagaran 16px) aron ang mga bisita maka-customize sa ilang browser defaults kung gikinahanglan.
  • Gamita ang $font-family-base, $font-size-base, ug $line-height-basemga hiyas isip atong typographic base nga gigamit sa <body>.
  • Itakda ang global nga kolor sa link pinaagi sa $link-colorug i-apply ang link underlines lamang sa :hover.
  • Gamita $body-bgaron magbutang ug background-colorsa <body>( #fffsa default).

Kini nga mga istilo makit-an sa sulod _reboot.scss, ug ang mga global variable gihubit sa _variables.scss. Siguroha nga ibutang $font-size-basesa rem.

Mga ulohan

Tanang HTML nga ulohan, <h1>pinaagi sa <h6>, anaa.

Ulohan Pananglitan

<h1></h1>

 h1. Bootstrap nga ulohan

<h2></h2>

 h2. Bootstrap nga ulohan

<h3></h3>

 h3. Bootstrap nga ulohan

<h4></h4>

 h4. Bootstrap nga ulohan

<h5></h5>

 h5. Bootstrap nga ulohan

<h6></h6>

 h6. Bootstrap nga ulohan 
<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>

.h1pinaagi sa .h6mga klase magamit usab, kay kung gusto nimo ipares ang estilo sa font sa usa ka ulohan apan dili magamit ang kauban nga elemento sa HTML.

h1. Bootstrap nga ulohan

h2. Bootstrap nga ulohan

h3. Bootstrap nga ulohan

h4. Bootstrap nga ulohan

h5. Bootstrap nga ulohan

h6. Bootstrap nga ulohan

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

Pag-customize sa mga ulohan

Gamita ang gilakip nga mga klase sa utility aron mabuhat pag-usab ang gamay nga sekondaryang ulohan nga teksto gikan sa Bootstrap 3.

Nindot nga display nga ulohan Uban ang kupas nga sekondaryang teksto 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Ipakita ang mga ulohan

Ang tradisyonal nga mga elemento sa ulohan gilaraw aron molihok nga labing maayo sa karne sa sulud sa imong panid. Kung kinahanglan nimo ang usa ka heading aron mogawas, hunahunaa ang paggamit sa usa ka display heading ​—usa ka mas dako, medyo mas opinyon nga istilo sa ulohan.

Pagpakita 1
Pagpakita 2
Pagpakita 3
Pagpakita 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>

Tingga

Paghimo og usa ka parapo nga talagsaon pinaagi sa pagdugang .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Inline nga mga elemento sa teksto

Pag-istilo para sa komon nga inline nga HTML5 nga mga elemento.

Mahimo nimong gamiton ang marka nga tag sahighlighttext.

Kini nga linya sa teksto gituyo nga isipon nga natangtang nga teksto.

Kini nga linya sa teksto gituyo nga isipon nga dili na tukma.

Kini nga linya sa teksto gituyo nga isipon nga dugang sa dokumento.

Kini nga linya sa teksto maghubad ingon nga adunay linya

Kini nga linya sa teksto gituyo nga isipon nga maayong pag-imprinta.

Kini nga linya gihubad nga bold nga teksto.

Kini nga linya gihubad ingon nga italicized nga 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>

.markug .smallang mga klase magamit usab aron magamit ang parehas nga mga istilo ingon <mark>ug <small>samtang naglikay sa bisan unsang dili gusto nga mga implikasyon sa semantiko nga madala sa mga tag.

Samtang wala gipakita sa ibabaw, ayaw gamita <b>ug <i>sa HTML5. <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya samtang <i>kadaghanan alang sa tingog, teknikal nga mga termino, ug uban pa.

Mga gamit sa text

Usba ang pag-align sa teksto, pagbag-o, istilo, gibug-aton, ug kolor sa among mga gamit sa teksto ug mga gamit sa kolor .

Mga minubo

Gi-istilo nga pagpatuman sa <abbr>elemento sa HTML para sa mga abbreviation ug acronym aron ipakita ang gipalapdan nga bersyon sa hover. Ang mga abbreviation adunay default underline ug makakuha og tabang nga cursor aron makahatag og dugang nga konteksto sa hover ug sa mga tiggamit sa assistive nga mga teknolohiya.

Idugang .initialismsa abbreviation para sa mas gamay nga font-size.

attr

HTML

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

Blockquotes

Alang sa pagkutlo sa mga bloke sa sulod gikan sa laing tinubdan sulod sa imong dokumento. Ibutang <blockquote class="blockquote">ang bisan unsang HTML ingon nga kinutlo.

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

Pagngalan ug tinubdan

Idugang ang a <footer class="blockquote-footer">para sa pag-ila sa tinubdan. I-wrap ang ngalan sa source work sa <cite>.

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

Usa ka tawo nga bantog sa 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>

Pag-align

Gamita ang text utilities kung gikinahanglan aron mausab ang alignment sa imong blockquote.

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

Usa ka tawo nga bantog sa 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 sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Usa ka tawo nga bantog sa 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>

Mga lista

Dili istilo

Kuhaa ang default list-styleug wala nga margin sa mga butang sa lista (mga bata lang). Magamit lang kini sa mga butang nga gilista dayon sa mga bata , nagpasabut nga kinahanglan nimo nga idugang ang klase alang sa bisan unsang mga salag nga mga lista.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ug masa
  • Facilisis sa pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Espesye sa tanom nga bulak ang Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ug
  • Faucibus porta lacus fringilla vel
  • Aenean naglingkod amet erat nunc
  • Eget porttitor 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

Kuhaa ang mga bala sa listahan ug gamita ang pipila ka kahayag marginnga adunay kombinasyon sa duha ka klase, .list-inlineug .list-inline-item.

  • Lorem ipsum
  • Espesye sa tanom nga bulak ang Phasellus iaculis
  • Nulla 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>

Pag-align sa lista sa paghulagway

I-align ang mga termino ug mga deskripsyon nga pinahigda pinaagi sa paggamit sa gitakda nang daan nga mga klase sa among grid system (o semantic mixins). Alang sa mas taas nga termino, mahimo nimong idugang ang usa ka .text-truncateklase aron maputol ang teksto gamit ang usa ka ellipsis.

Mga lista sa paghulagway
Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod

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

Donec id elit non mi porta gravida ug eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Ang giputol nga termino giputol
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nagsalag
Nested nga lista sa kahulugan
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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>

Responsive typography

Ang responsive typography nagtumong sa pag-scale sa teksto ug mga component pinaagi lamang sa pag-adjust sa root element font-sizesulod sa serye sa mga pangutana sa media. Ang Bootstrap wala magbuhat niini alang kanimo, apan kini sayon ​​​​nga idugang kung kinahanglan nimo kini.

Ania ang usa ka pananglitan niini sa praktis. Pilia ang bisan unsang font-sizemga pangutana ug media nga imong gusto.

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