Zotengera malo

Gwiritsani ntchito zoyika zoyika pazigawo zanu kapena masamba kuti muwonetse kuti china chake chikutsegula.

Patsamba ili

Za

Zosungirako zitha kugwiritsidwa ntchito kupititsa patsogolo chidziwitso cha pulogalamu yanu. Amamangidwa ndi HTML ndi CSS okha, kutanthauza kuti simufunika JavaScript kuti mupange. Mudzafunika JavaScript yachizolowezi kuti musinthe mawonekedwe awo. Maonekedwe awo, mtundu, ndi kukula kwake zitha kusinthidwa mosavuta ndi makalasi athu othandiza.

Chitsanzo

Muchitsanzo chomwe chili m'munsimu, timatenga kagawo kakang'ono ka makhadi ndikuwapanganso ndi zosungira zomwe zimagwiritsidwa ntchito kuti tipange "khadi yotsegula". Kukula ndi kufanana ndi zofanana pakati pa ziwirizi.

Mutu wakhadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Pitani kwinakwake

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

Momwe zimagwirira ntchito

Pangani zosungira malo ndi .placeholderkalasi ndi gulu la magawo a gridi (mwachitsanzo, .col-6) kuti muyike width. Atha kusintha mawuwo mkati mwa chinthu kapena kuwonjezeredwa ngati kalasi yosinthira ku gawo lomwe lilipo.

Timayika masitayelo owonjezera ku .btns kudzera ::beforekuti tiwonetsetse kuti heightakulemekezedwa. Mutha kuwonjezera pateni pazochitika zina ngati pakufunika, kapena kuwonjezera a  mkati mwa chinthucho kuti muwonetse kutalika kwake pamene mawu enieni alembedwa m'malo mwake.

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>

Kugwiritsa ntchito aria-hidden="true"kumangosonyeza kuti chinthucho chiyenera kubisika kwa owerenga. Mayendedwe a choikira malo amatengera momwe olemba angagwiritsire ntchito masitayelo a choikira malo, momwe amakonzekera kusinthira zinthu, ndi zina zotero. Khodi ina ya JavaScript ingafunike kuti musinthe mawonekedwe a chosungira ndikudziwitsa ogwiritsa ntchito a AT zakusintha.

M'lifupi

Mutha kusintha widthmakalasi amtundu wa gridi, zogwirizira m'lifupi, kapena masitayilo amkati.

html

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

Mtundu

Kuphatikiza apo, placeholderamagwiritsidwa ntchito currentColor. Izi zitha kuphatikizidwa ndi mtundu wamtundu kapena gulu lothandizira.

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>

Kukula

Kukula kwa .placeholders kumatengera kalembedwe kazinthu zamakolo. Sinthani mwamakonda anu ndi zosintha masanjidwe: .placeholder-lg, .placeholder-sm, kapena .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>

Makanema

Sonyezani zoikira malo ndi .placeholder-glowkapena .placeholder-wavekuti muwonetse bwino malingaliro a chinthu chomwe chikuchulukidwa .

html

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

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

Sass

Zosintha

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