Ebifo ebiteekebwamu ebifo
Kozesa ebifo eby'okutikka ebitundu byo oba empapula okulaga ekintu kiyinza okuba nga ekyatikka.
Ku
Ebifo ebiteekebwamu bisobola okukozesebwa okutumbula obumanyirivu bw’okukozesa kwo. Zizimbibwa ne HTML ne CSS zokka, ekitegeeza nti teweetaaga JavaScript yonna okuzikola. Kyokka ojja kwetaaga JavaScript ezimu ez’enjawulo okukyusa engeri gye zirabika. Endabika yaabwe, langi, n’obunene bwazo bisobola bulungi okulongoosebwa ne kiraasi zaffe ez’ebikozesebwa.
Eky'okulabirako
Mu kyokulabirako wansi, tutwala ekitundu kya kaadi ekya bulijjo ne tuddamu okukikola nga tulina ebifo ebiteekeddwako okukola “kaadi y’okutikka”. Enkula n’ebipimo bye bimu wakati w’ebintu bino ebibiri.
Omutwe gwa kaadi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Genda awalala<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>
Engeri gye kikola
Tonda ebifo n'ekibiina .placeholder
ne kiraasi y'ennyiriri za grid (okugeza, .col-6
) okuteekawo width
. Ziyinza okukyusa ekiwandiiko munda mu elementi oba okugattibwako nga ekibiina ekikyusa ku kitundu ekiriwo.
Tusiiga sitayiro endala ku .btn
s via ::before
okukakasa nti the height
is respected. Oyinza okugaziya enkola eno ku mbeera endala nga bwe kyetaagisa, oba okugattako a
munda mu elementi okulaga obugulumivu ng’ekiwandiiko kyennyini kiweereddwa mu kifo kyakyo.
<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"
yokka eraga nti elementi erina okukwekebwa eri abasomi ba screen. Enneeyisa
y’okutikka ekifo esinziira ku ngeri abawandiisi gye banaakozesa ddala emisono gy’ebifo, engeri gye bateekateeka okutereeza ebintu, n’ebirala Koodi ezimu eza JavaScript ziyinza okwetaagisa
okukyusakyusa embeera y’ekifo n’okutegeeza abakozesa AT ku kulongoosa.
Obugazi
Osobola okukyusa width
ebika by'ennyiriri okuyita mu giridi, ebikozesebwa mu bugazi, oba emisono egy'omu layini.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Langi
Nga bwe kibadde, placeholder
ekozesa currentColor
. Kino kiyinza okukyusibwa ne langi eya custom oba kiraasi y'omugaso.
<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>
Okugerageranya obunene
Enkula ya .placeholder
s yeesigamiziddwa ku sitayiro y’okuwandiika ey’ekintu ekizadde. Zikyuse n'ebikyusa obunene: .placeholder-lg
, .placeholder-sm
, oba .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>
Ebifaananyi ebirina obulamu
Animate placeholders ne .placeholder-glow
oba .placeholder-wave
okutuusa obulungi endowooza y’ekintu ekitikkiddwa mu ngeri ey’amaanyi .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass nga bwe kiri
Enkyukakyuka ezikyukakyuka
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;