Использование точек останова мультимедиа в Bootstrap 4-alpha

Обновление: Bootstrap 5.

v5 справочник по контрольным точкам

Исходный ответ: используйте примеси точек останова следующим образом:

.something {
    padding: 5px;
    @include media-breakpoint-up(sm) { 
        padding: 20px;
    }
    @include media-breakpoint-up(md) { 
        padding: 40px;
    }
}

v4 справочник по контрольным точкам

справочник по контрольным точкам v4 alpha6

Под полными параметрами и значениями.

Точка останова и вверх (переключение на значение и выше):

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

точка останова и значения вверх:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

точка останова и вниз (переключение на значение и вниз):

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

точка останова и значения вниз:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

только точка останова:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

только значения точки останова (переключение только между значениями):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

В дополнение к вышесказанному, если вы хотите использовать точки останова загрузочного носителя в таблицах стилей на уровне модуля (например, в компонентах приложения create-реагировать), по умолчанию они будут неопределенными, и вам нужно будет импортировать миксины и их зависимости отдельно. в каждый модуль.

Вы можете либо импортировать их вверху каждого файла:

@import 'bootstrap/scss/_functions';
@import 'bootstrap/scss/_variables';
@import 'bootstrap/scss/mixins/_breakpoints';

Или вы можете создать файл _mixins.scss в своей папке scss, содержащий приведенные выше строки, и просто импортировать этот файл в модули.

Обратите внимание, что если вы укажете _ перед именем файла, он не будет сгенерирован в CSS, он будет обработан как частичный файл, предназначенный только для импорта и игнорируемый компилятором.

В Bootstrap есть способ использовать медиа-запросы для определения разных задач для разных сайтов. Он использует четыре точки останова.

у нас есть очень маленькие размеры экрана, которые меньше 576 пикселей, что маленький, в котором я имею в виду его размер от 576 до 768 пикселей.

средние размеры экрана занимают размер экрана от 768 пикселей до 992 пикселей большой размер экрана от 992 пикселей до 1200 пикселей.

Например, мелкий текст

Это означает, что на маленьком экране между 576px и 768px центрируйте текст. Для среднего экрана измените «sm» на «md» и то же самое относится к большому «lg».