ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ସ୍ଥାନଧାରୀମାନେ |

ଆପଣଙ୍କର ଉପାଦାନ କିମ୍ବା ପୃଷ୍ଠାଗୁଡ଼ିକ ପାଇଁ ଲୋଡିଂ ସ୍ଥାନଧାରୀମାନଙ୍କୁ ବ୍ୟବହାର କରନ୍ତୁ ଯାହାକି କିଛି ଲୋଡିଂ ହୋଇପାରେ ବୋଲି ସୂଚାଇବା ପାଇଁ |

ବିଷୟରେ

ଆପଣଙ୍କ ଅନୁପ୍ରୟୋଗର ଅଭିଜ୍ଞତାକୁ ବ enhance ାଇବା ପାଇଁ ସ୍ଥାନଧାରୀମାନେ ବ୍ୟବହାର କରାଯାଇପାରିବ | ସେଗୁଡ଼ିକ କେବଳ HTML ଏବଂ CSS ସହିତ ନିର୍ମିତ, ଅର୍ଥାତ୍ ସେଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଆପଣଙ୍କୁ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟର ଆବଶ୍ୟକତା ନାହିଁ | ସେମାନଙ୍କର ଭିଜିବିଲିଟି ଟୋଗଲ୍ କରିବାକୁ ଆପଣ, ତଥାପି, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରିବେ | ଆମର ଉପଯୋଗିତା କ୍ଲାସ୍ ସହିତ ସେମାନଙ୍କର ରୂପ, ରଙ୍ଗ, ଏବଂ ଆକାର ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ |

ଉଦାହରଣ |

ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ ଏକ ସାଧାରଣ କାର୍ଡ ଉପାଦାନ ନେଇଥାଉ ଏବଂ ଏକ “ଲୋଡିଂ କାର୍ଡ” ସୃଷ୍ଟି କରିବାକୁ ପ୍ରୟୋଗ ହୋଇଥିବା ସ୍ଥାନଧାରୀମାନଙ୍କ ସହିତ ଏହାକୁ ପୁନ re ନିର୍ମାଣ କରୁ | ଆକାର ଏବଂ ଅନୁପାତ ଉଭୟ ମଧ୍ୟରେ ସମାନ |

Placeholder
କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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 ମାଧ୍ୟମରେ ଅତିରିକ୍ତ ଷ୍ଟାଇଲିଂ ପ୍ରୟୋଗ କରୁ | ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଅନ୍ୟ ପରିସ୍ଥିତି ପାଇଁ ଆପଣ ଏହି pattern ାଞ୍ଚାକୁ ବିସ୍ତାର କରିପାରିବେ, କିମ୍ବା ପ୍ରକୃତ ପାଠ୍ୟ ଏହାର ସ୍ଥାନରେ ଉପସ୍ଥାପିତ ହେଲେ ଉଚ୍ଚତାକୁ ପ୍ରତିଫଳିତ କରିବାକୁ ଉପାଦାନ ମଧ୍ୟରେ ଏକ ଯୋଗ କରିପାରିବେ |::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"ସୂଚାଇଥାଏ ଯେ ଉପାଦାନଟି ସ୍କ୍ରିନ୍ ପାଠକମାନଙ୍କ ପାଇଁ ଲୁକ୍କାୟିତ ହେବା ଉଚିତ | ପ୍ଲେସହୋଲ୍ଡରର ଲୋଡିଂ ଆଚରଣ ନିର୍ଭର କରେ ଯେ ଲେଖକମାନେ ପ୍ରକୃତରେ ପ୍ଲେସହୋଲ୍ଡର yles ଳୀଗୁଡିକ କିପରି ବ୍ୟବହାର କରିବେ, ସେମାନେ କିପରି ଜିନିଷଗୁଡିକ ଅପଡେଟ୍ କରିବାକୁ ଯୋଜନା କରିବେ, ଇତ୍ୟାଦି ଉପରେ ନିର୍ଭର କରେ |

ମୋଟେଇ

ଆପଣ widthଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଶ୍ରେଣୀ, ମୋଟେଇ ଉପଯୋଗୀତା, କିମ୍ବା ଇନଲାଇନ ଶ yles ଳୀ ମାଧ୍ୟମରେ ପରିବର୍ତ୍ତନ କରିପାରିବେ |

<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ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ଟାଇପୋଗ୍ରାଫିକ୍ ଶ style ଳୀ ଉପରେ ଆଧାରିତ | ସାଇଜ୍ ମୋଡିଫାୟର୍ ସହିତ ସେମାନଙ୍କୁ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ: .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;