ਸਥਾਨਧਾਰਕ

ਬਾਰੇ

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

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