Áitsealbhóirí
Bain úsáid as coinneálaithe lódála le haghaidh do chomhpháirteanna nó leathanaigh chun a chur in iúl go bhféadfadh go bhfuil rud éigin fós á luchtú.
Faoi
Is féidir áitshealbhóirí a úsáid chun cur le taithí d’iarratais. Níl siad tógtha ach le HTML agus CSS, rud a chiallaíonn nach bhfuil JavaScript ag teastáil uait chun iad a chruthú. Beidh roinnt JavaScript saincheaptha uait, áfach, chun a n-infheictheacht a scoránaigh. Is féidir a gcuma, a dath agus a méid a shaincheapadh go héasca lenár ranganna fóntais.
Sampla
Sa sampla thíos, glacaimid comhpháirt cárta tipiciúil agus athchruthaímid é le sealbhóirí áite a chuirtear i bhfeidhm chun “cárta lódála” a chruthú. Tá méid agus comhréireanna mar an gcéanna idir an dá cheann.
Teideal an chárta
Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.
Téigh áit éigin<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>
Conas a oibríonn sé
Cruthaigh áitshealbhóirí leis an .placeholder
rang agus rang colún greille (m.sh., .col-6
) chun an width
. Is féidir iad a chur in ionad an téacs taobh istigh d’eilimint nó iad a chur mar aicme mionathraithe le comhpháirt atá ann cheana féin.
Cuirimid stíliú breise i bhfeidhm ar .btn
s via ::before
chun a chinntiú go height
bhfuil meas air. Is féidir leat an patrún seo a leathnú le haghaidh cásanna eile de réir mar is gá, nó cuir isteach
laistigh den eilimint chun an airde a léiriú nuair a rindreáiltear an téacs féin ina áit.
<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"
ach le fios gur chóir an eilimint a chur i bhfolach do léitheoirí scáileáin. Braitheann
iompar luchtaithe an tsealbhóra áite ar an gcaoi a n-úsáidfidh údair na stíleanna sealbhóirí áite, conas a bheartaíonn siad rudaí a nuashonrú, etc. D’fhéadfadh go mbeadh gá le roinnt cód JavaScript chun
staid an
áitsealbhóra a mhalartú agus úsáideoirí AT a chur ar an eolas faoin nuashonrú.Leithead
Is féidir leat na width
trí ranganna colún greille, fóntais leithead, nó stíleanna inlíne a athrú.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Dath
De réir réamhshocraithe, placeholder
úsáidí currentColor
. Is féidir é seo a shárú le dath saincheaptha nó le haicme fóntais.
<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>
Sizing
Tá méid na .placeholder
s bunaithe ar stíl chlóghrafaíoch na máthaireiliminte. Saincheap iad le modhnóirí méide: .placeholder-lg
, .placeholder-sm
, nó .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>
Beochan
Áititheoirí a bheochan leis an dearcadh go bhfuil rud éigin á lódáil go gníomhach.placeholder-glow
nó a chur in iúl níos fearr..placeholder-wave
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Athróga
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;