in English

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 mas inklusibo ug accessible type scale, among gigamit ang default root sa browser font-size(kasagaran 16px) para ma-customized sa mga bisita ang 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 tibuok kalibutan nga kolor sa link pinaagi $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. Hinumdumi nga kini nga mga ulohan dili mosanong pinaagi sa default, apan posible nga magamit ang mga responsive nga gidak-on sa font .

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

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

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

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

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

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

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.

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

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

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

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 ganahan ka sa 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

Ingon sa v4.3.0, ang Bootstrap nagpadala sa opsyon nga makahimo sa responsive nga mga gidak-on sa font, nga nagtugot sa teksto sa pag-scale nga mas natural sa mga gidak-on sa device ug viewport. Ang RFS mahimong ma-enable pinaagi sa pagbag-o sa $enable-responsive-font-sizesSass variable trueug pag-recompile sa Bootstrap.

Para suportahan ang RFS , migamit mi ug Sass mixin para ilisan ang among normal nga font-sizemga kabtangan. Ang mga responsive nga gidak-on sa font i-compile sa calc()mga function nga adunay usa ka mix remug viewport units aron mahimo ang responsive scaling nga kinaiya. Dugang pa bahin sa RFS ug ang pag-configure niini makita sa GitHub repository niini .