ځای ناستي
د خپلو برخو یا مخونو لپاره د بارولو ځای لرونکي وکاروئ ترڅو دا وښیې چې یو څه ممکن لاهم بار وي.
په اړه
ځای لرونکي ستاسو د غوښتنلیک تجربې ته وده ورکولو لپاره کارول کیدی شي. دوی یوازې د HTML او CSS سره جوړ شوي ، پدې معنی چې تاسو د دوی جوړولو لپاره هیڅ جاوا سکریپټ ته اړتیا نلرئ. تاسو به، په هرصورت، ځینې دودیز جاواسکریپټ ته اړتیا ولرئ ترڅو د دوی لید بدل کړي. د دوی بڼه، رنګ، او اندازه کول په اسانۍ سره زموږ د کارونې ټولګیو سره دودیز کیدی شي.
بېلګه
په لاندې مثال کې، موږ د کارت یوه عادي برخه اخلو او د "لوډ کولو کارت" جوړولو لپاره پلي شوي ځای لرونکي سره یې بیا جوړوو. اندازه او تناسب د دواړو ترمنځ یو شان دي.
د کارت سرلیک
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
چیرته لاړ شه<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;