Zotengera malo
Gwiritsani ntchito zoyika zoyika pazigawo zanu kapena masamba kuti muwonetse kuti china chake chikutsegula.
Za
Zosungirako zitha kugwiritsidwa ntchito kupititsa patsogolo chidziwitso cha pulogalamu yanu. Amamangidwa ndi HTML ndi CSS okha, kutanthauza kuti simufunika JavaScript kuti mupange. Mudzafunika JavaScript yachizolowezi kuti musinthe mawonekedwe awo. Maonekedwe awo, mtundu, ndi kukula kwake zitha kusinthidwa mosavuta ndi makalasi athu othandiza.
Chitsanzo
Muchitsanzo chomwe chili m'munsimu, timatenga kagawo kakang'ono ka makhadi ndikuwapanganso ndi zosungira zomwe zimagwiritsidwa ntchito kuti tipange "khadi yotsegula". Kukula ndi kufanana ndi zofanana pakati pa ziwirizi.
Mutu wakhadi
Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.
Pitani kwinakwake<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>
Momwe zimagwirira ntchito
Pangani zosungira malo ndi .placeholder
kalasi ndi gulu la magawo a gridi (mwachitsanzo, .col-6
) kuti muyike width
. Atha kusintha mawuwo mkati mwa chinthu kapena kuwonjezeredwa ngati kalasi yosinthira ku gawo lomwe lilipo.
Timayika masitayelo owonjezera ku .btn
s kudzera ::before
kuti tiwonetsetse kuti height
akulemekezedwa. Mutha kuwonjezera pateni pazochitika zina ngati pakufunika, kapena kuwonjezera a
mkati mwa chinthucho kuti muwonetse kutalika kwake pamene mawu enieni alembedwa m'malo mwake.
<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"
kumangosonyeza kuti chinthucho chiyenera kubisika kwa owerenga. Mayendedwe
a choikira malo amatengera momwe olemba angagwiritsire ntchito masitayelo a choikira malo, momwe amakonzekera kusinthira zinthu, ndi zina zotero. Khodi ina ya JavaScript ingafunike kuti
musinthe mawonekedwe a chosungira ndikudziwitsa ogwiritsa ntchito a AT zakusintha.
M'lifupi
Mutha kusintha width
makalasi amtundu wa gridi, zogwirizira m'lifupi, kapena masitayilo amkati.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Mtundu
Kuphatikiza apo, placeholder
amagwiritsidwa ntchito currentColor
. Izi zitha kuphatikizidwa ndi mtundu wamtundu kapena gulu lothandizira.
<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>
Kukula
Kukula kwa .placeholder
s kumatengera kalembedwe kazinthu zamakolo. Sinthani mwamakonda anu ndi zosintha masanjidwe: .placeholder-lg
, .placeholder-sm
, kapena .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>
Makanema
Sonyezani zoikira malo ndi .placeholder-glow
kapena .placeholder-wave
kuti muwonetse bwino malingaliro a chinthu chomwe chikuchulukidwa .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Zosintha
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;