Awọn oniduro

Nipa

Awọn oniduro le ṣee lo lati mu iriri ohun elo rẹ pọ si. Wọn ṣe pẹlu HTML ati CSS nikan, afipamo pe o ko nilo JavaScript eyikeyi lati ṣẹda wọn. Iwọ yoo, sibẹsibẹ, nilo diẹ ninu JavaScript aṣa lati yi hihan wọn pada. Irisi wọn, awọ, ati iwọn le jẹ adani ni irọrun pẹlu awọn kilasi ohun elo wa.

Apeere

Ninu apẹẹrẹ ti o wa ni isalẹ, a mu paati kaadi aṣoju kan ki o tun ṣe pẹlu awọn aye ti a lo lati ṣẹda “kaadi ikojọpọ”. Iwọn ati awọn iwọn jẹ kanna laarin awọn meji.

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

Bawo ni o ṣe n ṣiṣẹ

Ṣẹda awọn oniduro pẹlu .placeholderkilasi ati kilasi iwe akoj (fun apẹẹrẹ, .col-6) lati ṣeto width. Wọn le rọpo ọrọ inu ohun kan tabi ṣafikun bi kilasi iyipada si paati ti o wa tẹlẹ.

A lo afikun iselona si .btns nipasẹ ::beforelati rii daju pe heighta bọwọ fun. O le faagun apẹẹrẹ yii fun awọn ipo miiran bi o ṣe nilo, tabi ṣafikun kan  laarin ipin lati ṣe afihan giga nigbati ọrọ gangan ba wa ni ipo rẹ.

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

Ìbú

O le yipada widthnipasẹ awọn kilasi iwe akoj, awọn ohun elo iwọn, tabi awọn aza laini.

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

Àwọ̀

Nipa aiyipada, awọn placeholderlilo currentColor. Eyi le bori pẹlu awọ aṣa tabi kilasi ohun elo.

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

Titobi

Awọn iwọn ti .placeholders wa ni orisun lori awọn typographic ara ti awọn obi ano. Ṣe akanṣe wọn pẹlu awọn iyipada iwọn: .placeholder-lg, .placeholder-sm, tabi .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>

Idaraya

Animate placeholders pẹlu .placeholder-glowtabi .placeholder-wavelati mu dara awọn Iro ti nkankan ti wa ni ti kojọpọ.

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

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

Sass

Awọn oniyipada

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