प्लेसहोल्डर

बद्दल

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

उदाहरण

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

<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 

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