मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
in English

स्थानधारकाः

किमपि अद्यापि लोड् भवति इति सूचयितुं भवतः घटकानां पृष्ठानां वा कृते लोडिंग् प्लेसहोल्डर् इत्यस्य उपयोगं कुर्वन्तु ।

इस पृष्ठ पर

विषये

भवतः अनुप्रयोगस्य अनुभवं वर्धयितुं स्थानधारकाणां उपयोगः कर्तुं शक्यते । ते केवलं HTML तथा CSS इत्यनेन निर्मिताः सन्ति, अर्थात् तान् निर्मातुं भवद्भ्यः किमपि जावास्क्रिप्ट् इत्यस्य आवश्यकता नास्ति । तथापि तेषां दृश्यतां टोग्ल् कर्तुं भवद्भ्यः किञ्चित् कस्टम् जावास्क्रिप्ट् आवश्यकं भविष्यति । तेषां रूपं, वर्णं, आकारं च अस्माकं उपयोगितावर्गैः सह सुलभतया अनुकूलितुं शक्यते ।

उदाहरण

अधोलिखिते उदाहरणे वयं एकं विशिष्टं कार्डघटकं गृहीत्वा “loading card” निर्मातुं प्रयुक्तैः स्थानधारकैः सह पुनः निर्मामः । आकारः अनुपातश्च तयोः मध्ये समानः भवति ।

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यत् सुनिश्चितं करोति यत् the 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"पाठकानां कृते तत्त्वं गोपनीयम् इति सूचयति । स्थानधारकस्य लोडिंगव्यवहारः लेखकाः वास्तवतः स्थानधारकशैल्याः कथं उपयोगं करिष्यन्ति, ते कथं वस्तूनि अद्यतनीकर्तुं योजनां कुर्वन्ति इत्यादिषु निर्भरं भवति स्थानधारकस्य स्थितिं स्वैप् कर्तुं तथा च AT उपयोक्तृभ्यः अद्यतनस्य सूचनां दातुं केषाञ्चन जावास्क्रिप्ट् कोडस्य आवश्यकता भवितुम् अर्हति

विस्तार

भवान् widththrough grid column classes, width utilities, अथवा inline styles इत्येतत् परिवर्तयितुं शक्नोति ।

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