Ndị na-edebe ebe

Jiri ihe eji ebu ihe maka akụrụngwa ma ọ bụ ibe gị iji gosi na ihe nwere ike ka na-ebu.

Na ibe a

Ihe gbasara

Enwere ike iji ndị na-edebe ebe kwalite ahụmịhe nke ngwa gị. Ejiri HTML na CSS rụọ ha, nke pụtara na ịchọghị Javascript ọ bụla iji mepụta ha. Otú ọ dị, ị ga-achọ ụfọdụ Javascript omenala iji gbanwee visibiliti ha. Enwere ike ịhazi ọdịdị ha, agba, na nha ha n'ụzọ dị mfe site na klaasị ike anyị.

Ọmụmaatụ

N'ihe atụ dị n'okpuru ebe a, anyị na-ewere akụkụ kaadị a na-ahụkarị ma megharịa ya na ndị na-edebe ebe etinyere iji mepụta "kaadị ntinye". Nha na oke bụ otu n'etiti ha abụọ.

Aha kaadị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Gaa ebe

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

Ka o si arụ ọrụ

Mepụta ndị na-edobe ebe nwere .placeholderklaasị yana klaasị kọlụm grid (dịka ọmụmaatụ, .col-6) ka ịtọọ width. Ha nwere ike dochie ederede n'ime ihe mmewere ma ọ bụ tinye ha ka klaasị mgbanwe na mpaghara dị adị.

Anyị na-etinye styling ọzọ na .btns via ::beforeiji hụ na a na height-akwanyere ya ùgwù. Ị nwere ike ịgbatị ụkpụrụ a maka ọnọdụ ndị ọzọ dị mkpa, ma ọ bụ tinye ihe  n'ime mmewere iji gosipụta ịdị elu mgbe edere ederede n'ezie n'ọnọdụ ya.

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

Ojiji nke aria-hidden="true"naanị na-egosi na mmewere kwesịrị zoo na ndị na-agụ ihuenyo. Omume nbudata nke onye na-edebe ebe na-adabere n'otú ndị na-ede akwụkwọ ga-esi jiri ụdị ebe nchekwa, ka ha na-eme atụmatụ imelite ihe, wdg. Ụfọdụ koodu Javascript nwere ike ịdị mkpa iji gbanwee ọnọdụ nke onye na-edebe ebe ma gwa ndị ọrụ AT mmelite ahụ.

Obosara

Ị nwere ike ịgbanwe widthsite na klaasị kọlụm grid, akụrụngwa obosara ma ọ bụ ụdị ahịrị.

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

Agba

Site na ndabara, placeholderojiji currentColor. Enwere ike iji ụcha omenala ma ọ bụ klaasị uru kpuchie nke a.

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

Nha nha

Ogo nke .placeholders dabere na ụdị edemede nke mmewere nne na nna. Hazie ha site na iji mgbanwe nha nha: .placeholder-lg, .placeholder-sm, ma ọ bụ .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>

Anụmanụ

Jiri .placeholder-glowma ọ bụ .placeholder-wavemee ka ndị na-edobe ebe na-ewepụta echiche nke ihe na- arụsi ọrụ ike .

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

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

Sass

Mgbanwe

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