Swikhomela-ndhawu
Tirhisa swikhomela-ndhawu swo layicha swa swiphemu swa wena kumbe matluka ku kombisa leswaku nchumu wo karhi wu nga ha va wa ha layicha.
Hi
Swikhomela-ndhawu swi nga tirhisiwa ku ndlandlamuxa ntokoto wa xikombelo xa wena. Ti akiwile ntsena hi HTML na CSS, leswi vulaka leswaku a wu lavi JavaScript leswaku u ti endla. Hambiswiritano, u ta lava JavaScript yin’wana ya ntolovelo leswaku u cinca-cinca ku vonaka ka tona. Ku languteka ka tona, muvala ni mpimo wa tona swi nga endliwa hi ku olova hi ku tirhisa titlilasi ta hina ta switirhisiwa.
Xikombiso
Eka xikombiso lexi nga laha hansi, hi teka xiphemu xa khadi lexi tolovelekeke hi xi tumbuluxa nakambe hi swikhomela-ndhawu leswi tirhisiweke ku endla “khadi ro layicha”. Vukulu na mpimo swa fana exikarhi ka leswimbirhi.
Xihloko xa khadi
Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.
Yana kun’wana<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>
Ndlela leyi swi tirhaka ha yona
Endla swikhomela-ndhawu hi .placeholder
tlilasi na tlilasi ya kholomo ya gridi (xikombiso, .col-6
) ku veka width
. Va nga siva tsalwa endzeni ka xiaki kutani va engeteriwa tanihi tlilasi ya mucinci eka xiphemu lexi nga kona.
Hi tirhisa switayili swo engetela eka .btn
s via ::before
ku tiyisisa leswaku the height
ya xiximiwa. U nga ha andlala xivumbeko lexi eka swiyimo swin’wana tanihilaha swi lavekaka hakona, kumbe u engetela
endzeni ka elemente ku kombisa ku tlakuka loko tsalwa ra xiviri ri hundzuluxeriwa ematshan’wini ya rona.
<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"
ntsena swi kombisa leswaku elemente yi fanele ku fihliwa eka vahlayi va xikirini. Mahanyelo yo
layicha ya xikhomela-ndhawu ya ya hi ndlela leyi vatsari va nga ta tirhisa ha yona switayele swa xikhomela-ndhawu hakunene, ndlela leyi va kunguhataka ku pfuxeta swilo ha yona, na swin’wana na swin’wana Khodi yin’wana ya JavaScript yi nga ha laveka ku
cincana xiyimo xa xikhomela-ndhawu na ku tivisa vatirhisi va AT hi ku pfuxetiwa.
Anama
U nga cinca width
titlilasi ta kholomo ya through grid, switirhisiwa swa ku anama, kumbe switayele swa le ndzeni ka layini.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Muhlovo
Hi ku tiyimisela, placeholder
matirhiselo ya currentColor
. Leswi swi nga ha tluriwa hi muvala wa ntolovelo kumbe tlilasi ya vukorhokeri.
<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>
Ku pima mpimo
Vukulu bya .placeholder
s byi sekeriwe eka xitayili xa ku thayipa xa xiaki xa mutswari. Swi endle leswaku swi va leswi u swi lavaka hi swilo leswi cinca-cincaka mpimo: .placeholder-lg
, .placeholder-sm
, kumbe .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>
Swifaniso leswi hanyaka
Animate placeholders hi .placeholder-glow
kumbe .placeholder-wave
ku hundzisela ku antswa mavonelo ya nchumu lowu layichiweke hi ku gingiriteka .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Swilo leswi cinca-cincaka
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;