Утилиты API

Утилиты начальной загрузки создаются с помощью служебного 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,
      100: 1,
    )
  )
 );

Выход:

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

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

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

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

Выход:

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

Адаптивные утилиты

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

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

Выход:

.opacity-0 { 
  opacity: 0;
}
.opacity-25 { 
  opacity: .25;
}
.opacity-75 { 
  opacity: .75;
}
.opacity-100 { 
  opacity: 1;
}
@media (min-width: 576px) { 
  .opacity-sm-0 { 
    opacity: 0;
  }
  .opacity-sm-25 { 
    opacity: .25;
  }
  .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-75 { 
    opacity: .75;
  }
  .opacity-md-100 { 
    opacity: 1;
  }
}
@media (min-width: 992px) { 
  .opacity-lg-0 { 
    opacity: 0;
  }
  .opacity-lg-25 { 
    opacity: .25;
  }
  .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-75 { 
    opacity: .75;
  }
  .opacity-xl-100 { 
    opacity: 1;
  }
}

Changing утилиты

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

$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,
      100: 1,
    )
  )
 );

Выход:

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

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

Удаление утилит

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

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