Izibambi-ndawo

Sebenzisa izibambi-ndawo zokulayisha kumacandelo akho okanye amaphepha ukubonisa into esenokuba isalayisha.

Kweli phepha

Malunga

Izibambi-ndawo zingasetyenziselwa ukuphucula amava esicelo sakho. Zakhelwe kuphela nge-HTML kunye neCSS, okuthetha ukuba awudingi iJavaScript ukuyidala. Uyakufuna, nangona kunjalo, iJavaScript yesiko ukuguqula ukubonakala kwayo. Inkangeleko yabo, umbala, kunye nobungakanani bunokwenziwa ngokulula kunye neeklasi zethu eziluncedo.

Umzekelo

Kulo mzekelo ungezantsi, sithatha icandelo lekhadi eliqhelekileyo kwaye silidale ngokutsha ngezibambi-ndawo ezisetyenziswayo ukwenza "ikhadi lokulayisha". Ubungakanani kunye nobungakanani buyafana phakathi kwezi zibini.

Isihloko sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Yiya kwenye indawo

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Ingaba isebenza kanjani

Yenza izibambi-ndawo kunye .placeholderneklasi kunye neklasi yomhlathi wegridi (umzekelo, .col-6) ukuseta i width. Banokutshintsha okubhaliweyo ngaphakathi kwento okanye bongezwe njengodidi lwesilungisi kwicandelo esele likho.

Sisebenzisa isitayile esongezelelweyo kwi- .btns via ::beforeukuze siqinisekise ukuba heightsiyahlonitshwa. Ungayandisa le pateni kwezinye iimeko njengoko kufuneka, okanye wongeze u-a  phakathi kwendawo ukubonisa umphakamo xa okubhaliweyo kunikezelwe endaweni yayo.

html

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

Ukusetyenziswa aria-hidden="true"kubonisa kuphela ukuba into kufuneka ifihlwe kubafundi besikrini. Ukulayisha ukuziphatha kwesibambi-ndawo kuxhomekeke kwindlela ababhali abaya kuzisebenzisa ngayo izimbo zesibambi -ndawo, indlela abaceba ngayo ukuhlaziya izinto, njl. njl. Enye ikhowudi yeJavaScript ingafuneka ukutshintsha imeko yesibambi-ndawo kwaye yazise abasebenzisi be-AT ngohlaziyo.

Ububanzi

Ungatshintsha widthiiklasi zekholamu yegridi, izixhobo zobubanzi, okanye izimbo ezingaphakathi.

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Umbala

Ngokungagqibekanga, placeholderukusetyenziswa currentColor. Oku kunokukhutshwa ngombala oqhelekileyo okanye udidi oluluncedo.

html

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Ubungakanani

Ubungakanani be- .placeholders busekelwe kwisimbo sokuchwetheza sesiqalelo somzali. Zenze ngokwezifiso ngezilungisi zobungakanani: .placeholder-lg, .placeholder-sm, okanye .placeholder-xs.

html

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Oopopayi

Philisa izibambi-ndawo kunye .placeholder-glowokanye .placeholder-waveukuhambisa ngcono imbono yento elayishwa ngokusebenzayo .

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Izinto eziguquguqukayo

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;