Ebifo ebiteekebwamu ebifo

Kozesa ebifo eby'okutikka ebitundu byo oba empapula okulaga ekintu kiyinza okuba nga ekyatikka.

Ku muko guno

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 ebiteekeddwamu 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 .placeholderne 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 .btns via ::beforeokukakasa nti the heightis 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.

html

<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>

Enkozesa ya 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 widthebika by'ennyiriri okuyita mu giridi, ebikozesebwa mu bugazi, oba emisono egy'omu layini.

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Langi

Nga bwe kibadde, placeholderekozesa currentColor. Kino kiyinza okukyusibwa ne langi eya custom oba kiraasi y'omugaso.

html

<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 .placeholders yeesigamiziddwa ku sitayiro y’okuwandiika ey’ekintu ekizadde. Zikyuse n'ebikyusa obunene: .placeholder-lg, .placeholder-sm, oba .placeholder-xs.

html

<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-glowoba .placeholder-waveokutuusa obulungi endowooza y’ekintu ekitikkiddwa mu ngeri ey’amaanyi .

html

<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;