ቦታ ያዢዎች

የሆነ ነገር አሁንም እየተጫነ መሆኑን ለማመልከት ለእርስዎ ክፍሎች ወይም ገጾች የመጫኛ ቦታ ያዥዎችን ይጠቀሙ።

በዚህ ገጽ ላይ

ስለ

የቦታ ያዥዎች የማመልከቻዎን ልምድ ለማሻሻል ጥቅም ላይ ሊውሉ ይችላሉ። እነሱ የተገነቡት በኤችቲኤምኤል እና በሲኤስኤስ ብቻ ነው፣ ይህ ማለት እነሱን ለመፍጠር ምንም ጃቫ ስክሪፕት አያስፈልገዎትም። ታይነታቸውን ለመቀየር ግን አንዳንድ ብጁ ጃቫ ስክሪፕት ያስፈልግዎታል። መልካቸው፣ ቀለማቸው እና መጠናቸው ከአገልግሎት ክፍሎቻችን ጋር በቀላሉ ሊበጁ ይችላሉ።

ለምሳሌ

ከዚህ በታች ባለው ምሳሌ ውስጥ አንድ የተለመደ የካርድ አካል እንወስዳለን እና "የመጫኛ ካርድ" ለመፍጠር ከተተገበሩ ቦታ ያዢዎች ጋር እንፈጥራለን. መጠን እና መጠን በሁለቱ መካከል አንድ ናቸው.

የካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

የሆነ ቦታ ሂድ

<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 

html

<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 ተጠቃሚዎችን ዝመናውን ለማሳወቅ አንዳንድ የጃቫ ስክሪፕት ኮድ ሊያስፈልግ ይችላል።

ስፋት

widthበፍርግርግ አምድ ክፍሎችን፣ ስፋት መገልገያዎችን ወይም የመስመር ውስጥ ቅጦችን መቀየር ይችላሉ ።

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

ቀለም

በነባሪ ፣ placeholderአጠቃቀሞች currentColor። ይህ በብጁ ቀለም ወይም የፍጆታ ክፍል ሊሻር ይችላል።

html

<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>

መጠናቸው

የ .placeholders መጠን በወላጅ ኤለመንት የአጻጻፍ ስልት ላይ የተመሰረተ ነው. በመጠን ማስተካከያዎች ያብጁአቸው .placeholder-lg፡፣፣ .placeholder-smወይም .placeholder-xs።

html

<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በተሻለ ሁኔታ ለማስተላለፍ ።

html

<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;