मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

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

कितेंय अजूनय लोड जावंक शकता तें दाखोवपाक तुमच्या घटकांखातीर वा पानांक लोड करपाचे प्लेसहोल्डर वापरात.

ह्या पानाचेर

संबंदीं

तुमच्या ऍप्लिकेशनाचो अणभव वाडोवपाक प्लेसहोल्डर वापरूं येता. ते फकत HTML आनी CSS च्या आदारान तयार केल्यात, म्हळ्यार त्यो तयार करपाक तुमकां कसलीच जावास्क्रिप्ट जायना. तुमकां, मात, तांची दृश्यताय टॉगल करपाक कांय सानुकूल जावास्क्रिप्ट जाय पडटली. तांचें रूप, रंग, आनी आकार आमच्या उपयुक्तताय वर्गां वरवीं सहजतायेन अनुकूल करूं येता.

उदारण

सकयल दिल्ल्या उदाहरणांत, आमी एक खाशेलो कार्ड घटक घेतात आनी “लोडिंग कार्ड” तयार करपाक लागू केल्ल्या प्लेसहोल्डरां सयत तो परतून तयार करतात. आकार आनी प्रमाण दोगांयमदीं एकूच आसता.

Placeholder
कार्डाचें शीर्षक

कार्डाच्या शीर्षकाचेर उबारपाक आनी कार्डाच्या सामुग्रीचो व्हडलो वांटो तयार करपाक कांय बेगीन उदाहरण मजकूर.

खंय तरी जा 
<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तुमी गरज पडल्यार हेर परिस्थितीं खातीर हो नमुनो वाडोवंक शकतात, वा &nbsp;ताचे सुवातेर प्रत्यक्ष मजकूर रेंडर करतना उंचाय प्रतिबिंबीत करपाक घटका भितर एक जोडूंक शकतात.

<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>
चो वापर aria-hidden="true"फकत घटक स्क्रीन रीडरांक लिपोवन दवरपाक जाय अशें दाखयता. प्लेसहोल्डराची लोडिंग वर्तन लेखक प्रत्यक्षांत प्लेसहोल्डर शैली कशी वापरतले, ते गजाली कशी अद्ययावत करपाची येवजण करतात, आदीचेर आदारीत आसता.प्लेसहोल्डराची स्थिती स्वॅप करपाक आनी एटी वापरप्यांक अद्ययावताची म्हायती दिवपाक कांय जावास्क्रिप्ट कोडाची गरज आसूं येता .

रुंदी

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;