Leku-markak
Erabili kargatzeko leku-markak zure osagai edo orrietarako oraindik zerbait kargatzen ari dela adierazteko.
Buruz
Leku-markak erabil daitezke zure aplikazioaren esperientzia hobetzeko. HTML eta CSSrekin soilik eraiki dira, hau da, ez duzu JavaScript behar horiek sortzeko. Hala ere, JavaScript pertsonalizatu batzuk beharko dituzu haien ikusgarritasuna aldatzeko. Haien itxura, kolorea eta tamaina erraz pertsonaliza daitezke gure erabilgarritasun klaseekin.
Adibidea
Beheko adibidean, txartel-osagai tipiko bat hartu eta leku-markekin birsortzen dugu "kargatzeko txartela" sortzeko. Tamaina eta proportzioak berdinak dira bien artean.
Txartelaren izenburua
Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.
Zoaz nonbait<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>
Nola dabil
Sortu leku-markak .placeholder
klasearekin eta sareta-zutabe-klase batekin (adibidez, .col-6
) width
. Elementu baten barruan dagoen testua ordezkatu dezakete edo lehendik dagoen osagai bati modifikatzaile klase gisa gehi daitezke.
Estilo osagarria aplikatzen diogu .btn
s bidez , errespetatzen ::before
dela ziurtatzeko . height
Eredu hau beste egoera batzuetarako heda dezakezu behar izanez gero, edo
elementuaren barruan bat gehi dezakezu altuera islatzeko benetako testua bere lekuan errendatzen denean.
<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"
soilik adierazten du elementua pantaila-irakurleentzat ezkutatu behar dela. Leku
-markaren karga -portaera egileek leku-markaren estiloak benetan nola erabiliko dituzten, gauzak eguneratzeko asmoa duten eta abarren araberakoa da. Baliteke JavaScript kode batzuk behar izatea
leku-markaren egoera
aldatzeko eta AT erabiltzaileei eguneratzearen berri emateko.Zabalera
width
Sarearen bidezko zutabeen klaseak, zabalera-utilitateak edo lerroko estiloak alda ditzakezu .
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Kolore
Lehenespenez, placeholder
erabilerak currentColor
. Hau kolore pertsonalizatu edo erabilgarritasun klase batekin gainidatzi daiteke.
<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>
Tamaina
S -ren tamaina .placeholder
elementu nagusiaren estilo tipografikoan oinarritzen da. Pertsonalizatu itzazu tamaina aldagailuekin: .placeholder-lg
, .placeholder-sm
, edo .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>
Animazioa
Animatu leku-markak .placeholder-glow
aktiboki kargatzen ari .placeholder-wave
den zerbaiten pertzepzioa hobeto adierazteko .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Aldagaiak
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;