Masu riƙe wuri
Yi amfani da masu ɗaukar nauyi don abubuwan da aka haɗa ko shafukanku don nuna wani abu mai yiwuwa har yanzu yana lodawa.
Game da
Ana iya amfani da masu riƙe wuri don haɓaka ƙwarewar aikace-aikacen ku. An gina su da HTML da CSS kawai, ma'ana ba kwa buƙatar kowane JavaScript don ƙirƙirar su. Za ku, duk da haka, kuna buƙatar wasu JavaScript na al'ada don kunna ganuwansu. Siffarsu, launi, da girmansu ana iya keɓance su cikin sauƙi tare da azuzuwan abubuwan amfaninmu.
Misali
A cikin misalin da ke ƙasa, muna ɗaukar ɓangaren katin da aka saba kuma mu sake ƙirƙira shi tare da masu riƙe wuri da aka yi amfani da su don ƙirƙirar "katin kaya". Girma da rabbai iri ɗaya ne tsakanin su biyun.
Taken katin
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Tafi wani wuri<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>
Yadda yake aiki
Ƙirƙiri masu riƙe wuri tare da .placeholder
ajin da ajin grid ginshiƙi (misali, .col-6
) don saita width
. Za su iya maye gurbin rubutu a cikin wani kashi ko a ƙara su azaman aji mai gyara zuwa abin da ke akwai.
Muna amfani da ƙarin salo zuwa .btn
s via ::before
don tabbatar da height
an mutunta shi. Kuna iya tsawaita wannan ƙirar don wasu yanayi idan an buƙata, ko ƙara
a cikin kashi don nuna tsayi lokacin da ainihin rubutu ke gudana a wurinsa.
<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"
kawai yana nuna cewa kashi ya kamata a ɓoye ga masu karatun allo. Halin
lodawa na mai wurin ya dogara da yadda mawallafa za su yi amfani da salon masu wurin a zahiri, yadda suke shirin sabunta abubuwa, da dai sauransu. Ana iya buƙatar wasu lambar JavaScript don
musanya yanayin mai wurin da sanar da masu amfani da AT sabuntawa.
Nisa
Kuna iya canza width
azuzuwan ginshiƙan grid, abubuwan amfani mai faɗi, ko salon layi.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Launi
Ta hanyar tsoho, masu placeholder
amfani currentColor
. Ana iya shafe wannan tare da launi na al'ada ko aji mai amfani.
<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>
Girman girma
Girman .placeholder
s yana dogara ne akan salon rubutu na ɓangaren iyaye. Keɓance su tare da masu gyara ƙima: .placeholder-lg
, .placeholder-sm
, ko .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>
Animation
Rarraba masu riƙe wuri tare da .placeholder-glow
ko .placeholder-wave
don isar da mafi kyawun fahimtar wani abu da ake lodawa a hankali .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Masu canji
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;