Заместители

Използвайте контейнери за зареждане за вашите компоненти или страници, за да посочите, че нещо може все още да се зарежда.

На тази страница

относно

Заместителите могат да се използват за подобряване на изживяването на вашето приложение. Те са създадени само с 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"само показва, че елементът трябва да бъде скрит за екранните четци. Поведението при зареждане на контейнера зависи от това как авторите действително ще използват стиловете на контейнера, как планират да актуализират нещата и т.н. Може да е необходим някакъв JavaScript код за размяна на състоянието на контейнера и информиране на AT потребителите за актуализацията.

ширина

Можете да промените 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;