ସ୍ଥାନଧାରୀମାନେ |
ଆପଣଙ୍କର ଉପାଦାନ କିମ୍ବା ପୃଷ୍ଠାଗୁଡ଼ିକ ପାଇଁ ଲୋଡିଂ ସ୍ଥାନଧାରୀମାନଙ୍କୁ ବ୍ୟବହାର କରନ୍ତୁ ଯାହାକି କିଛି ଲୋଡିଂ ହୋଇପାରେ ବୋଲି ସୂଚାଇବା ପାଇଁ |
ବିଷୟରେ
ଆପଣଙ୍କ ଅନୁପ୍ରୟୋଗର ଅଭିଜ୍ଞତାକୁ ବ enhance ାଇବା ପାଇଁ ସ୍ଥାନଧାରୀମାନେ ବ୍ୟବହାର କରାଯାଇପାରିବ | ସେଗୁଡ଼ିକ କେବଳ HTML ଏବଂ CSS ସହିତ ନିର୍ମିତ, ଅର୍ଥାତ୍ ସେଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଆପଣଙ୍କୁ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟର ଆବଶ୍ୟକତା ନାହିଁ | ସେମାନଙ୍କର ଭିଜିବିଲିଟି ଟୋଗଲ୍ କରିବାକୁ ଆପଣ, ତଥାପି, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରିବେ | ଆମର ଉପଯୋଗିତା କ୍ଲାସ୍ ସହିତ ସେମାନଙ୍କର ରୂପ, ରଙ୍ଗ, ଏବଂ ଆକାର ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ |
ଉଦାହରଣ |
ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ ଏକ ସାଧାରଣ କାର୍ଡ ଉପାଦାନ ନେଇଥାଉ ଏବଂ ଏକ “ଲୋଡିଂ କାର୍ଡ” ସୃଷ୍ଟି କରିବାକୁ ପ୍ରୟୋଗ ହୋଇଥିବା ସ୍ଥାନଧାରୀମାନଙ୍କ ସହିତ ଏହାକୁ ପୁନ re ନିର୍ମାଣ କରୁ | ଆକାର ଏବଂ ଅନୁପାତ ଉଭୟ ମଧ୍ୟରେ ସମାନ |
କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
କ 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
| ସେମାନେ ଏକ ଉପାଦାନ ଭିତରେ ଥିବା ପାଠକୁ ବଦଳାଇ ପାରିବେ କିମ୍ବା ଏକ ବିଦ୍ୟମାନ ଉପାଦାନରେ ଏକ ମୋଡିଫାୟର୍ ଶ୍ରେଣୀ ଭାବରେ ଯୋଡିପାରିବେ |
ଆମେ ସମ୍ମାନିତ ହେବା ନିଶ୍ଚିତ କରିବାକୁ .btn
s ମାଧ୍ୟମରେ ଅତିରିକ୍ତ ଷ୍ଟାଇଲିଂ ପ୍ରୟୋଗ କରୁ | ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଅନ୍ୟ ପରିସ୍ଥିତି ପାଇଁ ଆପଣ ଏହି pattern ାଞ୍ଚାକୁ ବିସ୍ତାର କରିପାରିବେ, କିମ୍ବା ପ୍ରକୃତ ପାଠ୍ୟ ଏହାର ସ୍ଥାନରେ ଉପସ୍ଥାପିତ ହେଲେ ଉଚ୍ଚତାକୁ ପ୍ରତିଫଳିତ କରିବାକୁ ଉପାଦାନ ମଧ୍ୟରେ ଏକ ଯୋଗ କରିପାରିବେ |::before
height
<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;