Система сеток
Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.
Как это устроено
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
Если вы не знакомы с flexbox, то ознакомьтесь с руководством по флексбоксу CSS Tricks чтобы получить справочную информацию, термины, рекомендаций и фрагменты кода.
<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
.
Вот как это работает:
- Инструмент для центровки контента сайта. Используйте класс
.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 для создания своей разметки.
Знайте об ограничениях и багах, существующих во флексбоксах, таких как невозможность использования некоторых элементов HTML как гибкие контейнеры.
Параметры сеток
Бутстрап использует 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
. Добавляйте любое количество простых классов для каждого брейкпойнта, и каждая колонка будет одинаковой ширины.
<div class="container">
<div class="row">
<div class="col">
1 из 2
</div>
<div class="col">
2 из 2
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col">
2 из 3
</div>
<div class="col">
3 из 3
</div>
</div>
</div>
Мультиряд одинаковой ширины
Чтобы создавать столбцы равной ширины, которые занимают несколько строк, добавьте .w-100
в любом месте, чтобы перенести столбцы на новую строку. Сделайте разрыв отзывчивым, смешав .w-100
с некоторыми адаптивными утилитами отображение элементов.
Столбцы одинаковой ширины могут быть разбиты на несколько строк, но была ошибка флексбокса Safari которая мешала этому работать без явного основания flex-basis
или border
. Есть обходные пути для более старых версий браузера, но они не не нужны, если вы обновили версию.
<div class="container">
<div class="row">
<div class="col">Колонка</div>
<div class="col">Колонка</div>
<div class="w-100"></div>
<div class="col">Колонка</div>
<div class="col">Колонка</div>
</div>
</div>
Установка ширины одной колонки
Авто-расположение колонок в сетке флексбокса также дает возможность установить ширину одной колонки, при этом остальные «родственные» колонки автоматически изменят свой размер вокруг нее. Вы можете использовать предустановленные классы сеток (как показано внизу), миксины или инлайн-ширину. Заметим, что другие колонки будут изменять размер независимо от ширины центральной колонки.
<div class="container">
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-6">
2 из 3 (широкая)
</div>
<div class="col">
3 из 3
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-5">
2 из 3 (широкая)
</div>
<div class="col">
3 из 3
</div>
</div>
</div>
Содержимое адаптивной ширины
Используйте классы col-{breakpoint}-auto
для создания колонок, изменяющих свою ширину по ширине содержимого.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 из 3
</div>
<div class="col-md-auto">
Содержимое адаптивной ширины
</div>
<div class="col col-lg-2">
3 из 3
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-md-auto">
Содержимое адаптивной ширины
</div>
<div class="col col-lg-2">
3 из 3
</div>
</div>
</div>
Адаптивные классы
Сетка Bootstrap включает 5 «ярусов» предопределенных классов, используемых для построения сложного адаптивного контента. Адаптируйте размеры своих колонок для правильного их отображения на всех видах и размерах устройств.
Все брейкпойнты
Для сеток, которые выглядят и располагаются одинаково на всех устройствах любого размера, используйте классы .col
и .col-*
. Определите именованный класс с цифрой, когда вам нужна колонка определенного размера, во всех остальных случаях свободно пользуйтесь .col
.
По горизонтали
Используя один набор из классов .col-sm-*
, вы можете создать базовую сетку, которая вначале сложена по вертикали, а потом ее колонки становятся горизонтальными (на экстрамалых девайсах).
Ищите и создавайте нужное
Не хотите, чтобы ваши колонки шли в одном порядке? Используйте комбинацию разных классов для каждого яруса. Смотрите пример внизу.
Пробелы между колонками
Пробелы между колонками могут быть оперативно отрегулированы с помощью специфических для точки останова отступов и классов полезности отрицательного поля. Чтобы изменить желоба в данной строке, объедините утилиту отрицательного поля в .row
и соответствующие утилиты заполнения в .col
. Родитель .container
или .container-fluid
, возможно, также необходимо настроить, чтобы избежать нежелательного переполнения, используя снова подходящую утилиту заполнения.
Вот пример настройки сетки Bootstrap на большой (lg
) точке останова и выше. Мы увеличили заполнение .col
с помощью .px-lg-5
, противодействовали этому с .mx-lg-n5
на родительском .row
, а затем скорректировали обертку .container
с помощью .px-lg-5
.
Строка столбцов
Используйте отзывчивые классы .row-cols-*
, чтобы быстро установить количество столбцов, которые лучше всего отображают ваш контент и макет. В то время как нормальные классы .col-*
применяются к отдельным столбцам (например, .col-md-4
), классы столбцов строк устанавливаются в родительском .row
как ярлык.
Используйте эти классы, чтобы быстро создавать базовые макеты сеток или управлять вашими макетами.
Вы также можете использовать прилагаемый Sass mixin, row-cols()
:
Выравнивание
Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет min-height
, как показано ниже. Смотрите Flexbugs # 3 для более подробной информации.
Вертикальное выравнивание
<div class="container">
<div class="row align-items-start">
<div class="col">
Одна из трёх колонок
</div>
<div class="col">
Одна из трёх колонок
</div>
<div class="col">
Одна из трёх колонок
</div>
</div>
<div class="row align-items-center">
<div class="col">
Одна из трёх колонок
</div>
<div class="col">
Одна из трёх колонок
</div>
<div class="col">
Одна из трёх колонок
</div>
</div>
<div class="row align-items-end">
<div class="col">
Одна из трёх колонок
</div>
<div class="col">
Одна из трёх колонок
</div>
<div class="col">
Одна из трёх колонок
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
Одна из трёх колонок
</div>
<div class="col align-self-center">
Одна из трёх колонок
</div>
<div class="col align-self-end">
Одна из трёх колонок
</div>
</div>
</div>
Горизонтальное выравнивание
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
Одна из двух колонок
</div>
<div class="col-4">
Одна из двух колонок
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
Одна из двух колонок
</div>
<div class="col-4">
Одна из двух колонок
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
Одна из двух колонок
</div>
<div class="col-4">
Одна из двух колонок
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
Одна из двух колонок
</div>
<div class="col-4">
Одна из двух колонок
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
Одна из двух колонок
</div>
<div class="col-4">
Одна из двух колонок
</div>
</div>
</div>
Без пробелов между колонками
Пробелы между колонками в наших предустановленных классах можно удалить с помощью класса .no-gutters
, который удаляет отрицательный марждин margin
из .row
и горизонтальный паддинг padding
из всех колонок.
Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута. Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через Отступы.
Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс .container
или .container-fluid
.
Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, «отзывчивые» ярусы, переопределения и прочее).
Обертка колонки
Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.
Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит.
Последующие столбцы продолжаются вдоль новой строки.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит.</div>
<div class="col-6">.col-6<br>Последующие столбцы продолжаются вдоль новой строки.</div>
</div>
Разрывы колонок
Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с width: 100%
туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных .row
, но не каждый исполнительный метод может это поддержать.
Вы можете также применять это в брейкпойнтах с нашими утилитами отображения элементов.
Изменение порядка элементов
«Гибкий» порядок
Используйте классы .order-
- для контроля над визуальным порядком вашего контента. Эти классы «отзывчивы», так что вы можете задать порядок с помощью order
брейкпойнта (например, .order-1.order-md-2
). Он поддерживает 1
для 12
через все 5 ярусов.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Также существует отзывчивый класс .order-first
, который быстро изменяет порядок одного элемента применением свойства order: -1
. Этот класс также может применяться с нумерованными классами order-*
.
<div class="container">
<div class="row">
<div class="col">
Первый, но неупорядоченный
</div>
<div class="col">
Второй, но неупорядоченный
</div>
<div class="col order-first">
Третий, но первый
</div>
</div>
</div>
Смещающиеся колонки
Вы можете смещать колонки сетки двумя путями: с помощью отзывчивых классов .offset-
и с помощью наших утилит марджинов. Классы сетки созданы так, чтобы совпадать с колонками, а марджины удобней для быстрого расположения элементов там, где ширина офсета непостоянна.
Смещающиеся классы
Двигайте колонки вправо, используя классы .offset-md-*
. Они увеличивают левый марджин колонки на *
колонок. Например, класс .offset-md-4
двигает .col-md-4
на 4 колонки.
В дополнение к «сбросу» колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.
Отодвигая колонки
В БС4, по сравнению с БС3, больше нет офсетных классов v3. Вместо них используйте утилиты марджина, такие как .mr-auto
, чтобы заставить «детские» колонки отодвинуться одна от другой.
Вложенность
Чтобы вложить ваш контент в сетку по умолчанию, добавьте новый класс .row
и набор колонок .col-sm-*
внутри существующей колонки .col-sm-*
. Вложенные ряды должны включать набор колонок, которые добавляется к 12-ти или просто нескольким (не обязательно, чтобы вы использовали все 12 возможных колонок).
«Примеси» SASS
Используя исходные файлы Sass препроцессоров БС, вы имеете возможность использования переменных и «смесей» Sass для создания понятных и «отзывчивых» страниц. Наши предустановленные классы сеток используют эти же файлы и «миксины», получая готовые классы для быстрой адаптивной верстки.
Переменные
Переменные и карты определяют число колонок, ширину отступа и контрольную точку медиа-вызова, на которой колонки начинают вести себя как плавающие. Мы используем эти фичи, чтобы генерировать предустановленные классы сетки, которые описаны выше, и миксины, описанные ниже.
«Примеси»
Миксины используются в сочетании с переменными сеток для генерации семантического CSS для колонок индивидуальных сеток.
Пример использования
Вы можете изменять переменные как вам надо, или просто использовать миксины со значениями по умолчанию. Вот пример использования миксинов, настроенных по умолчанию, для создания двух-колоночного содержимого с разрывом между колонками.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Настройка сеток
Изменяя встроенные переменные SASS и карты сеток, возможно полностью перенастроить предопределенные классы сеток. Изменяйте количество ярусов, расширения медиаочередей, ширину контейнеров – компилируйте и пользуйтесь.
Колонки и пробелы между ними
Число колонок сетки может быть изменено через переменные SASS. Используйте $grid-columns
для генерации ширины (в %) каждой отдельной колонки, а $grid-gutter-width
позволяет создавать особые ширины для точек брейкпойнтов отступов колонок, которые разделены ровно через padding-left
и padding-right
.
«Ярусы» сеток
Вы может также настроить число ярусов сеток. Если вы хотите, к примеру, 4 яруса, настройте $grid-breakpoints
и $container-max-widths
так:
Внося изменения в переменные SASS или карты, вам необходимо сохранять изменения и компилировать заново. Это позволит создать абсолютно новый набор предустановленных классов сеток с новыми параметрами ширины и порядка колонок. Инструменты «отзывчивой» видимости также обновятся. Обязательно задайте значения сетки в px
(не в rem
или em
и не в %
).