Izimeli

Sebenzisa ukulayisha izimeli zezingxenye zakho noma amakhasi ukukhombisa okuthile okungenzeka kusalayisha.

Kuleli khasi

Mayelana

Izimeli zingasetshenziswa ukuthuthukisa umuzwa wohlelo lwakho lokusebenza. Akhiwe kuphela nge-HTML ne-CSS, okusho ukuthi awudingi i-JavaScript ukuze uwadale. Nokho, uzodinga i-JavaScript yangokwezifiso ukuze uguqule ukubonakala kwayo. Ukubukeka kwabo, umbala, kanye nosayizi kungenziwa ngendlela oyifisayo kalula ngamakilasi ethu awusizo.

Isibonelo

Esibonelweni esingezansi, sithatha ingxenye yekhadi evamile futhi siyidale kabusha ngezibambi zendawo ezisetshenziswa ukudala "ikhadi lokulayisha". Ubukhulu nezilinganiso ziyefana phakathi kwakho kokubili.

Isihloko sekhadi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Hamba ndawana thize

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

Isebenza kanjani

Dala izimeli .placeholderngekilasi kanye nesigaba sekholomu yegridi (isb, .col-6) ukuze usethe i- width. Angakwazi esikhundleni sombhalo ongaphakathi kwe-elementi noma angezwe njengesigaba sokuguqula engxenyeni ekhona.

Sisebenzisa isitayela esengeziwe ku- .btns nge ::beforeukuze siqinisekise ukuthi heightkuyahlonishwa. Unganweba le phethini kwezinye izimo njengoba kudingeka, noma wengeze u-a  ngaphakathi kwe-elementi ukuze ubonise ubude lapho umbhalo wangempela unikezwa endaweni yawo.

html

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

Ukusetshenziswa kwe aria-hidden="true"-elementi kubonisa kuphela ukuthi isici kufanele sifihlwe kubafundi besikrini. Ukulayisha ukuziphatha kwesimeli kuncike ekutheni ababhali bazozisebenzisa kanjani ngempela izitayela zesimeli, ukuthi bahlela kanjani ukubuyekeza izinto, njll. Enye ikhodi ye-JavaScript ingase idingeke ukushintsha isimo sesimeli futhi yazise abasebenzisi be-AT ngesibuyekezo.

Ububanzi

Ungashintsha widthamakilasi ekholomu yegridi, izinsiza zobubanzi, noma izitayela ezisemgqeni.

html

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

Umbala

Ngokuzenzakalelayo, placeholderukusetshenziswa currentColor. Lokhu kungakhishwa ngombala wangokwezifiso noma isigaba sokusetshenziswa.

html

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

Ukulinganisa

Usayizi ka- .placeholders usekelwe kusitayela sokuthayipha se-elementi engumzali. Enze ngendlela oyifisayo ngezilungisi zosayizi: .placeholder-lg, .placeholder-sm, noma .placeholder-xs.

html

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

Opopayi

Gcwalisa izimeli .placeholder-glownoma .placeholder-waveudlulise kangcono umbono wento elayishwayo .

html

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

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

Sass

Okuguquguqukayo

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