Ҷойгирандагон

Ҷойгиркунакҳои боркуниро барои ҷузъҳо ё саҳифаҳои худ истифода баред, то нишон диҳед, ки чизе ҳоло ҳам бор карда мешавад.

Дар ин саҳифа

Дар бораи

Ҷойгиркунакҳоро барои беҳтар кардани таҷрибаи барномаи шумо истифода бурдан мумкин аст. Онҳо танҳо бо HTML ва CSS сохта шудаанд, яъне барои сохтани онҳо ба шумо ягон JavaScript лозим нест. Бо вуҷуди ин, ба шумо лозим меояд, ки JavaScript-и фармоишӣ барои иваз кардани намуди онҳо. Намуди зоҳирӣ, ранг ва андозаи онҳоро бо синфҳои хидматрасонии мо ба осонӣ танзим кардан мумкин аст.

Мисол

Дар мисоли зер, мо як ҷузъи маъмулии кортро мегирем ва онро бо ҷойнишинҳое, ки барои сохтани "корти боркунӣ" истифода мешаванд, дубора эҷод мекунем. Андоза ва таносуб байни ин ду баробар аст.

Сарлавҳаи корт

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Ба ҷое равед

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

Он чӣ гуна кор мекунад

Ҷойгиркунакҳоро бо .placeholderсинф ва синфи сутуни шабака эҷод кунед (масалан, .col-6) барои насб кардани width. Онҳо метавонанд матнро дар дохили элемент иваз кунанд ё ҳамчун синфи тағирдиҳанда ба ҷузъи мавҷуда илова карда шаванд.

Мо ороиши иловагиро ба .btns via истифода мебарем, ::beforeто heightриоя карда шавад. Шумо метавонед ин намунаро барои дигар ҳолатҳои зарурӣ васеъ кунед ё  дар дохили элемент барои инъикоси баландии вақте ки матни воқеӣ дар ҷои он дода мешавад, илова кунед.

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

Истифодаи aria-hidden="true"танҳо нишон медиҳад, ки элемент бояд барои хонандагони экран пинҳон карда шавад. Рафтори боркунии ҷойнишин аз он вобаста аст, ки чӣ тавр муаллифон услубҳои ҷойгиркуниро воқеан истифода хоҳанд кард, чӣ гуна онҳо нақшаи навсозии чизҳоро доранд ва ғайра. Барои иваз кардани ҳолати ҷойнишин ва огоҳ кардани корбарони AT дар бораи навсозӣ, баъзе коди JavaScript лозим аст.

Васеъ

Шумо метавонед widthсинфҳои сутуни шабака, утилитаҳои паҳнӣ ё сабкҳои дохилиро тағир диҳед.

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

Ранги

Бо нобаёнӣ, placeholderистифода мебарад currentColor. Ин метавонад бо ранги фармоишӣ ё синфи хидматрасонӣ бекор карда шавад.

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

Андоза

Андозаи .placeholders ба услуби типографии унсури волидайн асос ёфтааст. Онҳоро бо тағирдиҳандаҳои андоза танзим кунед: .placeholder-lg, .placeholder-sm, ё .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>

Аниматсия

Ҷойгиркунакҳоро бо .placeholder-glowё .placeholder-waveбеҳтар интиқол додани дарки чизе, ки фаъолона бор карда мешавад, анимат кунед.

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

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

Сасс

Тағйирёбандаҳо

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