प्लेसहोल्डर हें नांव

संबंदीं

तुमच्या ऍप्लिकेशनाचो अणभव वाडोवपाक प्लेसहोल्डर वापरूं येता. ते फकत 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 via कडेन अतिरिक्त स्टायलिंग लागू करतात ताका आदर ::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, वा .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;