Mea kūʻai
E hoʻohana i ka hoʻouka ʻana i nā wahi paʻa no kāu mau ʻāpana a i ʻole nā ʻaoʻao e hōʻike i kekahi mea e hoʻouka ana paha.
E pili ana
Hiki ke hoʻohana ʻia nā placeholders e hoʻonui i ka ʻike o kāu noi. Kūkulu ʻia lākou me HTML a me CSS wale nō, ʻo ia hoʻi ʻaʻole pono ʻoe i kekahi JavaScript e hana ai. Pono ʻoe i kekahi JavaScript maʻamau e hoʻololi i ko lākou ʻike. Hiki ke maʻalahi ko lākou helehelena, ka waihoʻoluʻu, a me ka nui me kā mākou papa hana pono.
Laʻana
Ma ka laʻana ma lalo nei, lawe mākou i kahi ʻāpana kāleka maʻamau a hana hou iā ia me nā mea kau wahi i noi ʻia e hana i kahi "kāleka hoʻouka". Ua like ka nui a me ka like ma waena o nā mea ʻelua.
Poʻo inoa kāleka
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Hele i kahi<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>
Pehea e hana ai
E hana i nā mea kūʻai me ka .placeholder
papa a me ka papa kolamu (e laʻa, .col-6
) e hoʻonohonoho i ka width
. Hiki iā lākou ke hoʻololi i ka kikokikona i loko o kahi mea a i ʻole e hoʻohui ʻia ma ke ʻano he papa hoʻololi i kahi mea i loaʻa.
Hoʻopili mākou i ke ʻano hou aku iā .btn
s via ::before
e hōʻoia i ka height
mahalo ʻia. Hiki iā ʻoe ke hoʻolōʻihi i kēia ʻano no nā kūlana ʻē aʻe e like me ka mea e pono ai, a i ʻole e hoʻohui i kahi i
loko o ka element e hōʻike i ke kiʻekiʻe ke hāʻawi ʻia ke kikokikona maoli ma kona wahi.
<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"
wale ka hoʻohana ʻana i ka mea e hūnā ʻia i ka nānā ʻana i nā mea heluhelu. ʻO
ke ʻano o ka hoʻouka ʻana o ka mea paʻa e pili ana i ka hoʻohana maoli ʻana o nā mea kākau i ke ʻano o ka placeholder, pehea lākou e hoʻolālā ai e hoʻonui i nā mea, a pēlā
aku .
Laulā
Hiki iā ʻoe ke hoʻololi i nā width
papa kolamu ma waena, nā pono ākea, a i ʻole nā ʻano inline.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
kalakala
Ma ka maʻamau, nā placeholder
hoʻohana currentColor
. Hiki ke hoʻopau ʻia kēia me kahi kala maʻamau a i ʻole ka papa hana pono.
<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>
Ka nui ana
Hoʻokumu ʻia ka nui o .placeholder
s ma ke ʻano typographic o ka mea makua. Hoʻopilikino iā lākou me nā mea hoʻololi nui: .placeholder-lg
, .placeholder-sm
, a i ʻole .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>
Animation
E hoʻolalelale i nā mea kūʻai wahi me .placeholder-glow
ka .placeholder-wave
hōʻike maikaʻi ʻana i ka manaʻo o kekahi mea e hoʻouka ikaika ʻia ana.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Nā mea hoʻololi
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;