Teƒeɖoɖowo

Zã teƒeɖoɖowo na wò akpawo alo axawo tsɔ fia be ɖewohĩ nane gakpɔtɔ le agba me.

Le axa sia dzi

Ku ɖe

Woate ŋu azã teƒeɖoɖowo atsɔ ana wò dɔbiagbalẽvia ƒe nuteƒekpɔkpɔ nanyo ɖe edzi. HTML kple CSS koe wotsɔ tu wo, si fia be mèhiã JavaScript aɖeke hafi awɔ wo o. Gake àhiã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu be nàte ŋu atrɔ woƒe nukpɔkpɔ. Woate ŋu atrɔ asi le woƒe dzedzeme, amadede, kple lolome ŋu bɔbɔe kple míaƒe dɔwɔnu ƒe klasswo.

Kpɔɖeŋu

Le kpɔɖeŋu si le ete me la, míexɔa kaɖi ƒe akpa aɖe si bɔ eye míegbugbɔa ewɔna kple teƒeɖoɖo siwo wozã tsɔ wɔ “agbatsɔgbalẽvi”. Agbɔsɔsɔme kple agbɔsɔsɔme si sɔ le wo ame evea dome la sɔ.

Kpekpeɖeŋugbalẽvi ƒe tanya

Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.

Yi afi aɖe

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

Ale si wòwɔa dɔe

Wɔ teƒeɖoɖowo kple .placeholderklass la kple grid column class (le kpɔɖeŋu me, .col-6) be nàɖo width. Woateŋu aɖɔli nuŋɔŋlɔ si le element aɖe me alo atsɔ wo akpe ɖe akpa aɖe si li xoxo ŋu abe tɔtrɔ ƒe hatsotso ene.

Míewɔa atsyã bubuwo ŋudɔ ɖe .btns via dzi ::beforebe míakpɔ egbɔ be heightwode bubu eŋu. Àteŋu akeke kpɔɖeŋu sia ɖe enu na nɔnɔme bubuwo ne ehiã, alo atsɔ a akpe  ɖe element la me be wòaɖe kɔkɔme afia ne woɖe nuŋɔŋlɔ ŋutɔŋutɔ ɖe eteƒe.

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

Ðeko zazã aria-hidden="true"fia be ele be woaɣla element la ɖe screen readers. Teƒea ƒe agbatsɔtsɔ ƒe nuwɔna nɔ te ɖe alesi agbalẽŋlɔlawo azã teƒea ƒe atsyãwo ŋutɔŋutɔ, alesi woɖoe be yewoawɔ nuwo yeyee, kple bubuawo dzi.JavaScript ƒe kɔda aɖewo ateŋu ahiã be woatsɔ aɖɔli teƒea ƒe nɔnɔme eye woana AT zãlawo nanya ɖɔɖɔɖoa.

Kekeme

Àteŋu atrɔ widththrough grid column classes, width utilities, alo inline styles.

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

Amadede

Le gɔmedzedzea me la, placeholderwozãa currentColor. Woateŋu atsɔ amadede alo dɔwɔnu ƒe hatsotso si wowɔ ɖe ɖoɖo nu axe mɔ ɖe esia nu.

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

Sizing ƒe lolome

Wotu s ƒe lolome .placeholderɖe dzila ƒe akpaa ƒe nuŋɔŋlɔ ƒe atsyã dzi. Trɔ asi le wo ŋu kple lolome tɔtrɔwo: .placeholder-lg, .placeholder-sm, alo .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>

Animatsilawo ƒe nɔnɔmetatawo

Na teƒeɖoɖowo na agbe kple .placeholder-glowalo .placeholder-wavebe nàɖe nukpɔsusu si nye be wole nane tsɔm vevie la afia nyuie wu .

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

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

Sass ƒe nyawo

Nusiwo trɔna

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