ස්ථාන දරන්නන්

ගැන

ඔබගේ යෙදුමේ අත්දැකීම වැඩිදියුණු කිරීමට ස්ථාන දරන්නන් භාවිතා කළ හැක. ඒවා ගොඩනගා ඇත්තේ 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. ඒවාට මූලද්‍රව්‍යයක් තුළ ඇති පෙළ ප්‍රතිස්ථාපනය කිරීමට හෝ පවතින සංරචකයකට විකරණය කිරීමේ පන්තියක් ලෙස එක් කිරීමට හැකිය.

ගෞරවාන්විත බව සහතික කිරීම සඳහා .btnඅපි අමතර මෝස්තර යොදන්නෙමු. ඔබට අවශ්‍ය පරිදි වෙනත් තත්වයන් සඳහා මෙම රටාව දිගු කළ හැකිය, නැතහොත් සත්‍ය පෙළ එහි ස්ථානයේ විදැහුම් කරන විට උස පිළිබිඹු කිරීමට මූලද්‍රව්‍යය තුළට එක් කරන්න.::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;