Система сеток
Используйте нашу мощную сетку flexbox, ориентированную на мобильные устройства, для создания макетов всех форм и размеров благодаря системе из двенадцати колонок, шести адаптивным уровням по умолчанию, переменным и миксинам Sass, а также десяткам предопределенных классов.
На этой странице
Пример
Система сеток Bootstrap использует серию контейнеров, строк и колонок для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное объяснение того, как объединяется сетка.
Новичок или незнаком с flexbox? Прочтите это руководство по flexbox на CSS Tricks для получения справочной информации, терминологии, рекомендаций и фрагментов кода.
div class="container"> div class="row"> div class="col"> Колонка div> div class="col"> Колонка div> div class="col"> Колонка div> div> div>В приведенном выше примере создаются три колонки одинаковой ширины на всех устройствах и в окнах просмотра с использованием наших предопределенных классов сетки. Эти колонки центрируются на странице с родительским .container .
Как это устроено
Вот как объединяется сетка:
- Наша сетка поддерживает шесть адаптивных контрольных точек. Контрольные точки основаны на медиа-запросах min-width , то есть они влияют на эту контрольную точку и все вышеперечисленные (например, .col-sm-4 применяется к sm , md , lg , xl и xxl ). Это означает, что Вы можете управлять размером и поведением контейнера и колонки с помощью каждой контрольной точки.
- Контейнеры центрируют и размещают Ваш контент по горизонтали. Используйте .container для адаптивной ширины в пикселях, .container-fluid для width: 100% во всех окнах просмотра и на всех устройствах или адаптивный контейнер (например, .container-md ) для комбинации подвижной и пиксельной ширины.
- Ряды (rows) являются оболочками для колонок. Каждая колонка имеет горизонтальный 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 | sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
| Контейнер max-width | Ничего (авто) | 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 . Добавьте любое количество классов без единиц измерения для каждой нужной контрольной точки, и каждая колонка будет одинаковой ширины.
Сетка — Bootstrap 5: Основы верстки
Сетка — главный компонент фреймворка Bootstrap. Разные проекты подключают Bootstrap только для возможности использовать сетку. Действительно, система сеток уже давно отработана на сотнях проектов и отлажена.
Понимание работы сетки в Bootstrap — важнейший навык при работе. Поняв хитрости построения шаблонов, вы сможете делать сложные макеты и не прибегать к ненужным дописываниям стилей.
Из курса по Grid вы знаете, что сетка — система линий, по которым выстраивается контент внутри шаблона. Эти линии являются невидимыми. Взгляните на шаблон блога Хекслета. На изображении указана сетка проекта. Темными линиями обозначены колонки, а оранжевыми отступы между колонками. Изучите этот пример и найдите закономерности того, как выстроен контент внутри блога.
Сетки в Bootstrap отвечают за раскладку блоков и за адаптивность. Сетка определяет, как на разных разрешениях будут отображаться контентные блоки.
Сетку можно разбить на три составные части:
- Контейнер
- Строки
- Колонки
В качестве примера используем код с использованием сетки Bootstrap:
class="container"> class="row"> class="col"> Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. В этой разметке демонстрируется подход контейнер → строка → колонка. Добавив текст в колонку с классом .col, получится следующий макет:
Визуально кажется, что ничего особого не произошло, а текст вывелся так, как если бы не добавлялись контейнеры, строки, столбцы. Но это не так! Уже запущен механизм адаптивной сетки и выстраивание колонок. Добавим еще одну колонку с тем же текстом:
class="container"> class="row"> class="col"> Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. class="col"> Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. Получились две колонки одинаковой ширины. Настало время повнимательнее изучить те классы, которые описаны в HTML.
container
Контейнер является ключевым элементом сетки Bootstrap. Главная задача контейнера — ограничение ширины контента. По умолчанию, контент в Bootstrap имеет максимальную ширину в 1140 пикселей. Это условие обуславливается доступностью: в этих рамках текст органично располагается по ширине и вмещает примерно 120 символов. Большее количество символов труднее читать, так как глазу сложнее перемещаться между строчками.
Это ограничение можно обойти. Для этого в Bootstrap используется класс .container-fluid, который не ограничивает ширину контента внутри себя. Двухколоночный макет из примера выше при использовании .container-fluid будет выглядеть следующим образом:
Внутри себя контейнер хранит элементы любых видов. Это не обязательно должны быть строки. Если для элементов сетка не нужна, то не стоит создавать строку с одним единственным элементом внутри.
Важно: не вкладывайте контейнер внутри контейнера. Это плохая практика. При необходимости в нескольких контейнерах, вместо вкладывания друг в друга разделите их. Если в процессе разметки заметили, что нужен контейнер в контейнере, то успокойтесь, попейте кофе и пересмотрите подход.
row
Как и в таблицах, строки — неотъемлемый атрибут столбцов. В Bootstrap строка берет на себя роль flex-контейнера, внутри которой будут располагаться flex-элементы столбцы. Если пропустить обертку, то столбцы перестанут работать.
Класс .row имеет следующие стили:
.row display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; >Интересным здесь является использование отрицательных внешних отступов. Данный прием используется по причине того, что колонки внутри Bootstrap имеют внутренние отступы, которые отделяют колонки друг от друга на фиксированное значение в 30 пикселей. Чтобы компенсировать отступы слева и справа и не образовать лишние отступы у первого и последнего элемента в строке используются отрицательные отступы у контейнера, которым является .row.
Внутри .row содержатся только колонки! Это гарантирует правильную вложенность и возможность создавать адаптивность. Сторонние элементы выносятся за пределы .row.
Так как .row flex-контейнер, то к нему возможно применять доступные свойства, описанные в курсе Flex
col и col-*
В примере с двухколоночным макетом использовался класс .col, который равномерно распределяет пространство между колонками с такими классами внутри контейнера .row. В макетах такая операция часто не нужна, а необходимо дать блокам свое количество колонок. Bootstrap — 12-колоночная система. Из этого следует, что помимо класса .col при создании сетки доступны 12 классов вида .col-*, где \* — количество колонок, которые займет элемент.
class="container"> class="row"> class="col-4"> Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. class="col-8"> Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. В этом примере первая часть текста получила 4 колонки из 12, вторая же часть текста получила 8 колонок из 12. Bootstrap автоматически переносит колонки, если суммарно они занимают больше 12 частей. Если в строке меньше колонок, то при добавлении нового элемента можно забыть этот момент.
Можно комбинировать класс .col с классами .col-\*. Это позволит ограничивать только необходимую часть, автоматически просчитывая место для колонки с классом .col. Например, создавая двухколоночный макет, указывается col-\* для сайдбара и .col для контентной части.
class="container"> class="row"> class="col-3"> class="col"> Внутри колонок, как вы можете догадаться, может лежать абсолютно любой контент. В роли колонки так же может выступать любой элемент.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Система сеток
Мощная система гибких сеток для мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и десятков предустановленных классов.
Как это устроено
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
class="container"> class="row"> class="col-sm"> Одна из трёх колонок class="col-sm"> Одна из трёх колонок class="col-sm"> Одна из трёх колонок В данном примере с помощью наших предустановленных классов сеток были созданы 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 |
 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 для получения справочной информации, знакомтва с терминологией, рекомендациями и фрагментовами кода.
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
div class="container"> div class="row"> div class="col-sm"> Одна из трёх колонок div> div class="col-sm"> Одна из трёх колонок div> div class="col-sm"> Одна из трёх колонок div> div> div>В данном примере с помощью наших предустановленных классов сеток были созданы 3 колонки равной ширины для маленьких, средних и больших девайсов. Эти колонки выровнены с помощью родительского класса .container .
Как это устроено
Разберём как работает сеточная система:
- Наша сетка поддерживает шесть отзывчивых контрольных точек. Контрольные точки основаны на медиа-запросах 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 | 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 . Добавляйте любое количество простых классов для каждой контрольной точки, и каждая колонка будет одинаковой ширины.