Izibambi-ndawo
Sebenzisa izibambi-ndawo zokulayisha kumacandelo akho okanye amaphepha ukubonisa into esenokuba isalayisha.
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 .placeholder
neklasi 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- .btn
s via ::before
ukuze siqinisekise ukuba height
siyahlonitshwa. Ungayandisa le pateni kwezinye iimeko njengoko kufuneka, okanye wongeze u-a
phakathi kwendawo ukubonisa umphakamo xa okubhaliweyo kunikezelwe endaweni yayo.
<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>
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 width
iiklasi zekholamu yegridi, izixhobo zobubanzi, okanye izimbo ezingaphakathi.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Umbala
Ngokungagqibekanga, placeholder
ukusetyenziswa currentColor
. Oku kunokukhutshwa ngombala oqhelekileyo okanye udidi oluluncedo.
<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- .placeholder
s busekelwe kwisimbo sokuchwetheza sesiqalelo somzali. Zenze ngokwezifiso ngezilungisi zobungakanani: .placeholder-lg
, .placeholder-sm
, okanye .placeholder-xs
.
<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-glow
okanye .placeholder-wave
ukuhambisa ngcono imbono yento elayishwa ngokusebenzayo .
<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;