API

API - это инструмент на основе Sass для генерации служебных классов.

На этой странице

Утилиты начальной загрузки создаются с помощью служебного API, который можно использовать для изменения или расширения служебных классов Bootstrap. Если вы не знаете что такое карты Sass, то можете начать работу обратившись к официальной документации.

Карта $utilities содержит все утилиты и позже объединяется с вашей пользовательской картой $utilities, если она есть. Карта утилит содержит ключевой список групп утилит, которые принимают следующие параметры:

property: Имя свойства, это может быть строка или массив строк (требуется, например, для горизонтальных отступов или полей).
responsive (необязательно): Логическое значение, указывающее, нужно ли создавать адаптивные классы. По умолчанию имеет значение false.
rfs (необязательно): Переменная для изменения меняющегося масштаба. Взгляните на страницу RFS, чтобы узнать, как это работает. По умолчанию имеет значение false.
class (необязательно): Переменная для изменения имени класса, если вы не хотите, чтобы оно совпадало со свойством. Если вы не предоставили ключ class, а ключ property представляет собой массив строк, имя класса будет первым элементом массива property.
values: Это может быть список значений или карта, если вы не хотите, чтобы имя класса совпадало со значением. Если в качестве ключа карты используется значение null, оно не отображается.
print (необязательно): Логическое значение, указывающее, нужно ли создавать классы печати. По умолчанию имеет значение false.

Добавление утилит в служебный API

Все служебные переменные добавляются в переменную $utilities. Пользовательские группы утилит могут быть добавлены следующим образом:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Вывод:

.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: .25;
}
.opacity-50 {
  opacity: .5;
}
.opacity-75 {
  opacity: .75;
}
.opacity-100 {
  opacity: 1;
}

Изменение префикса класса

С помощью опций class можно изменить префикс класса:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Вывод:

.o-0 {
  opacity: 0;
}
.o-25 {
  opacity: .25;
}
.o-50 {
  opacity: .5;
}
.o-75 {
  opacity: .75;
}
.o-100 {
  opacity: 1;
}

Адаптивные параметры

С помощью адаптивного responsive варианта можно сгенерировать отзывчивые служебные классы:

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Вывод:

.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: .25;
}
.opacity-50 {
  opacity: .5;
}
.opacity-75 {
  opacity: .75;
}
.opacity-100 {
  opacity: 1;
}
@media (min-width: 576px) {
  .opacity-sm-0 {
    opacity: 0;
  }
  .opacity-sm-25 {
    opacity: .25;
  }
  .opacity-sm-50 {
    opacity: .5;
  }
  .opacity-sm-75 {
    opacity: .75;
  }
  .opacity-sm-100 {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .opacity-md-0 {
    opacity: 0;
  }
  .opacity-md-25 {
    opacity: .25;
  }
  .opacity-md-50 {
    opacity: .5;
  }
  .opacity-md-75 {
    opacity: .75;
  }
  .opacity-md-100 {
    opacity: 1;
  }
}
@media (min-width: 992px) {
  .opacity-lg-0 {
    opacity: 0;
  }
  .opacity-lg-25 {
    opacity: .25;
  }
  .opacity-lg-50 {
    opacity: .5;
  }
  .opacity-lg-75 {
    opacity: .75;
  }
  .opacity-lg-100 {
    opacity: 1;
  }
}
@media (min-width: 1200px) {
  .opacity-xl-0 {
    opacity: 0;
  }
  .opacity-xl-25 {
    opacity: .25;
  }
  .opacity-xl-50 {
    opacity: .5;
  }
  .opacity-xl-75 {
    opacity: .75;
  }
  .opacity-xl-100 {
    opacity: 1;
  }
}

Изменение параметров

Отмена существующих параметров возможна с помощью того же ключа. Например, если вам нужны более отзывчивые служебные классы переполнения, вы можете сделать это:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Параметры печати

Включение опции печати print также создаст служебные классы для печати.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Вывод:

.o-0 {
  opacity: 0;
}
.o-25 {
  opacity: .25;
}
.o-50 {
  opacity: .5;
}
.o-75 {
  opacity: .75;
}
.o-100 {
  opacity: 1;
}

@media print {
  .o-print-0 {
    opacity: 0;
  }
  .o-print-25 {
    opacity: .25;
  }
  .o-print-50 {
    opacity: .5;
  }
  .o-print-75 {
    opacity: .75;
  }
  .o-print-100 {
    opacity: 1;
  }
}

Удаление параметров

Параметры также можно удалить, изменив ключ группы на null:

$utilities: (
  "float": null,
);