in English

Ukuchwetheza

Amaxwebhu kunye nemizekelo ye-Bootstrap typography, kuquka iisetingi zehlabathi, izihloko, isicatshulwa somzimba, uluhlu, kunye nokunye.

Iisetingi zehlabathi

I-Bootstrap iseta umboniso osisiseko wehlabathi jikelele, ukuchwetheza, kunye nezimbo zekhonkco. Xa ulawulo olungakumbi lufuneka, khangela iiklasi eziluncedo zombhalo .

  • Sebenzisa isitakhi sefonti yemveli ekhetha eyona ilungileyo font-familykwi-OS nganye kunye nesixhobo.
  • Kwisikali esibandakanyayo nesifikelelekayo sohlobo, sisebenzisa ingcambu engagqibekanga font-sizeyesikhangeli (eqhele ukuba yi-16px) ukuze abakhenkethi bakwazi ukulungelelanisa ibhrawuza yabo engagqibekanga njengoko kufuneka.
  • Sebenzisa i- $font-family-base, $font-size-basekunye $line-height-baseneempawu njengesiseko sethu sokuchwetheza sisetyenziswa kwi <body>.
  • Cwangcisa umbala wekhonkco wehlabathi usebenzisa $link-colorkwaye usebenzise ikhonkco elikrwelela kuphela kwi :hover.
  • Sebenzisa $body-bgukuseta i background-color( <body>ngokungagqibekanga #fff).

Ezi ndlela zinokufumaneka ngaphakathi _reboot.scss, kwaye iinguqu zehlabathi zichazwe kwi _variables.scss. Qiniseka ukuba $font-size-baseuyayifaka rem.

Izihloko

Zonke izihloko ze-HTML, <h1>nge- <h6>, ziyafumaneka.

Isihloko Umzekelo
<h1></h1> h1. Isihloko seBootstrap
<h2></h2> h2. Isihloko seBootstrap
<h3></h3> h3. Isihloko seBootstrap
<h4></h4> h4. Isihloko seBootstrap
<h5></h5> h5. Isihloko seBootstrap
<h6></h6> h6. Isihloko seBootstrap 
<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>

.h1ngeeklasi zikwakhona .h6, kuba xa ufuna ukuthelekisa isimbo somgca wesihloko kodwa awukwazi ukusebenzisa isiqalelo seHTML esinxulumeneyo.

h1. Isihloko seBootstrap

h2. Isihloko seBootstrap

h3. Isihloko seBootstrap

h4. Isihloko seBootstrap

h5. Isihloko seBootstrap

h6. Isihloko seBootstrap

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

Ukulungelelanisa izihloko

Sebenzisa iiklasi eziluncedo ezibandakanyiweyo ukwenza kwakhona okubhaliweyo okuncinci okusesekondari okubhaliweyo ukusuka kwiBootstrap 3.

Isihloko sedispleyi esefashonini Esinombhalo wesibini ofihlileyo 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Bonisa izihloko

Iimpawu zentloko zemveli zenzelwe ukusebenza kakuhle kwinyama yomxholo wekhasi lakho. Xa ufuna isihloko ukuze ugqame, cinga ukusebenzisa isihloko esiboniswayo—isihloko esikhulu, esinoluvo olungakumbi. Gcina ukhumbula ukuba ezi zihloko aziphenduli ngokungagqibekanga, kodwa kuyenzeka ukwenza ubungakanani befonti abaphendulayo .

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

Inkokeli

Yenza umhlathi ugqame ngokongeza .lead.

Lo ngumhlathi okhokelayo. Ibalasele kwimihlathi eqhelekileyo.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Iimpawu zesicatshulwa esingaphakathi

Isimbo sezinto eziqhelekileyo ezingaphakathi kwe-HTML5.

Ungasebenzisa i-mark tag kuqaqambisaumbhalo.

Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengombhalo ocinyiweyo.

Lo mgca wokubhaliweyo wenzelwe ukuba uthathwe njengongasachanekanga.

Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengokongeza kuxwebhu.

Lo mgca wokubhaliweyo uya kwenza njengoko ukrwelelwe umgca ngaphantsi

Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengoshicilelo olucolekileyo.

Lo mgca unikezelwe njengombhalo ongqindilili.

Lo mgca unikezelwe njengombhalo okekeleyo.

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

.markkwaye .smalliiklasi zikwakhona ukusebenzisa izimbo ezifanayo <mark>kwaye <small>ngelixa unqanda naziphi iimpembelelo zesemantic ezingafunekiyo ezinokuthi ziziswe ziithegi.

Ngelixa ungaboniswanga ngasentla, zive ukhululekile ukusebenzisa <b>nakwi <i>-HTML5. <b>yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo ngelixa <i>ubukhulu becala iselizwi, amagama obugcisa, njl.

Izixhobo ezibhaliweyo

Guqula ulungelelwaniso lombhalo, uguqule, isitayile, ubunzima, kunye nombala ngezixhobo zethu zokubhaliweyo kunye nezixhobo zombala .

Ushunqulelo

Uzalisekiso olucwangcisiweyo lwesiqalelo se-HTML <abbr>kwizifinyezo kunye nee-akhronimi ukubonisa inguqulelo eyandisiweyo kwi-hover. Izishunqulelo zinomgca ngaphantsi kwaye zifumane ikhesa yoncedo ukubonelela ngemeko eyongezelelweyo kwi-hover nakubasebenzisi boncedo lobuchwepheshe.

Yongeza .initialismkwisifinyezo sefonti encinci kancinane.

attr

HTML

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

Iingcaphuno zebhloko

Ukucaphula iibhloko zomxholo komnye umthombo ngaphakathi koxwebhu lwakho. Gquba <blockquote class="blockquote">malunga nayo nayiphi na i- HTML njengesicatshulwa.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

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

Ukuchaza umthombo

Yongeza u-a <footer class="blockquote-footer">ukuze uchonge umthombo. Gquba igama lomthombo womsebenzi kwi <cite>.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

Umntu odumileyo kwiSihloko soMthombo 
<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>

Ulungelelwaniso

Sebenzisa izinto eziluncedo zokubhaliweyo njengoko kufuneka ukutshintsha ulungelelwaniso lwebhloko yakho.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

Umntu odumileyo kwiSihloko soMthombo 
<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>

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

Umntu odumileyo kwiSihloko soMthombo 
<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>

Uluhlu

Ayifakwanga isimbo

Susa umda ongagqibekanga list-stylekunye nowasekhohlo kwizinto zoluhlu (abantwana bangoku kuphela). Oku kusebenza kuphela kwizinto zoluhlu lwabantwana olukhawulezileyo , okuthetha ukuba kuya kufuneka wongeze iklasi kulo naluphi na uluhlu olubekwe kwindlwane ngokunjalo.

  • Olu luhlu.
  • Ibonakala ingabhalwanga ngokupheleleyo.
  • Ngokwesakhiwo, iseluluhlu.
  • Nangona kunjalo, esi simbo sisebenza kuphela kwizinto zangoku zabantwana.
  • Uluhlu olufakwe kwindlwane:
    • abachatshazelwa sesi simbo
    • isabonisa imbumbulu
    • kwaye ube nomda wasekhohlo ofanelekileyo
  • Oku kusenokuba luncedo kwezinye iimeko.
<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>

Nomgca

Susa iibhulethi zoluhlu kwaye usebenzise ukukhanya marginkunye nendibaniselwano yeeklasi ezimbini, .list-inlinekunye .list-inline-item.

  • Le yinto yoluhlu.
  • Kwaye enye.
  • Kodwa ziboniswa emgceni.
<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>

Ulungelelwaniso loluhlu lwenkcazelo

Lungelelanisa imigaqo kunye neenkcazo ngokuthe tye ngokusebenzisa iiklasi ezichazwe kwangaphambili zesixokelelwano sethu (okanye imixube ye-semantic). Kwimigaqo emide, ungakhetha ukongeza .text-truncateiklasi ukucutha okubhaliweyo ngeellipsis.

Uluhlu lweenkcazelo
Uluhlu lwenkcazo lufanelekile ukuchaza amagama.
Ixesha

Inkcazo yegama.

Kunye nesicatshulwa esingakumbi senkcazo yesibambi-ndawo.

Elinye ixesha
Le nkcazo imfutshane, ngoko akukho mhlathi owongezelelweyo okanye nantoni na.
Ixesha elifinyeziweyo liyanqunyulwa
Oku kunokuba luncedo xa indawo ixinene. Yongeza i-ellipsis ekugqibeleni.
Ukuzalela
Uluhlu lweenkcazo ezifakwe kwindlwane
Ndikuvile uthanda uluhlu lweenkcazo. Makhe ndibeke uluhlu lwenkcazo ngaphakathi koluhlu lwakho lwenkcazo. 
<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>

Ubungakanani befonti abaphendulayo

Ukusukela nge-v4.3.0, iinqanawa ze-Bootstrap ezinokhetho lokuvumela ubungakanani befonti ephendulayo, ivumela okubhaliweyo ukuba kukhule ngokwendalo kwisixhobo kunye nobukhulu bendawo yokujonga. I-RFS inokwenziwa ngokutshintsha ukwahluka kwe- $enable-responsive-font-sizesSass ukuya truekunye nokuphinda ubuyise i-Bootstrap.

Ukuxhasa i- RFS , sisebenzisa i-Sass mixin ukubuyisela font-sizeiipropati zethu eziqhelekileyo. Ubungakanani befonti abaphendulayo buya kudityaniswa bube calc()yimisebenzi remexubeneyo kunye neeyunithi zokujonga ukwenza indlela yokuziphatha yokusabela yokulinganisa. Okunye malunga ne- RFS kunye noqwalaselo lwayo lunokufumaneka kwindawo yokugcina ye- GitHub .