Mea kūʻai

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 hoʻopilikino ʻia 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 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.

<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 .placeholderpapa 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ā .btns via ::beforee hōʻoia i ka heightmahalo ʻ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>

Laulā

Hiki iā ʻoe ke hoʻololi i nā widthpapa 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ā placeholderhoʻ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 .placeholders 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-glowka hoʻopuka .placeholder-wavemaikaʻ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;