Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Di wan dɛn we de kip di ples

Yuz pleshɔlda dɛn fɔ lod fɔ yu kɔmpɔnɛnt ɔ pej dɛn fɔ sho se sɔntin kin stil de lod.

Na dis pej

Bɔt

Yu kin yuz ples dɛn fɔ mek yu aplikeshɔn gɛt mɔ ɛkspiriɛns. Na HTML ɛn CSS nɔmɔ dɛn bil dɛn, we min se yu nɔ nid ɛni JavaSkript fɔ mek dɛn. Bɔt yu go nid sɔm kɔstɔm JavaSkript fɔ chenj di we aw dɛn de si dɛn. Dɛn kin luk, kɔlɔ, ɛn sayz kin izi fɔ kɔstɔmayt wit wi yutiliti klas dɛn.

Ɛgzampul

Insay di ɛgzampul we de dɔŋ ya, wi tek wan tipik kad kɔmpɔnɛnt ɛn mek am bak wit pleshɔlda dɛn we dɛn aplay fɔ mek wan “lod kad”. Sayz ɛn di prɔpɔshɔn na di sem bitwin dɛn tu.

Placeholder
Taytul fɔ di kad

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Go sɔmsay 
<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>

Aw i de wok

Krio pleshɔlda wit di .placeholderklas ɛn wan grid kɔlɔm klas (ɛgz., .col-6) fɔ sɛt di width. Dɛn kin riples di tɛks insay wan ɛlimɛnt ɔ dɛn kin ad dɛn as modifya klas to wan kɔmpɔnɛnt we dɔn de.

Wi de aplay adishɔnal stayl to .btns via ::beforefɔ mek shɔ se heightdɛn rɛspɛkt di. Yu kin ɛkstɛnd dis patɛn fɔ ɔda sityueshɔn dɛn as nid de, ɔ ad wan &nbsp;insay di ɛlimɛnt fɔ sho di ayt we dɛn rɛnd di aktual tɛks insay in ples.

<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>
Di yus fɔ aria-hidden="true"jɔs de sho se di ɛlimɛnt fɔ ayd to di wan dɛn we de rid di skrin. Di lod bihayvya fɔ di pleshɔlda dipen pan aw di wan dɛn we rayt go rili yuz di pleshɔlda stayl dɛn, aw dɛn plan fɔ ɔpdet tin dɛn, ɛn ɔda tin dɛn Sɔm JavaSkript kɔd kin nid fɔ swap di stet fɔ di pleshɔlda ɛn tɛl AT yuza dɛn bɔt di ɔpdet.

Wayd

Yu kin chenj di widthtru grid kɔlɔm klas dɛn, wit yutiliti dɛn, ɔ inlayn stayl dɛn.

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

Kɔlɔ

Bay difɔlt, di placeholderyuz currentColordɛn . Dis kin ɔvalayz wit kɔstɔm kɔlɔ ɔ yutiliti klas.

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

Sayz fɔ di sayz

Di sayz fɔ .placeholders de bays pan di taypografik stayl fɔ di mama ɛn papa ɛlimɛnt. Kastamayz dɛn wit sayzin modifya dɛn: .placeholder-lg, .placeholder-sm, ɔ .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>

Animɛshɔn we dɛn mek

Animate plesholda wit .placeholder-glowɔ .placeholder-wavefɔ bɛtɛ kɔnvɛy di persepshɔn fɔ sɔntin we dɛn de aktiv wan lod.

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

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

Sass we bin de

Di tin dɛn we kin chenj

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