Nga kaipupuri waahi

Whakamahia nga kaipupuri waahi mo o wahanga, wharangi ranei hei tohu kei te uta tonu tetahi mea.

I tenei wharangi

Mō

Ka taea te whakamahi i nga waahi hei whakarei ake i te wheako o to tono. He mea hanga noa ki te HTML me te CSS, te tikanga kaore koe e hiahia JavaScript hei hanga. Heoi, ka hiahia koe ki etahi JavaScript ritenga ki te huri i o raatau tirohanga. Ko o raatau ahua, tae me te rahi ka taea te whakarite me o maatau akomanga whaipainga.

Tauira

I roto i te tauira i raro iho nei, ka tangohia e matou tetahi waahanga kaari ka mahia ano me nga kaipupuri waahi ka tono ki te hanga "kaari uta". He rite tonu te rahi me te rahi i waenganui i nga mea e rua.

taitara kāri

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Haere ki tetahi wahi

<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 te mahi

Waihangahia he waahi waahi me te .placeholderakomanga me tetahi akomanga pou matiti (hei tauira, .col-6) hei tautuhi i te width. Ka taea e ratou te whakakapi i te tuhinga i roto i tetahi huānga, ka taapirihia ranei hei karaehe whakarereke ki tetahi waahanga o naianei.

Ka hoatu e matou etahi atu styling ki .btns via ::beforeki te whakarite i te heightwhakaute. Ka taea e koe te whakawhānui ake i tenei tauira mo etahi atu ahuatanga ka hiahiatia, ka taapiri ranei i tetahi  ki roto i te huānga hei whakaata i te teitei ka tukuna te kuputuhi ki tona waahi.

<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>

Ko te whakamahi o aria-hidden="true"te tohu anake me huna te huānga ki te mata panui. Ko te whanonga uta o te kaipupuri waahi kei runga i te ahuatanga o nga kaituhi ki te whakamahi i nga momo tuunga waahi, me pehea e whakamahere ai ratou ki te whakahou i nga mea, me etahi atu. Ka hiahiatia etahi waehere JavaScript hei huri i te ahua o te waahi me te whakamohio ki nga kaiwhakamahi AT mo te whakahou.

Whānui

Ka taea e koe te huri i nga widthkaraehe o nga pou matiti, nga taputapu whanui, me nga momo raarangi.

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Tae

Ma te taunoa, nga placeholderwhakamahinga currentColor. Ka taea te whakakore i tenei ki te tae ritenga, te karaehe whaipainga ranei.

<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>

Te rahinga

Ko te rahi o .placeholderte s e ahu mai ana i te momo tuhi o te huānga matua. Whakaritea ki te whakakē rahi: .placeholder-lg, .placeholder-sm, ranei .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>

Hākoritanga

Whakakorikorihia nga kaipupuri waahi ki te whakaatu pai ake .placeholder-glowranei .placeholder-wavei te tirohanga o tetahi mea e utaina kaha ana.

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Taurangi

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;