Bakka qaban
Wanti tokko ammallee fe'amuu akka danda'u agarsiisuuf qaamolee ykn fuula keetif qabduu iddoo fe'uu fayyadami.
Waa'ee
Bakka qaban muuxannoo iyyannoo kee guddisuuf fayyadamuun ni danda'ama. Isaanis HTML fi CSS qofaan ijaaramaniiru, jechuunis isaan uumuuf JavaScript tokkollee si hin barbaachisu. Haa ta'u malee, mul'achuu isaanii jijjiiruuf JaavaScript amala tokko tokko si barbaachisa. Bifa, halluu, fi safara isaanii salphaatti kutaalee faayidaa keenyaa wajjin haala barbaadamuun jijjiiruun ni danda’ama.
Fakkeenya
Fakkeenya armaan gadii keessatti, qaama kaardii idilee fudhannee “kaardii fe’uu” uumuuf bakka qabattoota hojiirra oolan waliin irra deebinee uumna. Guddinni fi pirooppoorshiniin lamaan isaanii gidduutti tokko.
Mata duree kaardii
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Bakka tokko dhaqi<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>
Akkaataa itti hojjetu
.placeholder
Saaguuf gitaa fi gita tarjaa tarjaa waliin iddooqa uumi (fkn, .col-6
) width
. Isaan barruu qaama keessa jiru bakka buusuu ykn akka gita fooyyessaa qaama jiruutti dabalamuu danda'u.
The is kabajamuu isaa mirkaneessuuf .btn
s via irratti styling dabalataa hojiirra oolchina . Akka barbaachisummaa isaatti haalawwan biroof shaakala kana dheeressuu dandeessa, ykn olka'iinsa calaqqisiisuuf qaama keessaa yeroo barruun qabatamaan bakka isaa agarsiifamu dabaluu dandeessa.::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"
elementiin dubbistoota iskiriiniif dhokachuu akka qabu qofa agarsiisa. Amalli
fe'iinsaa iddooqa akkaataa barreessitoonni qabatamaan akkaataa iddoowwan iddoo itti fayyadaman, akkaataa isaan wantoota haaromsuuf karoorfatan fi kkf irratti hundaa'a.Koodii JaavaScript tokko tokko
haala iddoo iddoo jijjiiruu fi fayyadamtoota AT fooyya'iinsa beeksisuu barbaachisuu danda'a.
Bal'ina
width
Gitoota tarjaa tarjaa keessaa, faayilii bal'ina, ykn akkaataa sarara keessaa jijjiiruu dandeessa .
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Halluu
Akka durtiitti, placeholder
fayyadama currentColor
. Kunis halluu amala ykn gita faayidaatiin irra darbuu danda'a.
<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>
Saayizii gochuu
Guddinni .placeholder
s akkaataa barreessuu qaama warraa irratti hundaa'a. Fooyyessitoota safaraatiin dhuunfachiisi: .placeholder-lg
, .placeholder-sm
, ykn .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>
Animeeshinii
Iddoowwan iddoowwanii wajjin sochoosuu .placeholder-glow
ykn hubannoo wanti tokko dammaqinaan fe'amuu .placeholder-wave
isaa haala gaariin dabarsuudhaaf .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass jedhama
Jijjiiramoota
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;