Bootstrap Placeholders (Заполнители)

О Placeholders

Заполнители можно использовать для улучшения работы вашего приложения. Они создаются только с использованием HTML и CSS, что означает, что вам не нужен JavaScript для их создания. Однако вам понадобится некоторый пользовательский JavaScript для переключения их видимости. Их внешний вид, цвет и размер можно легко настроить с помощью наших служебных классов.

Пример

В приведенном ниже примере мы берем типичный компонент карты и воссоздаем его с применением заполнителей для создания "загрузочной карты”. Размер и пропорции у них одинаковые.

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Название карточки</h5>
    <p class="card-text">Небольшой пример текста, который будет основываться на названии карточки.</p>
    <a href="#" class="btn btn-primary">Пойти куда-нибудь</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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

Как это работает

Создайте заполнители с помощью .placeholder класса и класса столбца сетки (например, .col-6), чтобы задать width. Они могут заменять текст внутри элемента или добавляться в качестве класса-модификатора к существующему компоненту.

Мы применяем дополнительный стиль к .btns через ::before, чтобы гарантировать, что height соблюдается. При необходимости вы можете расширить этот шаблон для других ситуаций или добавить   внутри элемента, чтобы отразить высоту, когда на его месте отображается фактический текст.

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

Ширина

Вы можете изменять 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>

Определение размера

Размер .placeholderэлементов зависит от типографского стиля родительского элемента. Настройте их с помощью модификаторов размера: .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>

CSS

Переменные Sass

scss/_variables.scss

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