in English

Libaka

Sebelisa litšoantšiso tsa sebaka bakeng sa likarolo kapa maqephe a hau ho bontša hore ho na le ntho e ntseng e tsoela pele.

Leqepheng lena

About

Li-placeholders li ka sebelisoa ho ntlafatsa boiphihlelo ba kopo ea hau. Li hahiloe feela ka HTML le CSS, ho bolelang hore ha u hloke JavaScript ho li etsa. Leha ho le joalo, u tla hloka JavaScript e tloaelehileng ho fetola ponahalo ea bona. Ponahalo ea bona, 'mala le boholo ba tsona li ka etsoa habonolo ka litlelase tsa rona tsa lisebelisoa.

Mohlala

Mohlaleng o ka tlase, re nka karolo e tloaelehileng ea karete ebe re e etsa hape ka litšoantšiso tse kentsoeng ho theha "karete ea ho kenya". Boholo le likarolo li tšoana pakeng tsa tse peli.

Sehlooho sa karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Eya kae-kae

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

Kamoo e sebetsang kateng

Theha litšoantšiso ka .placeholdersehlopha le sehlopha sa kholomo ea grid (mohlala, .col-6) ho seta width. Li ka nkela mongolo sebaka ka har'a element kapa tsa eketsoa e le sehlopha sa modifier ho karolo e teng.

Re sebelisa setaele se eketsehileng ho .btns via ::beforeho netefatsa hore heightsea hlomphuoa. U ka eketsa paterone ena bakeng sa maemo a mang ha ho hlokahala, kapa ua eketsa ka  hare ho element ho bonahatsa bophahamo ha mongolo oa sebele o ngoloa sebakeng sa oona.

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>

Tšebeliso ea aria-hidden="true"eona e bontša feela hore ntho e lokela ho patoa ho babali ba skrine. Boitšoaro ba ho kenya sebaka bo itšetlehile ka hore na bangoli ba tla sebelisa mekhoa ea setšoantšisi joang, hore na ba rera ho nchafatsa lintho joang, joalo-joalo. Ho ka 'na ha hlokahala khoutu e 'ngoe ea JavaScript ho fetola boemo ba setšoantšisi le ho tsebisa basebelisi ba AT ka ntlafatso.

Bophara

U ka fetola widthlitlelase tsa likholomo tsa grid, lisebelisoa tsa bophara, kapa mekhoa ea inline.

html

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

Mmala

Ka tloaelo, placeholderlisebelisoa currentColor. Sena se ka fetisoa ka 'mala o tloaelehileng kapa sehlopha sa lisebelisoa.

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>

Boholo

Boholo ba .placeholders bo ipapisitse le mokhoa oa typographic oa element ea motsoali. Iketsetse litlhophiso ka ho fetola boholo: .placeholder-lg, .placeholder-sm, kapa .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>

Animation

Phelisa lits'oants'o tsa sebaka ka .placeholder-glowkapa .placeholder-waveho fetisa maikutlo a hore ntho e laeloa ka mafolofolo .

html

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

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

Sass

Lintho tse fapaneng

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