मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
in English

प्लेसहोल्डर

तुमच्या घटकांसाठी किंवा पेजसाठी लोडिंग प्लेसहोल्डर वापरा हे सूचित करण्यासाठी की काहीतरी अजूनही लोड होत आहे.

या पृष्ठावर

बद्दल

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

उदाहरण

खालील उदाहरणामध्ये, आम्ही एक सामान्य कार्ड घटक घेतो आणि "लोडिंग कार्ड" तयार करण्यासाठी लागू केलेल्या प्लेसहोल्डरसह ते पुन्हा तयार करतो. दोन्हीमध्ये आकार आणि प्रमाण समान आहेत.

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. ते घटकातील मजकूर बदलू शकतात किंवा विद्यमान घटकामध्ये सुधारक वर्ग म्हणून जोडले जाऊ शकतात.

s चा आदर केला जातो याची खात्री करण्यासाठी आम्ही .btns द्वारे अतिरिक्त शैली लागू करतो . तुम्ही आवश्यकतेनुसार इतर परिस्थितींसाठी हा नमुना वाढवू शकता किंवा जेव्हा वास्तविक मजकूर त्याच्या जागी रेंडर केला जातो तेव्हा उंची प्रतिबिंबित करण्यासाठी घटकामध्ये एक जोडू शकता.::beforeheight&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"सूचित करते की घटक स्क्रीन वाचकांसाठी लपविला पाहिजे. प्लेसहोल्डरचे लोडिंग वर्तन लेखक खरोखर प्लेसहोल्डर शैली कशा वापरतील, ते गोष्टी कशा अद्ययावत करण्याची योजना आखतात, इत्यादींवर अवलंबून असते. प्लेसहोल्डरची स्थिती बदलण्यासाठी आणि AT वापरकर्त्यांना अद्यतनाची माहिती देण्यासाठी काही JavaScript कोडची आवश्यकता असू शकते .

रुंदी

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;