Bootstrap Система сеток

Что такое сетка?

Из Википедии:

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

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

Что такое система сеток Bootstrap?

Описание системы сеток в официальной документации Bootstrap:

Bootstrap включает адаптивную, mobile-first, гибкую систему сеток, которая соответствующим образом расширяется до 12 столбцов по мере увеличения размера устройства или области просмотра. Она включает предопределенные классы для простых вариантов макета, а также мощные миксины для создания более семантичных макетов.

Давайте разберем вышеприведенное утверждение. Bootstrap 3 является mobile-first в том смысле, что код Bootstrap начинается с устройств с небольшими экранами (таких как мобильные устройства, планшеты), а затем расширяется до компонентов и сеток на устройствах с большими экранами (таких как ноутбуки, настольные компьютеры).

Стратегия Mobile-first

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

Адаптивная система сеток автоматически разбивается максимум на 12 столбцов по мере увеличения размера экрана или области просмотра.

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Как работает система сеток Bootstrap

Система сеток создаёт макеты страниц с помощью серии строк и столбцов, содержащих контент. Ниже показано, как работает система сеток Bootstrap:

• Строки должны размещаться внутри.containerкласса, чтобы обеспечить правильное выравнивание и внутренние отступы.
• Используйте строки для создания горизонтальных групп столбцов.
• Контент должен размещаться внутри столбцов, и только столбцы могут быть прямыми дочерними элементами.
• Предопределенные классы сетки, такие как.rowи.col-xs-4, можно использовать для быстрого создания макетов сетки. Миксины LESS можно использовать для более семантичных макетов.
• Столбцы создают промежутки между содержимым столбцов через padding. Этот padding достигается тем, что.rowsпринимают отрицательные margin по внешнему краю, указывая смещение строки для первого и последнего столбцов.
• Система сетки создается путем указания двенадцати доступных столбцов, которые вы хотите охватить. Например, чтобы создать три равных столбца, используйте три.col-xs-4。

Медиа-запросы

Медиа-запросы — это очень удобные «условные правила CSS». Они применяются только к некоторому CSS на основе определенных заданных условий. Если эти условия выполнены, применяются соответствующие стили.

Медиа-запросы в Bootstrap позволяют перемещать, показывать и скрывать содержимое в зависимости от размера области просмотра. Следующие медиа-запросы используются в файлах LESS для создания ключевых пороговых значений контрольных точек в сеточной системе Bootstrap.

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

Иногда мы также включаемmax-width, чтобы ограничить влияние CSS меньшим диапазоном размеров экрана.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Медиа-запросы состоят из двух частей: сначала спецификация устройства, затем правило размера. В приведенном выше случае задаются следующие правила:

Давайте посмотрим на следующую строку кода:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Для всех сmin-width: @screen-sm-minустройств, если ширина экрана меньше@screen-sm-max, то будет выполнена некоторая обработка.

Параметры сетки

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

	Сверхмалые устройства Телефоны (<768px)	Малые устройства Планшеты (≥768px)	Средние устройства Настольные компьютеры (≥992px)	Большие устройства Настольные компьютеры (≥1200px)
Поведение сетки	Всегда горизонтально	Свернуто в начале, горизонтально выше контрольных точек	Свернуто в начале, горизонтально выше контрольных точек	Свернуто в начале, горизонтально выше контрольных точек
Максимальная ширина контейнера	Нет (auto)	750px	970px	1170px
Префикс класса	.col-xs-	.col-sm-	.col-md-	.col-lg-
Количество столбцов и	12	12	12	12
Минимальная ширина столбца	Авто	60px	78px	95px
Ширина промежутка	30px (по 15px с каждой стороны колонки)	30px (по 15px с каждой стороны колонки)	30px (по 15px с каждой стороны колонки)	30px (по 15px с каждой стороны колонки)
Поддерживают вложенность	Да	Да	Да	Да
Смещения	Да	Да	Да	Да
Порядок колонок	Да	Да	Да	Да

Базовая структура сетки

Ниже представлена базовая структура сетки Bootstrap:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Рассмотрим несколько простых примеров сетки:

• Пример: вертикальное накопление с переходом в горизонтальное расположение
• Пример: средние и большие устройства
• Пример: телефоны, планшеты, настольные компьютеры

Адаптивные сбросы колонок

В следующем примере содержится 4 сетки, но мы не можем определить, где сетки отображаются при просмотре на маленьких устройствах.

Чтобы решить эту проблему, вы можете использовать.clearfixкласс иадаптивные служебные классы, чтобы справиться с ней, как показано в примере ниже:

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

Смещение столбцов

Смещение — полезная функция для более профессиональных макетов. Они могут быть использованы, чтобы сделать больше пространства для столбцов. Например,.col-xs-*классы не поддерживают смещения, но они могут просто достичь этого эффекта, используя пустую ячейку.

Чтобы использовать смещения на больших экранах, используйте.col-md-offset-*классы. Эти классы увеличивают левое поле (margin) столбца на*столбцов, где*диапазон от1до11。

В приведенном ниже примере у нас есть

, мы будем использовать.col-md-offset-3класс, чтобы центрировать этот div.

Результат следующий:

Вложенные столбцы

Чтобы вложить сетку по умолчанию в содержимое, добавьте новый.row, и в существующий.col-md-*столбец добавьте набор.col-md-*столбцов. Вложенная строка должна содержать набор столбцов, и количество столбцов не может превышать 12 (на самом деле, нет требования, что вы должны заполнить все 12 столбцов).

В приведенном ниже примере макет имеет два столбца, и второй столбец разделен на две строки по четыре блока.

Результат следующий:

Порядок столбцов

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

Вы можете очень легко изменить встроенный порядок столбцов сетки с помощью.col-md-push-*и.col-md-pull-*классов, где*диапазон от1в11。

В приведенном ниже примере у нас есть двухколоночный макет, где левая колонка узкая и действует как боковая панель. Мы будем использовать.col-md-push-*и.col-md-pull-*класс, чтобы поменять местами эти две колонки.

Результат следующий:

Другие расширения