ቦታ ያዢዎች
የሆነ ነገር አሁንም እየተጫነ መሆኑን ለማመልከት ለእርስዎ ክፍሎች ወይም ገጾች የመጫኛ ቦታ ያዥዎችን ይጠቀሙ።
ስለ
የቦታ ያዥዎች የማመልከቻዎን ልምድ ለማሻሻል ጥቅም ላይ ሊውሉ ይችላሉ። እነሱ የተገነቡት በኤችቲኤምኤል እና በሲኤስኤስ ብቻ ነው፣ ይህ ማለት እነሱን ለመፍጠር ምንም ጃቫ ስክሪፕት አያስፈልገዎትም። ታይነታቸውን ለመቀየር ግን አንዳንድ ብጁ ጃቫ ስክሪፕት ያስፈልግዎታል። መልካቸው፣ ቀለማቸው እና መጠናቸው ከአገልግሎት ክፍሎቻችን ጋር በቀላሉ ሊበጁ ይችላሉ።
ለምሳሌ
ከዚህ በታች ባለው ምሳሌ ውስጥ አንድ የተለመደ የካርድ አካል እንወስዳለን እና "የመጫኛ ካርድ" ለመፍጠር ከተተገበሩ ቦታ ያዢዎች ጋር እንፈጥራለን. መጠን እና መጠን በሁለቱ መካከል አንድ ናቸው.
<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 በኩል እንተገብራለን። ይህንን ስርዓተ-ጥለት ለሌሎች ሁኔታዎች እንደ አስፈላጊነቱ ማራዘም ይችላሉ፣ ወይም ትክክለኛው ጽሑፍ በቦታው ሲገለበጥ ቁመቱን ለማንፀባረቅ በኤለመንት ውስጥ ማከል ይችላሉ።::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"
ኤለመንቱ ለስክሪን አንባቢዎች መደበቅ እንዳለበት ብቻ ያመለክታል። የቦታ
ያዥው የመጫን ባህሪ የሚወሰነው ደራሲያን የቦታ ያዥ ቅጦችን እንዴት እንደሚጠቀሙ፣ ነገሮችን እንዴት ለማዘመን እንዳቀዱ፣ ወዘተ
ላይ ነው። የቦታ ያዥውን ሁኔታ ለመለዋወጥ እና የ AT ተጠቃሚዎችን ዝመናውን ለማሳወቅ አንዳንድ የጃቫ ስክሪፕት ኮድ ሊያስፈልግ ይችላል።
ስፋት
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>
መጠናቸው
የ .placeholder
s መጠን በወላጅ ኤለመንት የአጻጻፍ ስልት ላይ የተመሰረተ ነው. በመጠን ማስተካከያዎች ያብጁአቸው .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;