Izimeli
Sebenzisa ukulayisha izimeli zezingxenye zakho noma amakhasi ukukhombisa okuthile okungenzeka kusalayisha.
Mayelana
Izimeli zingasetshenziswa ukuthuthukisa umuzwa wohlelo lwakho lokusebenza. Akhiwe kuphela nge-HTML ne-CSS, okusho ukuthi awudingi i-JavaScript ukuze uwadale. Nokho, uzodinga i-JavaScript yangokwezifiso ukuze uguqule ukubonakala kwayo. Ukubukeka kwabo, umbala, kanye nosayizi kungenziwa ngendlela oyifisayo kalula ngamakilasi ethu awusizo.
Isibonelo
Esibonelweni esingezansi, sithatha ingxenye yekhadi evamile futhi siyidale kabusha ngezibambi zendawo ezisetshenziswa ukudala "ikhadi lokulayisha". Ubukhulu nezilinganiso ziyefana phakathi kwakho kokubili.
Isihloko sekhadi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Hamba ndawana thize<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>
Isebenza kanjani
Dala izimeli .placeholder
ngekilasi kanye nesigaba sekholomu yegridi (isb, .col-6
) ukuze usethe i- width
. Angakwazi esikhundleni sombhalo ongaphakathi kwe-elementi noma angezwe njengesigaba sokuguqula engxenyeni ekhona.
Sisebenzisa isitayela esengeziwe ku- .btn
s nge ::before
ukuze siqinisekise ukuthi height
kuyahlonishwa. Unganweba le phethini kwezinye izimo njengoba kudingeka, noma wengeze u-a
ngaphakathi kwe-elementi ukuze ubonise ubude lapho umbhalo wangempela unikezwa endaweni yawo.
<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"
-elementi kubonisa kuphela ukuthi isici kufanele sifihlwe kubafundi besikrini. Ukulayisha
ukuziphatha kwesimeli kuncike ekutheni ababhali bazozisebenzisa kanjani ngempela izitayela zesimeli, ukuthi bahlela kanjani ukubuyekeza izinto, njll. Enye ikhodi ye-JavaScript ingase idingeke
ukushintsha isimo sesimeli futhi yazise abasebenzisi be-AT ngesibuyekezo.
Ububanzi
Ungashintsha width
amakilasi ekholomu yegridi, izinsiza zobubanzi, noma izitayela ezisemgqeni.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Umbala
Ngokuzenzakalelayo, placeholder
ukusetshenziswa currentColor
. Lokhu kungakhishwa ngombala wangokwezifiso noma isigaba sokusetshenziswa.
<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>
Ukulinganisa
Usayizi ka- .placeholder
s usekelwe kusitayela sokuthayipha se-elementi engumzali. Enze ngendlela oyifisayo ngezilungisi zosayizi: .placeholder-lg
, .placeholder-sm
, noma .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>
Opopayi
Gcwalisa izimeli .placeholder-glow
noma .placeholder-wave
udlulise kangcono umbono wento elayishwayo .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Okuguquguqukayo
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;