Abafite umwanya

Koresha ibibanza byapakurura ibice byawe cyangwa paji kugirango werekane ikintu gishobora kuba kirimo gupakira.

Kuriyi page

Ibyerekeye

Abafite umwanya barashobora gukoreshwa mugutezimbere uburambe bwa porogaramu yawe. Zubatswe gusa na HTML na CSS, bivuze ko udakeneye JavaScript kugirango ubireme. Uzakenera, ariko, ukeneye JavaScript yihariye kugirango uhindure neza. Isura yabo, ibara, nubunini birashobora guhindurwa byoroshye hamwe nibyiciro byingirakamaro.

Urugero

Murugero rukurikira, dufata ibice bisanzwe byikarita hanyuma tukayirema hamwe nabafite umwanya basabwa gukora "ikarita yo gupakira". Ingano n'ibipimo ni bimwe hagati yabyo.

Umutwe w'amakarita

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Genda ahantu runaka

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

Uburyo ikora

Kurema abafite umwanya hamwe nurwego hamwe .placeholderna gride inkingi (urugero, .col-6) kugirango ushireho width. Bashobora gusimbuza inyandiko imbere yikintu cyangwa bakongerwaho nkicyiciro cyo guhindura ibintu biriho.

Dushiraho styling yinyongera kuri .btns ::beforekugirango tumenye ko heightyubahwa. Urashobora kwagura ubu buryo kubindi bihe bikenewe, cyangwa ukongeramo ikintu  kugirango ugaragaze uburebure mugihe inyandiko nyayo yatanzwe mumwanya wabyo.

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>

Gukoresha aria-hidden="true"byerekana gusa ko ikintu kigomba guhishwa abasoma ecran. Imyitwarire yipakurura nyirubwite biterwa nuburyo abanditsi bazakoresha muburyo bwimiterere yabantu, uburyo bateganya kuvugurura ibintu, nibindi. Kode zimwe za JavaScript zishobora gukenerwa kugirango uhindure leta yumwanya kandi umenyeshe abakoresha AT ibyagezweho.

Ubugari

Urashobora guhindura widthunyuze kuri grid inkingi ibyiciro, ubugari bwingirakamaro, cyangwa inline.

html

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

Ibara

Mburabuzi, placeholderikoreshwa currentColor. Ibi birashobora kurengerwa nibara ryihariye cyangwa urwego rwingirakamaro.

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>

Ingano

Ingano ya .placeholders ishingiye kumyandikire yimyandikire yababyeyi. Hindura hamwe nubunini buhindura: .placeholder-lg,, .placeholder-smcyangwa .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

Bafite ibibanza bifatika .placeholder-glowcyangwa .placeholder-wavekugirango berekane neza imyumvire yikintu kiremerewe cyane .

html

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

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

Sass

Ibihinduka

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