Yɔrɔw yɔrɔw

Baara kɛ ni doni yɔrɔw ye i ka yɔrɔw walima ɲɛw kama walasa k’a jira ko fɛn dɔ bɛ se ka doni hali bi.

Nin ɲɛ in kan

Kan

Baara bɛ se ka kɛ ni yɔrɔw ye walasa ka i ka application (application) kɛcogo ɲɛ. U bɛ jɔ ni HTML ni CSS dɔrɔn de ye, o kɔrɔ ye ko i mago tɛ JavaScript si la walasa k’u Dabɔ. Nka, i mago bɛna kɛ JavaScript ladamu dɔw la walasa k’u yecogo caman sɛmɛntiya. U cogoya, u kulɛri ani u bonya bɛ se ka ladilan nɔgɔya la ni an ka nafamafɛnw kalanw ye.

Misaliya

Misali min bɛ duguma, an bɛ karti yɔrɔ danma dɔ ta k’a dabɔ kokura ni yɔrɔw ye minnu bɛ kɛ ka “karte doni” dɔ dilan. Bonya ni hakɛw ye kelen ye u fla ni ɲɔgɔn cɛ.

Karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Taga yɔrɔ dɔ la

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

A bɛ baara kɛ cogo min na

Yɔrɔw dabɔ ni .placeholderkalasi ni jatebɔlan kalasi ye (misali la, .col-6) walasa ka width. U bɛ Se ka sɛbɛnni in Blà fɛn dɔ 'kɔnɔ walima ka Fàra fɛn dɔ kan min bɛ 'yɔrɔ la min bɛ yen.

An bɛ styling wɛrɛw kɛ .btns via ::beforekan walasa ka a jira ko a heightbɛ bonya. I bɛ se ka nin misali in janya ko wɛrɛw kama i n’a fɔ a mago bɛ cogo min na, walima ka dɔ fara a kan fɛn  kɔnɔ walasa ka janya jira ni sɛbɛn lakika bɛ jira a nɔ na.

html ye

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

Baara kɛli aria-hidden="true"dɔrɔn de b’a jira ko fɛn in ka kan ka dogo ɛkran kalanbagaw ɲɛ. Yɔrɔ in doni kɛcogo bɛ Bɔ sɛbɛnnikɛlaw bɛna baara Kɛ ni yɔrɔw cogoyaw ye tiɲɛ na cogo min na, u bɛ fɛnw Labɛn cogo min na, a ɲɔgɔnnaw JavaScript kode dɔw bɛ Se ka Kɛ wajibi ye walasa ka yɔrɔ in cogoya ɲɔgɔn falen -falen ani ka AT baarakɛlaw Ladɔnniya kurayali la.

Jayan

Aw bɛ se ka widththrough grid column classes, width utilities, walima inline styles caman Changer.

html ye

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

Ɲɛ

Ka da a kan, a placeholderbɛ baara kɛ ni currentColor. O bɛ se ka wuli ka bɔ a nɔ na ni ladamu kulɛri walima nafama kalasi ye.

html ye

<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 (Sizing) kɛ

S bonya .placeholderbɛ Dabɔ bangebaga-yɔrɔ ka sɛbɛnnikɛcogo kan. Aw bɛ u kɛ ka kɛɲɛ ni u bonya ye: .placeholder-lg, .placeholder-sm, walima .placeholder-xs.

html ye

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

Animasiyɔn

Yɔrɔw ɲɛnamaya ni .placeholder-glowwalima .placeholder-wavewalasa ka fɛn dɔ faamuyali jira ka ɲɛ min bɛ doni kɛ ni timinandiya ye.

html ye

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

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

Sass ye

Yɛlɛma-yɛlɛmaw

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