В Bootstrap 4 можно задавать свои собственные breakpoint'ы, чтобы настраивать адаптивность вашего веб-сайта или приложения. Стандартные breakpoint'ы в Bootstrap 4 представлены следующими значениями:
- xs (extra small) - маленькие экраны (меньше 576px)
- sm (small) - небольшие экраны (от 576px до 768px)
- md (medium) - средние экраны (от 768px до 992px)
- lg (large) - большие экраны (от 992px до 1200px)
- xl (extra large) - очень большие экраны (больше 1200px)
Однако, если вы хотите добавить собственные breakpoint'ы или изменить существующие, вам понадобится настроить переменные LESS или SASS.
Сначала вам нужно определить новые breakpoint'ы в вашем файле LESS или SASS. Например, вы можете добавить новые breakpoint'ы для экранов с шириной 480px и 1440px следующим образом:
$breakpoint-xs: 480px; $breakpoint-xl: 1440px;
Затем вам нужно обновить значения переменных для контейнеров и колонок, чтобы они соответствовали вашим новым breakpoint'ам:
$container-sm: 480px; $container-md: 768px; $container-lg: 992px; $container-xl: 1200px; $grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px );
После этого ваши стили будут отреагировать на новые breakpoint'ы, и вы сможете использовать их для создания адаптивных макетов.
Однако, следует отметить, что при использовании собственных breakpoint'ов в Bootstrap 4 вам также понадобится обновить правила медиазапросов в вашем коде, чтобы они использовали новые значения.