Source

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.
Ngohlobo lwesikali esibandakanyayo nesifikelelekayo , sithatha ingcambu engagqibekanga font-sizeyesikhangeli (eqhelekile ukuba yi-16px) ukuze abatyeleli bakwazi ukwenza ngokweemfuno zabo zebrawuza 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>

Ukulungisa izihloko

Sebenzisa iiklasi eziluncedo ezibandakanyiweyo ukwenza kwakhona okubhaliweyo okuncinci okusesibini 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 oluthe kratya.

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.

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>

Iimpawu zesicatshulwa esingaphakathi

Isimbo sezinto eziqhelekileyo ezingaphakathi kwe-HTML5.

Ungasebenzisa ithegi yamanqaku 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 oluhle.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Ukuchaza umthombo

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

Umntu odumileyo kwiSihloko soMthombo

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

Ulungelelwaniso

Sebenzisa izinto eziluncedo zokubhaliweyo njengoko kufuneka ukutshintsha ulungelelwaniso lwebhloko yakho.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

Umntu odumileyo kwiSihloko soMthombo

<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. I-integer posuere erat ante.

Umntu odumileyo kwiSihloko soMthombo

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem kunye ne-massa
I-Facilisis kwi-pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- I-Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
I-Faucibus porta lacus fringilla vel
Aenean sit 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>

Nomgca

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

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

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.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ixesha elifinyeziweyo liyanqunyulwa

Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Ukuzalela

Uluhlu lweenkcazo ezifakwe kwindlwane: 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>

Ukuchwetheza okuphendulayo

Uchwethezo oluphendulayo lubhekiselele ekulinganiseni okubhaliweyo kunye namalungu ngokunyenyisa ngokulula ingcambu yelungu font-sizengaphakathi koluhlu lwemibuzo yemidiya. I-Bootstrap ayikwenzeli oku, kodwa kulula ukongeza ukuba uyayifuna.

Nanku umzekelo walo xa usebenza. Khetha nayiphi font-sizena imibuzo kunye nemidiya oyinqwenelayo.

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