Tagata fa'amautu
Fa'aoga mea fa'apipi'i fa'apipi'i mo au vaega po'o itulau e fa'ailoa mai ai se mea o lo'o utaina pea.
E uiga i
E mafai ona fa'aoga nofoaga e fa'aleleia ai le poto masani o lau talosaga. E na'o le HTML ma le CSS e fausia ai, o lona uiga e te le mana'omia se Javascript e fai ai. Ae ui i lea, e te manaʻomia se JavaScript masani e sui ai lo latou vaʻaia. O latou foliga vaaia, lanu, ma le lapopoa e mafai ona faigofie ona faʻavasegaina ma a tatou vasega aoga.
Faataitaiga
I le faʻataʻitaʻiga o loʻo i lalo, matou te ave se mea faʻapitoa kata ma toe faʻapipiʻiina ma faʻaoga faʻapipiʻi e fai ai se "pepa uta". Ole lapo'a ma fa'atatau e tutusa i le va o le lua.
Igoa pepa
O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.
Alu i se mea<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>
E faapefea ona galue
Fausia mea fa'apipi'i i le .placeholder
vasega ma se vasega koluma laina (fa'ata'ita'iga, .col-6
) e seti ai le width
. E mafai ona latou suia le tusitusiga i totonu o se elemene pe faʻaopoopoina o se vasega faʻaleleia i se vaega o loʻo iai.
Matou te fa'aogaina sitaili fa'aopoopo i .btn
le s via ::before
ina ia mautinoa o height
lo'o fa'aaloalogia. E mafai ona e fa'alautele lenei mamanu mo isi tulaga pe a mana'omia, pe fa'aopoopo se
i totonu o le elemene e atagia ai le maualuga pe a tu'uina atu tusitusiga moni i lona tulaga.
<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"
naʻo faʻaalia e tatau ona natia le elemene i le au faitau faitau. O le
utaina o le amio a le tagata e tuʻuina atu e faʻalagolago i le faʻaogaina e tusitala o sitaili faʻapipiʻi, pe faʻafefea ona latou fuafua e faʻafouina mea, ma isi
.
Lautele
E mafai ona e suia width
vasega laina laina laina, fa'aoga lautele, po'o sitaili laina.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Lanu
Ona o le faaletonu, o le placeholder
faaaogaina currentColor
. E mafai ona suitulaga i se lanu masani poʻo se vasega aoga.
<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>
Tele
Ole lapo'a ole .placeholder
s e fa'avae ile faiga fa'akomipiuta ole elemene matua. Fa'asinomaga i latou fa'aopoopo fa'avasega: .placeholder-lg
, .placeholder-sm
, po'o .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>
Fa'afiafiaga
Fa'aola tagata fa'apipi'i fa'atasi ma .placeholder-glow
pe .placeholder-wave
fa'alelei atili le fa'ailoaina atu o se mea o lo'o fa'atumuina ma le malosi.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Fuafuaga
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;