Содержание
Сетка Bootstrap состоит из 12 колонок, так как число 12 делится на большое количество чисел без остатка. Деление на числа 2, 3, 4, 6, 12, позволяет получить много вариантов равных частей. Для верстки любого макета, 12 колонок вполне достаточно. Основу сетки Bootstrap составляют 3 обязательных класса, по аналогии с табличными тегами.
.container —>
| // колонка, где x будет с разными значениями |
Классический пример сетки с двумя колонками.
Контейнеры в Bootstrap 4
Сетка должна быть обернута в класс .container или .fluid-container. В чем разница? Класс .container задает фиксированную ширину. Это значит, что при увеличении размеров экрана, блоки не будут растягиваться на всю ширину страницы.
Класс .fluid-container будет тянуть блоки на всю ширину страницы, как резина.
Ряды в Bootstrap 4
Внутри одного контейнера можно создавать сколько угодно рядов.
Колонки в Bootstrap 4
Название колонки всегда начинается с col, комбинация символов после дефиса – это сокращенное название ширины экрана у девайсов.
.col- // extra small ( 1200px) для больших десктопов
После размера ширины экрана, указывается количество колонок. Сколько колонок будут занимать блоки на страницах.
.col-sm-6 // на маленьких экранах блок займет 6 колонок
.col-lg-3 // на большом экране тот же блок займет 3 колонки
В HTML разметке мы прописываем блоку, сколько ему колонок занимать на маленьком и большом экране.
Ширина колонок
Пример ниже демонстрирует, как зависит ширина колонки от размеров экрана. Сколько конкретно пикселей приходится на одну колонку от самых маленьких до самых больших экранов, высчитывается браузером автоматически. Поскольку в CSS правилах фреймворка, ширина колонок указана в %. Иначе говоря, такой показатель, как ширина колонок, нас вообще не должен беспокоить.
Как получить 5 колонок одинаковой ширины?
Для этого есть специальный класс .col.
Мощная система гибких сеток для мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и десятков предустановленных классов.
Как это устроено
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
В данном примере с помощью наших предустановленных классов сеток были созданы 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 .col- .col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
|
|
|---|---|---|---|---|---|
| Число колонок | 12 | ||||
| Ширина отступа | 30px (15px с каждой стороны столбца) | ||||
| Может быть вложенным | Да | ||||
| Упорядочивание колонок | Да | ||||
Автоматическое расположение с помощью колонок
Используйте классы колонок со специальными контрольными точками (например, .col-sm-6 ) для легкого расположения колонок без использования явно обозначенных номеров классов.
Равная ширина
Например, здесь мы видим две сетки, которые подойдут к любому устройству и зоне видимости, от xs до xl . Добавляйте любое количество простых классов для каждого брейкпойнта, и каждая колонка будет одинаковой ширины.
Поработав с множеством верстальщиков, которые используют в верстке bootstrap, я понял, что многие из них либо не умеют работать с bootstrap, либо не умеют читать документацию к нему. В результате получает средненькая верстка с кучей лишних тегов и бессмысленных переопределений стилей самого бутстрапа.
Это статья для тех, кто хочет научиться писать красивый чистый код, быстро сдавать свои проекты заказчикам и начальникам и не быть поруганным программистами.
Итак в данном посте я привожу небольшую памятку, которая поможет разобраться как правильно использовать сетку в бутстрапе, в каком порядке ставить стили .container, .container-fluid, .row, как сделать фон на всю ширину в bootstrap и как разбить колонку ещё на две колонки: