پلیس ہولڈرز

کے بارے میں

پلیس ہولڈرز کو آپ کی درخواست کے تجربے کو بڑھانے کے لیے استعمال کیا جا سکتا ہے۔ وہ صرف HTML اور CSS کے ساتھ بنائے گئے ہیں، یعنی آپ کو انہیں بنانے کے لیے کسی JavaScript کی ضرورت نہیں ہے۔ تاہم، آپ کو ان کی مرئیت کو ٹوگل کرنے کے لیے کچھ حسب ضرورت جاوا اسکرپٹ کی ضرورت ہوگی۔ ان کی ظاہری شکل، رنگ اور سائز کو ہماری یوٹیلیٹی کلاسز کے ساتھ آسانی سے اپنی مرضی کے مطابق بنایا جا سکتا ہے۔

مثال

ذیل کی مثال میں، ہم ایک عام کارڈ کا جزو لیتے ہیں اور اسے "لوڈنگ کارڈ" بنانے کے لیے لگائے گئے پلیس ہولڈرز کے ساتھ دوبارہ بناتے ہیں۔ دونوں کے درمیان سائز اور تناسب یکساں ہیں۔

<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۔ وہ کسی عنصر کے اندر موجود متن کو تبدیل کر سکتے ہیں یا کسی موجودہ جزو میں ترمیمی کلاس کے طور پر شامل کر سکتے ہیں۔

ہم اس بات کو یقینی بنانے کے لیے .btns via پر اضافی اسٹائل لگاتے ہیں کہ اس کا احترام کیا جائے۔ آپ ضرورت کے مطابق دیگر حالات کے لیے اس پیٹرن کو بڑھا سکتے ہیں، یا جب اصل متن کو اس کی جگہ پر پیش کیا جاتا ہے تو اونچائی کو ظاہر کرنے کے لیے عنصر کے اندر ایک عنصر شامل کر سکتے ہیں۔::beforeheight 

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

سائز کرنا

s کا سائز .placeholderبنیادی عنصر کے ٹائپوگرافک انداز پر مبنی ہے۔ ان کو سائزنگ موڈیفائر کے ساتھ حسب ضرورت بنائیں: .placeholder-lg, .placeholder-sm, or .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;