جڳهه رکندڙ

بابت

جڳھ ھولڊر استعمال ڪري سگھجن ٿا توھان جي ايپليڪيشن جي تجربي کي وڌائڻ لاءِ. اهي صرف 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>

ماپڻ

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;