Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Ukuchwetheza

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

Kweli phepha

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 (eqhelekile ukuba yi-16px) ukuze abatyeleli bakwazi ukuziqhelanisa nokungagqibeki kwebhrawuza njengoko kufuneka.
  • Sebenzisa i- $font-family-base, $font-size-basekunye $line-height-baseneempawu njengesiseko sethu sokuchwetheza sisetyenziswa kwi <body>.
  • Cwangcisa umbala wekhonkco wehlabathi nge $link-color.
  • 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
Umboniso 5
Umboniso 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>

Izihloko zokubonisa ziqwalaselwe kusetyenziswa $display-font-sizesimephu ye-Sass kunye neenguqu ezimbini, $display-font-weightkunye $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;

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

Qaphela ukuba ezo thegi kufuneka zisetyenziselwe injongo ye-semantic:

  • <mark>umele isicatshulwa esiphawuliweyo okanye esigxininisiweyo ngeenjongo zereferensi okanye zokuphawula.
  • <small>imele izimvo ezisecaleni kunye noshicilelo oluncinci, njengelungelo lokushicilela kunye nesicatshulwa esisemthethweni.
  • <s>imele into engasekhoyo okanye engasachanekanga.
  • <u>imele isithuba sokubhaliweyo kumgca osemgceni ekufuneka unikezelwe ngendlela ebonisa ukuba unenkcazelo engeyiyo eyombhalo.

Ukuba ufuna ukwenza isitayile isicatshulwa sakho, kuya kufuneka usebenzise ezi klasi zilandelayo endaweni yoko:

  • .markizakusebenzisa izimbo ezifanayo njenge <mark>.
  • .smallizakusebenzisa izimbo ezifanayo njenge <small>.
  • .text-decoration-underlineizakusebenzisa izimbo ezifanayo njenge <u>.
  • .text-decoration-line-throughizakusebenzisa izimbo ezifanayo njenge <s>.

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, uguqulo, isitayile, ubunzima, ubude bomgca, umhombiso 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.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

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

Ukuchaza umthombo

Ubume beHTML bufuna ukuba uphawu lwebhloko lubekwe ngaphandle kwefayile <blockquote>. Xa unikezela nge-attribution, songela eyakho <blockquote>kwaye <figure>usebenzise <figcaption>inqanaba lenqanaba lebhloko (umzekelo, <p>) kunye .blockquote-footerneklasi. Qinisekisa ukuba usonga igama lomsebenzi wemvelaphi <cite>ngokunjalo.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

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

Ulungelelwaniso

Sebenzisa izinto eziluncedo zokubhaliweyo njengoko kufuneka ukutshintsha ulungelelwaniso lwebhloko yakho.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

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

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

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

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

Kwi-Bootstrap 5, senze ubungakanani befonti baphendule ngokungagqibekanga, sivumela okubhaliweyo ukuba kukhule ngokwendalo kwisixhobo kunye nobukhulu bendawo yokujonga. Jonga kwiphepha le- RFS ukufumanisa ukuba oku kusebenza njani.

Sass

Izinto eziguquguqukayo

Izihloko zineenguqu ezithile ezizinikeleyo zokulinganisa kunye nezithuba.

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

Izinto zokuchwetheza eziziintlobo ngeentlobo ezigqunywe apha kunye nakwi- Reboot nazo zineenguqu ezinikezelweyo.

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

Imixube

Ayikho imixube ezinikeleyo yokuchwetheza, kodwa iBootstrap iyayisebenzisa iSabelo sefonti ephendulayo (RFS) .