Bakka qaban

Wanti tokko ammallee fe'amuu akka danda'u agarsiisuuf qaamolee ykn fuula keetif qabduu iddoo fe'uu fayyadami.

Fuula kana irratti

Waa'ee

Bakka qabduun muuxannoo iyyannoo kee guddisuuf fayyadamuun ni danda'ama. Isaanis HTML fi CSS qofaan ijaaramaniiru, jechuunis isaan uumuuf JavaScript tokkollee si hin barbaachisu. Haa ta'u malee, mul'achuu isaanii jijjiiruuf JaavaScript amala tokko tokko si barbaachisa. Bifti, halluu, fi safara isaanii salphaatti kutaalee faayidaa keenyaa wajjin haala barbaadamuun jijjiiruun ni danda’ama.

Fakkeenya

Fakkeenya armaan gadii keessatti, qaama kaardii idilee fudhannee “kaardii fe’uu” uumuuf bakka qabattoota hojiirra oolan waliin irra deebinee uumna. Guddinni fi pirooppoorshiniin lamaan isaanii gidduutti tokko.

Mata duree kaardii

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Bakka tokko dhaqi

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

Akkaataa itti hojjetu

.placeholderSaaguuf gitaa fi gita tarjaa tarjaa waliin iddooqa uumi (fkn, .col-6) width. Isaan barruu qaama keessa jiru bakka buusuu ykn akka gita fooyyessaa qaama jiruutti dabalamuu danda'u.

The is kabajamuu isaa mirkaneessuuf .btns via irratti styling dabalataa hojiirra oolchina . Akka barbaachisummaa isaatti haalawwan biroof shaakala kana dheeressuu dandeessa, ykn olka'iinsa calaqqisiisuuf qaama keessaa yeroo barruun qabatamaan bakka isaa agarsiifamu dabaluu dandeessa.::beforeheight 

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>

Fayyadamni aria-hidden="true"elementiin dubbistoota iskiriiniif dhokachuu akka qabu qofa agarsiisa. Amalli fe'iinsaa iddooqa akkaataa barreessitoonni qabatamaan akkaataa iddoowwan iddoo itti fayyadaman, akkaataa isaan wantoota haaromsuuf karoorfatan fi kkf irratti hundaa'a.Koodii JaavaScript tokko tokko haala iddoo iddoo jijjiiruu fi fayyadamtoota AT fooyya'iinsa beeksisuu barbaachisuu danda'a.

Bal'ina

widthGitoota tarjaa tarjaa keessaa, faayilii bal'ina, ykn akkaataa sarara keessaa jijjiiruu dandeessa .

html

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

Halluu

Akka durtiitti, placeholderfayyadama currentColor. Kunis halluu amala ykn gita faayidaatiin irra darbuu danda'a.

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>

Saayizii gochuu

Guddinni .placeholders akkaataa barreessuu qaama warraa irratti hundaa'a. Fooyyessitoota safaraatiin dhuunfachiisi: .placeholder-lg, .placeholder-sm, ykn .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>

Animeeshinii

Iddoowwan iddoowwanii wajjin sochoosuu .placeholder-glowykn hubannoo wanti tokko dammaqinaan fe'amuu .placeholder-waveisaa haala gaariin dabarsuudhaaf .

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass jedhama

Jijjiiramoota

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;