Vishika nafasi

Tumia vishika nafasi vya kupakia kwa vipengele au kurasa zako ili kuashiria kuwa kuna kitu ambacho kinaweza kupakiwa.

Katika ukurasa huu

Kuhusu

Vishika nafasi vinaweza kutumika kuboresha matumizi ya programu yako. Zimeundwa kwa HTML na CSS pekee, kumaanisha kuwa hauitaji JavaScript yoyote ili kuziunda. Hata hivyo, utahitaji JavaScript maalum ili kubadilisha mwonekano wao. Muonekano wao, rangi, na ukubwa vinaweza kubinafsishwa kwa urahisi na madarasa yetu ya matumizi.

Mfano

Katika mfano ulio hapa chini, tunachukua kijenzi cha kawaida cha kadi na kukiunda upya kwa vishika nafasi vilivyotumika kuunda "kadi ya kupakia". Ukubwa na uwiano ni sawa kati ya hizo mbili.

Jina la kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Nenda mahali fulani

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

Inavyofanya kazi

Unda vishika nafasi kwa .placeholderdarasa na darasa la safu wima ya gridi (kwa mfano, .col-6) ili kuweka width. Wanaweza kuchukua nafasi ya maandishi ndani ya kipengele au kuongezwa kama darasa la kurekebisha kwa kipengele kilichopo.

Tunatumia mtindo wa ziada kwa .btns kupitia ::beforeili kuhakikisha kuwa heightinaheshimiwa. Unaweza kupanua muundo huu kwa hali zingine kama inavyohitajika, au kuongeza  ndani ya kipengee ili kuonyesha urefu wakati maandishi halisi yanatolewa mahali pake.

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>

Matumizi ya aria-hidden="true"huonyesha tu kwamba kipengele kinapaswa kufichwa kwa visoma skrini. Tabia ya upakiaji ya kishika nafasi inategemea jinsi waandishi watakavyotumia mitindo ya kishikilia nafasi, jinsi wanavyopanga kusasisha mambo, n.k. Baadhi ya msimbo wa JavaScript unaweza kuhitajika ili kubadilishana hali ya kishika nafasi na kuwafahamisha watumiaji wa AT kuhusu sasisho.

Upana

Unaweza kubadilisha widthmadarasa ya safu wima ya gridi, huduma za upana, au mitindo ya ndani.

html

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

Rangi

Kwa msingi, placeholdermatumizi currentColor. Hii inaweza kubatilishwa na rangi maalum au darasa la matumizi.

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>

Ukubwa

Ukubwa wa .placeholders unatokana na mtindo wa uchapaji wa kipengele kikuu. Yabinafsishe kwa virekebisha ukubwa: .placeholder-lg, .placeholder-sm, au .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>

Uhuishaji

Huisha vishika nafasi kwa kutumia .placeholder-glowau .placeholder-wavekuwasilisha vyema dhana ya kitu kinachopakiwa kikamilifu .

html

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

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

Sass

Vigezo

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