ځای ناستي

په اړه

ځای لرونکي ستاسو د غوښتنلیک تجربې ته وده ورکولو لپاره کارول کیدی شي. دوی یوازې د HTML او CSS سره جوړ شوي، پدې معنی چې تاسو د دوی جوړولو لپاره هیڅ جاوا سکریپټ ته اړتیا نلرئ. تاسو به په هرصورت، ځینې دودیز جاواسکریپټ ته اړتیا ولرئ ترڅو د دوی لید بدل کړي. د دوی بڼه، رنګ او اندازه کول په اسانۍ سره زموږ د کارونې ټولګیو سره دودیز کیدی شي.

بېلګه

په لاندې مثال کې، موږ د کارت یوه عادي برخه اخلو او د "لوډ کولو کارت" جوړولو لپاره پلي شوي ځای لرونکي سره یې بیا جوړوو. اندازه او تناسب د دواړو ترمنځ یو شان دي.

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

څنګه کار کوي

.placeholderد ټولګي او د ګریډ کالم ټولګي (د مثال په توګه .col-6) سره ځای لرونکي جوړ کړئ ترڅو د تنظیم کولو لپاره width. دوی کولی شي متن د عنصر دننه ځای په ځای کړي یا موجوده برخې ته د ترمیم کونکي ټولګي په توګه اضافه شي.

.btnموږ د s له لارې اضافي سټایل پلي کوو ::beforeترڅو ډاډ ترلاسه شي چې heightدرناوی کیږي. تاسو کولی شئ دا نمونه د اړتیا په صورت کې د نورو حالتونو لپاره پراخه کړئ، یا  د عنصر دننه یو اضافه کړئ ترڅو لوړوالی منعکس کړي کله چې حقیقي متن په خپل ځای کې وړاندې کیږي.

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

عرض

تاسو کولی شئ widthد ګریډ کالم ټولګیو له لارې بدل کړئ، د عرضې اسانتیاوې، یا انلاین سټایلونه.

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

رنګ

د ډیفالټ په واسطه، placeholderکارول currentColor. دا د دودیز رنګ یا د کارونې ټولګي سره تکرار کیدی شي.

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

اندازه کول

د .placeholders اندازه د اصلي عنصر د ټایپوګرافیک سټایل پراساس ده. دوی د اندازه کولو ترمیم کونکو سره تنظیم کړئ: .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>

حرکت

د ځای لرونکي سره متحرک کړئ .placeholder-glowیا د یو څه په فعاله توګه بار شوي .placeholder-waveاحساس په ښه توګه څرګند کړئ.

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

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

ساس

متغیرات

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