Masu riƙe wuri

Yi amfani da masu ɗaukar nauyi don abubuwan da aka haɗa ko shafukanku don nuna wani abu mai yiwuwa har yanzu yana lodawa.

A wannan shafi

Game da

Ana iya amfani da masu riƙe wuri don haɓaka ƙwarewar aikace-aikacen ku. An gina su da HTML da CSS kawai, ma'ana ba kwa buƙatar kowane JavaScript don ƙirƙirar su. Za ku, duk da haka, kuna buƙatar wasu JavaScript na al'ada don kunna ganuwansu. Siffarsu, launi, da girmansu ana iya keɓance su cikin sauƙi tare da azuzuwan abubuwan amfaninmu.

Misali

A cikin misalin da ke ƙasa, muna ɗaukar ɓangaren katin da aka saba kuma mu sake ƙirƙira shi tare da masu riƙe wuri da aka yi amfani da su don ƙirƙirar "katin kaya". Girma da rabbai iri ɗaya ne tsakanin su biyun.

Taken katin

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Tafi wani wuri

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

Yadda yake aiki

Ƙirƙiri masu riƙe wuri tare da .placeholderajin da ajin grid ginshiƙi (misali, .col-6) don saita width. Za su iya maye gurbin rubutu a cikin wani kashi ko a ƙara su azaman aji mai gyara zuwa abin da ke akwai.

Muna amfani da ƙarin salo zuwa .btns via ::beforedon tabbatar da heightan mutunta shi. Kuna iya tsawaita wannan ƙirar don wasu yanayi idan an buƙata, ko ƙara  a cikin kashi don nuna tsayi lokacin da ainihin rubutu ke gudana a wurinsa.

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

Amfani da aria-hidden="true"kawai yana nuna cewa kashi ya kamata a ɓoye ga masu karatun allo. Halin lodawa na mai wurin ya dogara da yadda mawallafa za su yi amfani da salon masu wurin a zahiri, yadda suke shirin sabunta abubuwa, da dai sauransu. Ana iya buƙatar wasu lambar JavaScript don musanya yanayin mai wurin da sanar da masu amfani da AT sabuntawa.

Nisa

Kuna iya canza widthazuzuwan ginshiƙan grid, abubuwan amfani mai faɗi, ko salon layi.

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

Launi

Ta hanyar tsoho, masu placeholderamfani currentColor. Ana iya shafe wannan tare da launi na al'ada ko aji mai amfani.

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

Girman girma

Girman .placeholders yana dogara ne akan salon rubutu na ɓangaren iyaye. Keɓance su tare da masu gyara ƙima: .placeholder-lg, .placeholder-sm, ko .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>

Animation

Rarraba masu riƙe wuri tare da .placeholder-glowko .placeholder-wavedon isar da mafi kyawun fahimtar wani abu da ake lodawa a hankali .

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

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

Sass

Masu canji

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