प्लेसहोल्डर

विषय में

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

उदाहरण

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

<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सम्मान कएल गेल अछि | आप जरूरत के अनुसार अन्य परिस्थिति के लेलऽ ई पैटर्न क॑ विस्तारित करी सकै छियै, या  तत्व के भीतर एक जोड़ सकै छियै ताकि ऊंचाई क॑ प्रतिबिंबित करलऽ जाय सक॑ जब॑ वास्तविक पाठ क॑ ओकरऽ जगह प॑ रेंडर करलऽ जाय छै ।

<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;