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

प्लेसहोल्डर

अपनऽ घटक या पन्ना लेली लोडिंग प्लेसहोल्डर के उपयोग करऽ ई दर्शाबै लेली कि कुछ अभी भी लोड होय रहलऽ होय सकै छै.

इस पेज पर

विषय में

प्लेसहोल्डर कें उपयोग अहां कें आवेदन कें अनुभव कें बढ़ावा कें लेल कैल जा सकय छै. ई सब केवल एचटीएमएल आरू सीएसएस स॑ बनलऽ छै, मतलब कि एकरा बनाबै लेली आपने क॑ कोनो जावास्क्रिप्ट के जरूरत नै छै । तथापि, हुनकर दृश्यता केँ टॉगल करबाक लेल अहाँ केँ किछु कस्टम जावास्क्रिप्ट केर आवश्यकता होयत. हुनकऽ रूप, रंग, आरू आकार क॑ हमरऽ उपयोगिता वर्गऽ के साथ आसानी स॑ अनुकूलित करलऽ जाब॑ सकै छै ।

उदाहरण

नीचा देल गेल उदाहरण मे, हम एकटा विशिष्ट कार्ड घटक कें लैत छी आ ओकरा “लोडिंग कार्ड” बनावा कें लेल लागू प्लेसहोल्डर कें साथ पुनः बनायत छै. आकार आ अनुपात दुनूक बीच एके रंग अछि ।

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हम एस वाया पर अतिरिक्त स्टाइलिंग लागू करैत छी ::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;