Mpitondra toerana

Mampiasà toeran'ny fametahana ho an'ny singa na ny pejinao mba hilazana fa misy zavatra mbola misy entana.

Amin'ity pejy ity

About

Ny placeholders dia azo ampiasaina hanatsarana ny traikefan'ny fampiharanao. Namboarina tamin'ny HTML sy CSS ihany izy ireo, midika izany fa tsy mila JavaScript ianao hamoronana azy ireo. Na izany aza, mila JavaScript manokana ianao mba hampihodina ny fahitana azy. Ny bika aman'endriny, ny lokony ary ny habeny dia azo amboarina mora foana miaraka amin'ireo kilasin'ny fitaovana ampiasainay.

OHATRA

Ao amin'ny ohatra etsy ambany, maka singa karatra mahazatra isika ary mamerina izany miaraka amin'ny toeran'ny toerana ampiharina mba hamoronana "karatra mavesatra". Mitovy ny habeny sy ny tanjaky ny roa.

Lohateny karatra

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Mandehana any

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

Ahoana ny fiasan'izany

Mamorona placeholders miaraka amin'ny .placeholderkilasy sy kilasy tsanganana grid (oh, .col-6) mba hametrahana ny width. Azon'izy ireo atao ny manolo ny lahatsoratra ao anaty singa iray na ampiana ho kilasy modifier amin'ny singa efa misy.

Mampihatra styling fanampiny amin'ny .btns via ::beforeizahay mba hahazoana antoka heightfa voahaja ny. Azonao atao ny manitatra ity lamina ity amin'ny toe-javatra hafa raha ilaina, na manampy a  ao anatin'ilay singa mba hitaratra ny haavony rehefa adika amin'ny toerany ny tena lahatsoratra.

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

Ny fampiasana ny aria-hidden="true"dia manondro fotsiny fa ny singa dia tokony hafenina amin'ny mpamaky efijery. Miankina amin'ny fomba fampiasan'ny mpanoratra ny toeran'ny toerana, ny fomba fikasany hanavao zavatra, sns. Mety ilaina ny kaody JavaScript sasany hanovana ny toetry ny toerana ary hampahafantarana ny mpampiasa AT ny fanavaozana.

sakany

Azonao atao ny manova ny widthkilasin'ny tsanganana amin'ny alàlan'ny tsanganana, ny fitaovana sakany, na ny fomba inline.

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

loko

Amin'ny alàlan'ny default, ny placeholderfampiasana currentColor. Ity dia azo ovaina amin'ny loko mahazatra na kilasy ilaina.

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

Famaritana

Ny haben'ny .placeholders dia mifototra amin'ny fomba fanoratana ny singa ray. Ampifanaraho amin'ny mpanova habe: .placeholder-lg, .placeholder-sm, na .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

Ampifanaraho amin'ny toerana misy .placeholder-glowna .placeholder-wavemba hampitana tsara kokoa ny fiheverana ny zavatra entina mazoto .

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

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

Sass

hiovaova

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