Bootstrap 4 breakpoints: Breakpoints · Bootstrap v5.0

Обзор. Разметка · Bootstrap. Версия v4.0.0

Компоненты и опции для создания вашего проекта Bootstrap, включая контейнеры для упаковки, мощную сетчатую систему, гибкий медиа-объект и гибкие классы полезности.

Контейнеры

Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100% всегда).

Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.

<div>
  <!-- Content here -->
</div>

Используйте .container-fluid для создания контейнера полной ширины, занимающий 100% зоны просмотра.

<div>
  .  ..
</div>

Отзывчивые брейкпойнты

Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.

В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.

// Экстрамалые девайсы («телефоны», = 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:

@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) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):

// Экстрамалые девайсы («телефоны», 

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения min- и max- prefixes префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.

Опять же, эти @media доступны через Sass миксины:

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

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.

// Экстрамалые девайсы («портретные телефоны», = 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Большие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:

@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) { ... }

Также, @media могут занимать несколько значений ширин брейкпойнта:

// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:

@include media-breakpoint-between(md, xl) { ... }

Z-индекс

Несколько компонентов Bootstrap используют данный индекс z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).

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

Мы не советуем настраивать эти значения самому, т.к. если потребуется изменить одно, придется менять все.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения z-index 1,2,3, а также hover и «активные состояния». В hover/focus/active мы подводим частный элемент к «переднему краю» использованием более высокого z-индекса, для показа его границы над вложенными элементами.

Обзор · Bootstrap на русском

Варианты структурирования страниц с Bootstrap, включая глобальные стили, требуется монтаж, блочная система и более.

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

Контейнеры

Контейнеры являются самыми основными элементом разметки Bootstrap и необходим при использовании нашей блочной системы. Выбрать из aдаптивных, контейнер фиксированной ширины (то есть max-width изменения в каждой контрольной точке) или fluid-width (то есть 100% ширины всегда).

Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.

<div>
  <!-- Содержание здесь -->
</div>

Для того чтобы растянуть контейнер по всей ширине используйте .container-fluid

<div>
  ...
</div>

Адаптивные точки прерывания

Поскольку Bootstrap разработан, чтобы быть mobile first, мы используем небольшое количество медиа запросы для создания разумной точки прерывания для нашей разметки и интерфейсов. Эти точки в основном на основе минимальной ширины области просмотра и позволяют масштабировать элементы при изменении области просмотра.

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

// Дополнительные небольшие устройства (портрет телефонах, менее 544px)
// Нет медиа запросов, так как это по умолчанию в Bootstrap
// Небольших устройств (телефоны альбомной ориентации, 544px и вверх)@media (min-width: 544px) { .  .. }
// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) { ... }
// Крупных устройств (настольные компьютеры, 992px и выше)@media (min-width: 992px) { ... }
// Очень больших устройств (большие компьютеры, 1200px и выше)
@media (min-width: 1200px) { ... }

Так как мы пишем наш источник CSS в Sass, Все медиа запросы доступны через Sass примеси:

@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) { ... }
// Пример использования:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Мы изредка используем медиа запросы, которые идут в другую сторону (данный Размер экрана or smaller):

// Очень малые устройства (портрет телефонов, менее 544px)
@media (max-width: 543px) { ... }
// Небольших устройств (альбомной телефонов, меньше, чем 768px по)
@media (max-width: 767px) { .
  .. }
// Устройствах среднего (планшеты, меньше, чем 992px)
@media (max-width: 991px) { ... }
// Крупных устройств (настольных компьютеров, меньше 1200px)
@media (max-width: 1199px) { ... }
// Очень крупных устройств (большие компьютеры)
// No media query since the extra-large breakpoint has no upper bound on its width

В очередной раз эти медиа запросы через Sass примеси:

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

Мы также имеем медиа от минимальной точки прерывания и максимальное значение только для данного размера экрана:

// Очень малые устройства (портрет телефонов, менее 544px)
@media (max-width: 543px) { ... }
// Небольших устройств (альбомной телефоны, 544px и вверх)
@media (min-width: 544px) and (max-width: 767px) { ... }
// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) and (max-width: 991px) { . .. }
// Крупных устройств (настольных компьютеров, 992px и выше)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Очень больших устройств (большие компьютеры, 1200px и выше)
@media (min-width: 1200px) { ... }

Эти медиа запросы через Sass примеси:

@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) { ... }

И, наконец, медиа, Что охватывает несколько точек прерывания ширины:

// Пример
// Средних устройствах (планшеты, 768px и выше) и больших устройств (настольных компьютеров, 992px и выше)
@media (min-width: 768px) and (max-width: 1199px) { ... }

В Sass mixin Для приведенного выше примера выглядят, как показано ниже:

@include media-breakpoint-between(md, lg) { ... }

Точки останова Bootstrap 5 и 4 — Медиа-запросы [фрагмент кода] 2022

• Категория: Фрагменты кода
• Автор: Jacob Lett
•   Share This

Browse My Free Website Guides

---

Bootstrap 5 вводит новую точку останова в сеточной системе XXL. Ниже приведены медиа-запросы Bootstrap , используемые для точек останова системы сетки, чтобы вы могли добавить в свои проекты CSS-файл для настройки вещей.

Что такое контрольные точки Bootstrap 5?

Bootstrap 5 Установки сетки и точки остановления в СМИ

XS = дополнительная небольшая <576PX
МАКСКАЯ ШИГА 768px
Max container width 720px

lg = Large ≥992px
Max container width 960px

xl = Extra large ≥1200px
Max container width 1140px

xxl = Extra large ≥1400px
Максимальная ширина контейнера 1320 пикселей

Bootstrap 5 медиазапросов фрагмент кода

 /*
################################################### ##
М Е Д И А В У Е Р И Е С
################################################### ##
*/
 
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::: ::
Bootstrap 5 точек останова
*/
 
/*
Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
Нет медиа-запроса, так как это значение по умолчанию в Bootstrap, потому что оно «сначала мобильное». 
*/
 
 
/* Небольшие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) */
@media (минимальная ширина: 576 пикселей) {
 
}
 
/* Устройства среднего размера (планшеты, 768px и выше) В этой контрольной точке появляется переключатель панели навигации */
@media (минимальная ширина: 768 пикселей) {
 
}
 
/* Большие устройства (рабочие столы, 992px и выше) */
@media (минимальная ширина: 992 пикселя) {
 
}
 
/* Очень большие устройства (большие настольные компьютеры, 1200 пикселей и выше) */
@media (минимальная ширина: 1200 пикселей) {
    
}
 
/* Очень большие устройства (очень большие настольные компьютеры, 1400 пикселей и выше) */
@media (минимальная ширина: 1400 пикселей) {
    
}
 
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::: ::
Пользовательские медиа-запросы
*/
 
/* Установите ширину, чтобы сделать карты из колоды карт шириной 100% */
@media (максимальная ширина: 950 пикселей) {
 
} 

Посмотреть пример контрольных точек начальной загрузки

Что такое контрольные точки Bootstrap 4?

Bootstrap 4 представил новую точку останова для системы сетки XL. Ниже приведены медиа-запросы Bootstrap 4 , используемые для точек останова системы сетки, которые вы можете добавить в файл CSS вашего проекта для настройки вещей. Если вы новичок в сетке Bootstrap 4, я написал пост, объясняющий, как это работает.

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

xs = Очень маленький <576 пикселей
Макс. ширина контейнера Нет (авто)

см = небольшой ≥576PX
Макс. ширина контейнера 1140px

Bootstrap 4 медиа-запроса фрагмент кода

 /*
################################################### ##
М Е Д И А В У Е Р И Е С
################################################### ##
*/
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::: ::
Bootstrap 4 точки останова
*/
/*
Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
Нет медиа-запроса, так как это значение по умолчанию в Bootstrap, потому что оно «сначала мобильное». 
*/
/* Небольшие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) */
@media (минимальная ширина: 576 пикселей) {
}
/* Устройства среднего размера (планшеты, 768px и выше) В этой контрольной точке появляется переключатель панели навигации */
@media (минимальная ширина: 768 пикселей) {
}
/* Большие устройства (рабочие столы, 992px и выше) */
@media (минимальная ширина: 992 пикселя) {
}
/* Очень большие устройства (большие настольные компьютеры, 1200 пикселей и выше) */
@media (минимальная ширина: 1200 пикселей) {
    
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::: ::
Пользовательские медиа-запросы
*/
/* Установите ширину, чтобы сделать карты из колоды карт шириной 100% */
@media (максимальная ширина: 950 пикселей) {
}
 

 

Тема:

Метки: Начальная загрузка CSS

Первоначально опубликовано 30 декабря 2016 г., обновлено . 23 ноября 2022 г.

Хотите получать обновления по электронной почте о новых сообщениях? Присоединяйтесь к моему электронному бюллетеню

Поделитесь этим

Точки останова Bootstrap

Введение

Принимая во внимание все возможные ширины экрана, на которых в конечном итоге могут отображаться наши веб-страницы, важно скомпоновать их таким образом, чтобы обеспечить универсальный четкий и мощный внешний вид – обычно с помощью мощного адаптивного фреймворка, такого как самый популярный — фреймворк Bootstrap, последняя версия которого сейчас 4 альфа 6. Но что он на самом деле делает, чтобы страницы выглядели великолепно на любом экране — давайте посмотрим и посмотрим.

Основной принцип Bootstrap в целом заключается в том, чтобы упорядочить бесконечные возможные значения ширины экрана устройства (или области просмотра), поместив их в несколько диапазонов и соответствующим образом стилизовав/изменив порядок содержимого. Их также называют уровнями сетки или размерами экрана, и они довольно сильно эволюционировали в различных версиях самого популярного в последнее время адаптивного фреймворка — Bootstrap 4.

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

@media ( ~условие размера экрана ~) ~ правила стиля, применяемые при выполнении условия ~ Условия могут ограничивать один конец интервала, например min-width: 768px из них обоих, например @media (min -width: 768px) и (min-width: 991px) ~ некоторые стили здесь ~ — в то время как ширина области просмотра находится в пределах или равна значениям в условиях, в которых применяется правило.

Поскольку медиа-запросы являются частью языка CSS, может быть более одного запроса для одной ширины окна просмотра — если это так, то слово, прочитанное браузером последним, имеет слово — точно так же, как обычные правила CSS.

Отличия версий Bootstrap

В Bootstrap 4, в отличие от своего предшественника, имеется 5 значений ширины экрана, но начиная с последней сборки alpha 6 — только 4 группы медиа-запросов — мы вернемся к этому через секунду. Как вы, наверное, знаете, .row в начальной загрузке содержит элементы столбца, содержащие фактическое содержимое страницы, которое может занимать до 12/12 доступной видимой ширины — это упрощение, но мы говорим о другом. Каждый элемент столбца определяется одним из классов столбцов, состоящим из .col - для столбца, инфиксы размера экрана, определяющие, до какого размера экрана содержимое будет оставаться встроенным и будет охватывать всю ширину по горизонтали ниже, и число, показывающее, сколько столбцов будет занимать элемент, когда он находится в своем размере экрана или выше.

Пропорции экрана

Размеры экрана в Bootstrap обычно используют условие min-width и получаются следующими: применяется как общие правила, перезаписываемые запросами для указанных выше ширин. Что также нового в Bootstrap 4 alpha 6, так это то, что на самом деле он не использует никакого инфикса размера, поэтому классы макета столбца для этого размера экрана определяются как 9.0127 col-6 — такой элемент, например, будет занимать половину ширины независимо от области просмотра.

Маленькие экраны — использует @media (min-width: 576px) ... и инфикс -sm-. Например, элемент, имеющий класс .col-sm-6 , будет охватывать половину ширины в области просмотра 576 пикселей и шире, а полную ширину ниже.

Средние экраны — использует @media (min-width: 768px) ... и инфикс -md-. Например, элемент, имеющий класс .col-md-6 , будет занимать половину ширины на окнах просмотра 768 пикселей и шире, а ниже — полную ширину — вы, вероятно, уже разобрались.

Большие экраны — использует @media (минимальная ширина: 992 пикселя) ... и инфикс -lg- .

И, наконец, сверхбольшие экраны — @media (min-width: 1200px) ... — здесь инфикс -xl-

Отзывчивые точки останова

Учитывая, что Bootstrap, безусловно, создан для мобильных устройств. , мы используем небольшое количество медиа-запросов для создания разумных точек останова для макетов и пользовательских интерфейсов. Эти типы точек останова обычно зависят от минимальных размеров области просмотра и позволяют нам увеличивать размер элементов при изменении области просмотра.

Bootstrap в основном использует следующие расширения медиа-запросов — или точки останова — в исходных документах Sass для стиля, структуры сетки и элементов.

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса, так как это значение по умолчанию в Bootstrap
// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) . ..
// Средние устройства (планшеты, 768px и выше)
@media (минимальная ширина: 768 пикселей) ...
// Большие устройства (десктопы, 992px и выше)
@media (минимальная ширина: 992px) ...
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) ... 

Поскольку мы составляем исходный CSS в Sass, все медиа-запросы легко доступны с помощью миксинов Sass:

 @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) ...
// Пример использования:
@include media-breakpoint-up(sm)
  .некоторый класс
    дисплей: блок; 

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

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575 пикселей) ...
// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (максимальная ширина: 767 пикселей) . ..
// Средние устройства (планшеты, менее 992 пикселей)
@media (максимальная ширина: 991px) ...
// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (максимальная ширина: 1199 пикселей) ...
// Очень большие устройства (большие рабочие столы)
// Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы ширины 

Опять же, эти конкретные медиа-запросы также доступны с миксинами Sass:

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

Существуют также медиа-запросы и примеси для нацеливания на определенный сектор размеров экрана с применением минимальной и максимальной ширины точки останова.

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575 пикселей) ...
// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) и (максимальная ширина: 767 пикселей) . ..
// Средние устройства (планшеты, 768px и выше)
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 991px) ...
// Большие устройства (десктопы, 992px и выше)
@media (минимальная ширина: 992 пикселей) и (максимальная ширина: 1199 пикселей) ...
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) ... 

Эти виды медиа-запросов также легко доступны с миксинами Sass:

 @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) ... 

Аналогично, медиазапросы могут охватывать различные размеры точек останова:

 // Пример
// Применяем стили, начиная со средних устройств и заканчивая очень большими устройствами
@media (min-width: 768px) и (max-width: 1199px)... 

Миксин Sass для точного выбора размера экрана:

 @include media-breakpoint-between(md, xl ).