Placeholders
Cihên barkirinê ji bo pêkhate an rûpelên xwe bikar bînin da ku destnîşan bikin ku tiştek hîn jî tê barkirin.
Ji dor
Cihgir dikarin werin bikar anîn da ku ezmûna serîlêdana we zêde bikin. Ew tenê bi HTML û CSS-ê têne çêkirin, tê vê wateyê ku hûn hewce ne JavaScript-ê ne ku wan biafirînin. Lêbelê, hûn ê hewceyê hin JavaScript-a xwerû bikin ku dîtina wan biguhezînin. Xuyabûn, reng û mezinbûna wan bi dersên meyên karûbar bi hêsanî têne xweş kirin.
Mînak
Di mînaka jêrîn de, em pêkhateyek qertê ya tîpîk digirin û wê bi cîhgirên ku ji bo afirandina "karta barkirinê" hatine bicîh kirin ji nû ve diafirînin. Mezinahî û nîsbet di navbera herduyan de yek in.
Sernavê karta
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Biçe cihekî<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>
Çawa dixebite
Cîgiran bi .placeholder
polê û çînek stûna torê (mînak, .col-6
) biafirînin da ku xêz bikin width
. Ew dikarin nivîsê di hundurê hêmanekê de biguhezînin an jî wekî çînek guhêrbar li pêkhateyek heyî werin zêdekirin.
Em bi rê ve şêwazek din li ser .btn
s ::before
bicîh dikin da ku height
rêz were girtin. Hûn dikarin li gorî hewcedariyê vê nimûneyê ji bo rewşên din dirêj bikin, an jî
hêmanek di hundurê hêmanê de zêde bikin da ku dema ku nivîsa rastîn li cîhê xwe were pêşkêş kirin bilindahiyê nîşan bide.
<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"
tenê destnîşan dike ku divê hêman ji xwendevanên ekranê re were veşartin. Tevgera
barkirina cîhê bi wê yekê ve girêdayî ye ku nivîskar dê çawa bi rastî şêwazên cîhgir bikar bînin, ew çawa plan dikin ku tiştan nûve bikin, hwd. Dibe ku hin kodên JavaScript-ê hewce bibin da
ku rewşa cîhgir biguhezînin û bikarhênerên AT-ê ji nûvekirinê agahdar bikin.
Berî
Hûn dikarin width
çînên stûna torê, karûbarên firehiyê, an şêwazên hundurîn biguhezînin.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Reng
Bi xwerû, placeholder
bikar tîne currentColor
. Ev dikare bi rengek xwerû an çînek bikêrhatî were paşguh kirin.
<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>
Mezinbûn
Mezinahiya .placeholder
s-yê li gorî şêwaza tîpografî ya hêmana dêûbav têne çêkirin. Wan bi guhêrbarên mezinbûnê xweş bikin: .placeholder-lg
, .placeholder-sm
, an .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>
Jayandarî
Cihên cîhan bi .placeholder-glow
an jî .placeholder-wave
ji bo ku têgihîştina tiştek ku bi rengek çalak tê barkirin baştir ragihînin zindî bikin.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Variables
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;