Áitsealbhóirí

Bain úsáid as coinneálaithe lódála le haghaidh do chomhpháirteanna nó leathanaigh chun a chur in iúl go bhféadfadh go bhfuil rud éigin fós á luchtú.

Ar an leathanach seo

Faoi

Is féidir áitshealbhóirí a úsáid chun cur le taithí d’iarratais. Níl siad tógtha ach le HTML agus CSS, rud a chiallaíonn nach bhfuil JavaScript ag teastáil uait chun iad a chruthú. Beidh roinnt JavaScript saincheaptha uait, áfach, chun a n-infheictheacht a scoránaigh. Is féidir a gcuma, a dath agus a méid a shaincheapadh go héasca lenár ranganna fóntais.

Sampla

Sa sampla thíos, glacaimid comhpháirt cárta tipiciúil agus athchruthaímid é le sealbhóirí áite a chuirtear i bhfeidhm chun “cárta lódála” a chruthú. Tá méid agus comhréireanna mar an gcéanna idir an dá cheann.

Teideal an chárta

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Téigh áit éigin

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

Conas a oibríonn sé

Cruthaigh áitshealbhóirí leis an .placeholderrang agus rang colún greille (m.sh., .col-6) chun an width. Is féidir iad a chur in ionad an téacs taobh istigh d’eilimint nó iad a chur mar aicme mionathraithe le comhpháirt atá ann cheana féin.

Cuirimid stíliú breise i bhfeidhm ar .btns via ::beforechun a chinntiú go heightbhfuil meas air. Is féidir leat an patrún seo a leathnú le haghaidh cásanna eile de réir mar is gá, nó cuir isteach  laistigh den eilimint chun an airde a léiriú nuair a rindreáiltear an téacs féin ina áit.

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

Ní thugann úsáid aria-hidden="true"ach le fios gur chóir an eilimint a chur i bhfolach do léitheoirí scáileáin. Braitheann iompar luchtaithe an tsealbhóra áite ar an gcaoi a n-úsáidfidh údair na stíleanna sealbhóirí áite, conas a bheartaíonn siad rudaí a nuashonrú, etc. D’fhéadfadh go mbeadh gá le roinnt cód JavaScript chun staid an áitsealbhóra a mhalartú agus úsáideoirí AT a chur ar an eolas faoin nuashonrú.

Leithead

Is féidir leat na widthtrí ranganna colún greille, fóntais leithead, nó stíleanna inlíne a athrú.

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

Dath

De réir réamhshocraithe, placeholderúsáidí currentColor. Is féidir é seo a shárú le dath saincheaptha nó le haicme fóntais.

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

Sizing

Tá méid na .placeholders bunaithe ar stíl chlóghrafaíoch na máthaireiliminte. Saincheap iad le modhnóirí méide: .placeholder-lg, .placeholder-sm, nó .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>

Beochan

Áititheoirí a bheochan leis an dearcadh go bhfuil rud éigin á lódáil go gníomhach.placeholder-glow nó a chur in iúl níos fearr..placeholder-wave

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

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

Sass

Athróga

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