Фреймворк bootstrap требует элемента контейнера при использовании системы сетки

Обновлено: 07.07.2024

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

Сетка

Сетка — это набор предопределённых css-классов, с помощью которых можно задать необходимое поведение блокам и построить с их помощью адаптивный макет сайта.

Оберточный контейнер

Оберточный контейнер — это элемент сетки, с которого начинается создание макета для всей страницы или её части (шапка, основной области, подвал). Контейнер может быть адаптивно-фиксированным (класс container ) или адаптивно-резиновым (класс container-fluid ).

Адаптивно-фиксированный контейнер имеет постоянную ширину в пределах некоторого диапазона ширины окна браузера. Кроме того, контейнер центрирует себя в горизонтальном направлении и задает внутренние отступы ( padding ) слева и справа по 15рх .
Адаптивно-резиновый контейнер занимает всю ширину окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер, задает внутренние отступы ( padding ) слева и справа по 15рх .

Ряды и адаптивные блоки

Следующий элемент сетки — это ряд (блок div с классом row ), который применяется для оборачивания других элементов (адаптивных блоков). Первое назначение ряда — это нейтрализация положительного внутреннего отступа (15px слева и справа) контейнера. А второе — он служит flex-контейнером для flex-элементов (адаптивных блоков). Как нетрудно догадаться, сетка Bootstrap 4 построена на Flexbox.

Последний элемент сетки — адаптивные блоки ( div с классом col- или col-- ). Эти блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру. Адаптивный блок на разных устройствах может иметь разную ширину.

Адаптивные блоки (или колонки) имеют горизонтальные отступы, но их можно удалить, если добавить класс no-gutters для ряда:

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

Заготовка страницы

Примеры использования сетки

Первый пример

Данный адаптивный блок будет иметь:

на xs -устройствах: ширину, равную 12 колонкам
на sm -устройствах: ширину, равную 9 колонкам
на md -устройствах: ширину, равную 7 колонкам
на lg -устройствах: ширину, равную 5 колонок
на xl -устройствах: ширину, равную 3 колонкам

Второй пример

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

Третий пример

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

На устройствах md , lg и xl :

На устройствах sm :

На устройствах xs :

Четвертый пример

Группа классов col , col-sm , col-md , col-lg , col-xl предназначена для создания адаптивных блоков, ширина которых будет зависеть от свободного пространства линии. Распределение не занятой ширины (свободного пространства) линии между всеми такими блоками осуществляется равномерно.

Если данное действие необходимо использовать только для некоторых контрольных точек, то к классу w-100 дополнительно нужно добавить служебные отзывчивые классы — например, d-sm-none или d-lg-none .

Пятый пример

Группа классов col-auto , col-sm-auto , col-md-auto , col-lg-auto и col-xl-auto предназначена для создания адаптивных блоков, ширина которых будет определяться в соответствии с их содержимым.

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

Как это работает

Система сеток Bootstrap использует серию контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное рассмотрение того, как объединяется сетка.

Новичок или незнакомец с flexbox? Прочтите это руководство по CSS Tricks по flexbox для фона, терминология, рекомендации и фрагменты кода.

В приведенном выше примере создаются три столбца одинаковой ширины на малых, средних, больших и очень больших устройствах с использованием наших предопределенных классов сетки. Эти столбцы центрируются на странице с родительским .container .

Вот как это работает:

Контейнеры предоставляют средства для центрирования и горизонтального размещения содержимого Вашего сайта. Используйте .container для адаптивной ширины в пикселях или .container-fluid для параметра width: 100% для всех размеров области просмотра и устройства.
Строки - это обертки для столбцов. У каждого столбца есть горизонтальный padding (называемый полем) для управления пространством между ними. Затем этому padding противодействуют строки с отрицательными полями. Таким образом, все содержимое Ваших столбцов визуально выравнивается по левому краю
В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Благодаря flexbox, столбцы сетки без указанной ширины width будут автоматически компоноваться как столбцы одинаковой ширины. Например, каждый из четырех экземпляров .col-sm автоматически будет иметь ширину 25% от небольшой контрольной точки и выше. См. дополнительные примеры в разделе столбцы auto-layout.
Классы столбцов указывают количество столбцов, которое Вы хотите использовать из возможных 12 в строке. Итак, если Вам нужны три столбца одинаковой ширины, Вы можете использовать .col-4 .
Ширина width столбцов задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
Столбцы имеют горизонтальный padding для создания промежутков между отдельными столбцами, однако Вы можете удалить margin из строк и padding из столбцов с помощью .no-gutters в строке .row .
Чтобы сетка реагировала, есть пять контрольных точек сетки, по одной для каждой отзывчивой контрольной точки: все контрольные точки (очень маленькие), маленькие, средние, большие и очень большие.
Контрольные точки сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной контрольной точке и всем тем, что выше нее (например, .col-sm-4 применяется к маленьким, средним, большим и очень большим устройствам , но не первая контрольная точка xs ).
Вы можете использовать предопределенные классы сетки (например .col-4 ) или Sass mixins для большей семантической разметки.

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

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

Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

Столбцы автоматической компоновки

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

Равная ширина

Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs до xl . Добавьте любое количество классов без единиц измерения для каждой нужной контрольной точки, и каждый столбец будет одинаковой ширины.

Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система 12 колонок, 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.

Как это устроено

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

Если вы не знакомы с flexbox, то ознакомьтесь с руководством по флексбоксу CSS Tricks чтобы получить справочную информацию, термины, рекомендаций и фрагменты кода.

В данном примере с помощью наших предустановленных классов сеток были созданы 3 колонки равной ширины для маленьких, средних и больших девайсов. Эти колонки выровнены с помощью родительского класса .container .

Вот небольшое объяснение работы Bootstrap 4:

Инструмент для центровки контента сайта. Используйте класс .container для фиксированной ширины или .container-fluid для 100%-ной ширины.
Ряды – это обертка для колонок. Каждая колонка имеет горизонтальный padding (называемый gutter) для контроля пространства между колонками. Этот padding (паддинг) влияет на ряды с отрицательным марджином. В этом случае все содержимое ваших колонок будет визуально центрировано внизу с левой стороны.
Содержимое должно быть расположено в колонках, и только колонки могут быть расположены в рядах.
Благодаря флексбоксу колонки сетки без установленного атрибута ширина автоматически получают равную ширину. Например, четыре экземпляра класса .col-sm автоматически (на малых контрольных точках) получат ширину одной колонки = 25%. Подробнее смотрите раздел Автоматическое расположение с помощью колонок.
Цифры в наименовании классов колонок показывают, сколько колонок из 12-ти возможных в ряду вы бы хотели использовать. Так, если вы хотите использовать три колонки одной ширины, используйте .col-sm-4 .
Ширина колонок width задана в процентах, что позволяет колонкам быть гибкими и изменять размер относительно их родительского элемента.
Колонки имеют горизонтальный паддинг padding для создания отступов между отдельными колонками, но вы можете удалить марджины margin из рядов и паддинги padding из колонок, добавив класс .no-gutters в .row .
Есть 5 ярусов сеток, по одному для каждого «брейкпойнта»: все контрольные точки (экстра маленький), маленький, средний, большой и экстрабольшой.
Ярусы сетки основаны на минимальной широте, т.е. они подходят для каждого вышестоящего яруса (т.е., .col-sm-4 подходит для маленьких, средних, больших и XL девайсов).
Вы можете использовать предопределенные классы сетки (например .col-4 ) или препроцессоры Sass для создания своей разметки.

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

Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для брейкпойнтов сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.

Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных ручных устройствах.

Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Максимальная ширина контейнера	None (auto)	540px	720px	960px	1140px
Префикс класса	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Число колонок	12
Ширина отступа	30px (15px с каждой стороны столбца)
Может быть вложенным	Да
Упорядочивание колонок	Да

Автоматическое расположение с помощью колонок

Используйте классы колонок со специальными контрольными точками (например, .col-sm-6 ) для легкого расположения колонок без использования явно обозначенных номеров классов.

Равная ширина

Например, здесь мы видим две сетки, которые подойдут к любому устройству и зоне видимости, от xs до xl . Добавляйте любое количество простых классов для каждого брейкпойнта, и каждая колонка будет одинаковой ширины.

Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.

Пример

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

Новичок или незнаком с flexbox? Прочитайте руководство CSS Tricks flexbox для получения справочной информации, знакомтва с терминологией, рекомендациями и фрагментовами кода.

Как это устроено

Разберём как работает сеточная система:

Наша сетка поддерживает шесть отзывчивых контрольных точек. Контрольные точки основаны на медиа-запросах min-width , то есть они влияют на эту точку останова и на все те, которые находятся над ней (например, .col-sm-4 и применяется к md , lg , xl и xxl ). Это означает, что вы можете контролировать размер контейнера и столбцов в каждой контрольной точке.

Контейнеры располагаются по центру и горизонтально дополняя ваш контент. Используйте .container при адаптивной ширине, .container-fluid для width: 100% на всех экранах и устройствах или в адаптивном контейнере (например, .container-md ) для сочетания адаптивности и заданной ширины.

Строки являются обертками для столбцов. Каждый столбец имеет горизонтальный padding для создания отступов между отдельными колонками. Этот padding нейтрализует строки с отрицательной полями для обеспечения визуального выравнивания содержимого в столбцах по левой стороне. Строки также поддерживают классы-модификаторы для равномерного распределения размера ширины колонок и изменения отступов вашего контента.

Невероятно гибкие столбцы. В каждой строке доступно 12 шаблонных столбцов, что позволяет создавать различные комбинации элементов, которые охватывают любое количество столбцов. Так, если вы хотите использовать четыре колонки одной ширины, используйте .col-4 . Ширина width задается в процентах, поэтому размер будет всегда одинаковый

Отступы также отзывчивы и настраиваемы. Классы отступов между столбцами доступны во всех точках останова, с такими же размерами, как наши классы полей и интервалы заполнения. Замените отступы с помощью классов .gx-* , вертикальные отступы с помощью .gy-* или все отступы с классами .g-* . Класс .g-0 также доступен для удаления отступов.

Большие возможности Sass переменных, карт и миксинов для использования в ситеме сеток. Если вы не хотите использовать предопределенные классы сеток в Bootstrap, то вы можете использовать исходники нашей Sass сетки для создания своей собственной с более семантической разметкой. Мы также включили некоторые пользовательские свойства CSS, чтобы использовать эти переменные Sass для большей гибкости в ваших проектах.

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

Система сеткок Bootstrap может адаптироваться ко всем шести контрольным точкам (брейкпойнтам) по умолчанию и любым точкам, которые вы настраиваете. Шесть уровней сетки по умолчанию следующие:

Очень маленький - Extra small (xs)
Маленький - Small (sm)
Средний - Medium (md)
Большой - Large (lg)
Очень большой - Extra large (xl)
Огромный - Extra extra large (xxl)

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

xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Контейнер max-width	None (auto)	540px	720px	960px	1140px	1320px
Префикс класса	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
Число колонок	12
Ширина отступа	1.5rem (.75rem слева и справа)
Переопределение отступа	Да
Может быть вложенным	Да
Упорядочивание колонок	Да

Авторазметка столбцов

Используйте специфичные для контрольных точкек классы столбцов для простого определения размера столбцов без явной пронумации класса, такого как например .col-sm-6 .

Равная ширина

Например, здесь мы видим две сетки, которые подойдут к любому устройству и зоне видимости, от xs до xxl . Добавляйте любое количество простых классов для каждой контрольной точки, и каждая колонка будет одинаковой ширины.

Читайте также: