Teƒeɖoɖowo

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

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

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;