Luchd-àite

Cleachd luchd-àite luchdachaidh airson na co-phàirtean no na duilleagan agad gus sealltainn gu bheil rudeigin fhathast ga luchdachadh.

Air an duilleig seo

Mu dheidhinn

Faodar luchd-àite a chleachdadh gus eòlas an tagraidh agad a neartachadh. Tha iad air an togail a-mhàin le HTML agus CSS, a 'ciallachadh nach eil feum agad air JavaScript airson an cruthachadh. Ach, bidh feum agad air JavaScript àbhaisteach gus am faicsinneachd atharrachadh. Faodar an coltas, an dath agus am meud a ghnàthachadh gu furasta leis na clasaichean goireis againn.

eisimpleir

Anns an eisimpleir gu h-ìosal, bidh sinn a’ gabhail pàirt cairt àbhaisteach agus ga ath-chruthachadh le luchd-àite air an cur an sàs gus “cairt luchdaidh” a chruthachadh. Tha meud agus cuibhreannan an aon rud eadar an dà rud.

Tiotal na cairt

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Rach àiteigin

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

Mar a tha e ag obair

Cruthaich luchd-àite leis a’ .placeholderchlas agus clas colbh clèithe (me, .col-6) gus am faidhle width. Faodaidh iad an teacsa taobh a-staigh eileamaid a chuir an àite no a bhith air a chur ris mar chlas mion-atharrachaidh ri pàirt a tha ann mar-thà.

Bidh sinn a’ cur stoidhle a bharrachd ri .btns via ::beforegus dèanamh cinnteach gu bheilear a’ heighttoirt spèis dha. Faodaidh tu am pàtran seo a leudachadh airson suidheachaidhean eile mar a dh’ fheumar, no cuir ris taobh a-  staigh an eileamaid gus an àirde a nochdadh nuair a thèid an dearbh theacsa a thoirt seachad na àite.

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>

Chan eil cleachdadh aria-hidden="true"ach a’ sealltainn gum bu chòir an eileamaid a bhith falaichte do leughadairean sgrion. Tha giùlan luchdachaidh an neach-àite an urra ri mar a chleachdas ùghdaran dha-rìribh stoidhlichean an neach-àite, mar a tha iad an dùil rudan ùrachadh, msaa. Dh’ fhaodadh gum bi feum air còd JavaScript gus suidheachadh an neach-àite atharrachadh agus innse do luchd-cleachdaidh AT mun ùrachadh.

Leud

Faodaidh tu widthna clasaichean colbh clèithe atharrachadh, goireasan leud, no stoidhlichean in-loidhne.

html

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

Dath

Gu gnàthach, bidh na placeholdercleachdaidhean currentColor. Faodar seo a chuir thairis le dath àbhaisteach no clas goireas.

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>

Meudachadh

Tha meud .placeholders stèidhichte air stoidhle clò-sgrìobhaidh na h-eileamaid phàrant. Gnàthaich iad le atharraichean meud: .placeholder-lg, .placeholder-sm, no .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>

Beothachadh

Beothachadh luchd-àite le .placeholder-glowno .placeholder-wavegus am beachd a thoirt seachad gu bheil rudeigin ga luchdachadh gu gnìomhach .

html

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

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

Sass

Caochlaidhean

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