Baswari ba mafelo

Šomiša go laetša diswari tša mafelo tša dikarolo tša gago goba matlakala go laetša gore selo se sengwe se ka ba se sa dutše se laetša.

Letlakaleng le

Mabapi le

Diswari tša mafelo di ka šomišwa go godiša maitemogelo a tirišo ya gago. Di agilwe fela ka HTML le CSS, go ra gore ga o hloke JavaScript go di hlama. O tla, le ge go le bjalo, hloka JavaScript ye nngwe ya tlwaelo go fetoša go bonagala ga tšona. Ponagalo ya tšona, mmala le bogolo bja tšona di ka rulaganywa gabonolo ka diklase tša rena tša didirišwa.

Mohlala

Mohlaleng wo o lego ka mo tlase, re tšea karolo ya karata ye e tlwaelegilego gomme re e hlama gape ka di-placeholder tšeo di dirišitšwego go hlama “karata ya go laetša”. Bogolo le ditekanyo di a swana magareng ga tše pedi.

Thaetlele ya karata

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Eya felotsoko

<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 šomago ka gona

Hlama ditshwaro tša mafelo ka .placeholdersehlopha le sehlopha sa kholomo ya keriti (mohlala, .col-6) go beakanya width. Di ka tšea legato la sengwalwa ka gare ga elemente goba tša tlaleletšwa bjalo ka sehlopha sa sefetoši go karolo ye e lego gona.

Re diriša setaele sa tlaleletšo go .btns via ::beforego netefatša gore the heighte a hlompšha. O ka katološa paterone ye bakeng sa maemo a mangwe ge go nyakega, goba wa tlaleletša ka  gare ga elemente go bontšha bophagamo ge sengwalwa sa nnete se tšweletšwa legatong la sona.

<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šhomišo ya aria-hidden="true"e laetša fela gore elemente e swanetše go utollwa go babadi ba skrine. Boitshwaro bja go laetša bja seswaro sa lefelo bo ithekgile ka gore bangwadi ba tla šomiša bjang mekgwa ya seswaro sa lefelo, ka fao ba rulaganyago go mpshafatša dilo, bj.bj.. Khoutu ye nngwe ya JavaScript e ka nyakega go fapantšha seemo sa seswari sa lefelo le go tsebiša badiriši ba AT ka mpshafatšo.

Bophara

O ka fetoa widthdiklase ta dikholomo ta keriti ya go feta, dithulaganyo ta bophara, goba ditaele ta ka gare ga mothaladi.

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

Mmala

Ka go ikemela, e placeholderdiriša currentColor. Se se ka tlošwa ka mmala wa tlwaelo goba sehlopha sa utility.

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

Go lekanyetša bogolo

Bogolo bja .placeholders bo theilwe godimo ga mokgwa wa go thaepa wa elemente ya motswadi. Di tlwaetše ka diphetoši tša go lekanyetša bogolo: .placeholder-lg, .placeholder-sm, goba .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>

Ditshwantšho tša go phela

Dira ditshwantšho tša mafelo ka .placeholder-glowgoba .placeholder-wavego fetišetša gakaone temogo ya selo seo se imelwago ka mafolofolo .

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

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

Sass

Diphetogo

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