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.

Niini nga panid

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 mas inklusibo ug accessible nga tipo nga sukdanan, among gigamit ang default nga gamut sa browser font-size(kasagaran 16px) aron ang mga bisita maka-customize sa ilang mga default sa browser 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-color.
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. Siguruha nga mag-set $font-size-baseinrem .

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

Pagpakita 5

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

Ang mga ulohan sa display gi-configure pinaagi sa $display-font-sizesmapa sa Sass ug duha ka mga variable, $display-font-weightug $display-line-height.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Tingga

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

Kini usa ka lead paragraph. Kini lahi gikan sa regular nga mga parapo.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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>

Pagbantay nga ang mga tag kinahanglan gamiton alang sa katuyoan sa semantiko:

nagrepresentar sa teksto nga gimarkahan o gipasiugda alang sa mga katuyoan sa pakisayran o notasyon.
nagrepresentar sa kilid-komento ug gamay nga print, sama sa copyright ug legal nga teksto.
<s>nagrepresentar sa elemento nga dili na angay o dili na tukma.
nagrepresentar sa usa ka gitas-on sa inline nga teksto nga kinahanglan nga mahubad sa paagi nga nagpakita nga kini adunay dili teksto nga anotasyon.

Kung gusto nimo nga i-istilo ang imong teksto, kinahanglan nimo nga gamiton ang mosunod nga mga klase sa baylo:

.markmagamit ang parehas nga mga istilo sama sa .
.smallmagamit ang parehas nga mga istilo sama sa .
.text-decoration-underlinemagamit ang parehas nga mga istilo sama sa .
.text-decoration-line-throughmagamit ang parehas nga mga istilo sama sa <s>.

Samtang wala gipakita sa ibabaw, ayaw gamita ug sa HTML5. gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya, samtang kasagaran 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, gitas-on sa linya, dekorasyon ug kolor gamit ang 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.

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

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

Pagngalan ug tinubdan

Ang HTML spec nagkinahanglan nga blockquote attribution ibutang sa gawas sa <blockquote>. Kung maghatag ug attribution, iputos ang imong <blockquote>sa usa <figure>ug gamita ang usa <figcaption>o usa ka block level nga elemento (eg, ) uban sa .blockquote-footerklase. Siguruha nga ibutang usab ang ngalan sa gigikanan nga trabaho <cite>.

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

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

Pag-align

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

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

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

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

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

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.

Kini usa ka lista.
Kini makita nga hingpit nga wala’y istilo.
Sa istruktura, kini usa gihapon ka lista.
Bisan pa, kini nga estilo magamit lamang sa diha-diha nga mga elemento sa bata.
Mga lista sa salag:
- wala maapektuhan niini nga estilo
- magpakita pa ug bala
- ug adunay angay nga left margin
Mahimong magamit gihapon kini sa pipila ka mga sitwasyon.

<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

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

Kini usa ka butang sa lista.
Ug usa pa.
Apan gipakita sila sa linya.

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

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.

Termino

Kahubitan alang sa termino.

Ug uban pa nga teksto sa kahulugan sa placeholder.

Laing termino

Mubo kini nga kahulugan, busa walay dugang nga mga parapo o bisan unsa.

Ang giputol nga termino giputol

Mahimong mapuslanon kini kung hagip-ot ang lugar. Nagdugang usa ka ellipsis sa katapusan.

Nagsalag

Nested nga lista sa kahulugan: Nakadungog ko nga gusto nimo ang mga lista sa kahulugan. Tugoti ako nga magbutang usa ka lista sa kahulugan sa sulod sa imong lista sa kahulugan.

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

Responsive nga mga gidak-on sa font

Sa Bootstrap 5, among gi-enable ang responsive nga mga gidak-on sa font pinaagi sa default, nga nagtugot sa teksto nga mas natural nga mo-scale sa tanang device ug viewport nga gidak-on. Tan-awa ang panid sa RFS aron mahibal-an kung giunsa kini molihok.

Sass

Mga variable

Ang mga ulohan adunay pipila nga gipahinungod nga mga variable alang sa pagsukod ug gilay-on.

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

Ang lainlain nga mga elemento sa typography nga nasakup dinhi ug sa Reboot adunay usab gipahinungod nga mga 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;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

Mixins

Walay gipahinungod nga mga mix para sa typography, apan ang Bootstrap naggamit sa Responsive Font Sizing (RFS) .