ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
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। ਉਹ ਕਿਸੇ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਨ ਜਾਂ ਮੌਜੂਦਾ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਇੱਕ ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਦੇ ਰੂਪ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹਨ।

ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ .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;