Сетка Bootstrap 4
Bootstrap 4 включает мощную mobile-first систему сеток для построения макетов любых форм и размеров. Сетка состоит из 12 колонок. Вы можете использовать ее с Sass миксинами и использовать классы.
Принципы работы
- Три основных компонента сетки — containers, rows, и columns
- Containers — .container имеет фиксированную ширину, .container-fluid — растягивается по ширине экрана
- Row — контейнер для столбцов
- Контент должен быть расположен внутри столбцов и только столбцы могут быть непосредственными потомками .row
- Ширина столбцов задана в процентах, так что их ширина зависит от родительского элемента
- Столбцы имеют горизонтальный padding для создания промежутков между отельными столбцами
- Вы можете использовать предустановленные классы или Sass миксины для большей семантичности разметки
Пример сетки
See the Pen Bootstrap 4 Flex Box Grid Demo by Alexey (@CreativeSeo33) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="container"> <div class="row"> <div class="col-sm-4"> One of three columns </div> <div class="col-sm-4"> One of three columns </div> <div class="col-sm-4"> One of three columns </div> </div> </div> |
В примере выше созданы три колонки одинаковой ширины с использованием предустановленных классов. Колонки расположены по центру страницы в родительском элементе
1 | .container |
.
Миксины Sass в Bootstrap 4
При использовании миксинов Sass вы можете создавать свои классы для разметки сетки. Предустановленные классы используют те же переменные и миксины.
Переменные
Переменные задают количество колонок, ширину промежутка между столбцами, и т.д. Они используются в Bootstrap 4 для создания классов сетки заданных по умолчанию и для генерации пользовательских классов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $grid-breakpoints: ( // Очень маленькие экраны / телефоны xs: 0, // Небольшие экраны / телефоны sm: 34em, // Средние экраны / планшеты md: 48em, // Большие экраны / настольные компьютеры lg: 62em, // очень большие экраны / широкоформатные мониторы xl: 75em ) !default; $grid-columns: 12; $grid-gutter-width: 1.5rem; |
Миксины
Миксины используются вместе с переменными сетки для создания пользовательских CSS классов сетки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // Миксин для элемента .row @mixin make-row($gutter: $grid-gutter-width) { margin-left: ($gutter / -2); margin-right: ($gutter / -2); @include clearfix(); } // Миксин для столбцов @mixin make-col($gutter: $grid-gutter-width) { position: relative; float: left; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); } @mixin make-col-span($columns) { width: percentage(($columns / $grid-columns)); } @mixin make-col-offset($columns) { margin-left: percentage(($columns / $grid-columns)); } @mixin make-col-push($columns) { left: percentage(($columns / $grid-columns)); } @mixin make-col-pull($columns) { right: percentage(($columns / $grid-columns)); } |
Пример использования
В Bootstrap 4 вы можете задать переменным свои значения или использовать установленные по умолчанию. Ниже пример создания двух колонок с значениями по умолчанию.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .container { max-width: 60em; @include make-container(); } .row { @include make-row(); } .content-main { @include make-col(); @media (max-width: 32em) { @include make-col-span(6); } @media (min-width: 32.1em) { @include make-col-span(8); } } .content-secondary { @include make-col(); @media (max-width: 32em) { @include make-col-span(6); } @media (min-width: 32.1em) { @include make-col-span(4); } } |
1 2 3 4 5 6 | <div class="container"> <div class="row"> <div class="content-main">...</div> <div class="content-secondary">...</div> </div> </div> |
Предустановленные классы
В Bootstrap 4 сетка имеет точно такие же классы как и в Bootstrap 3. Если у вас есть опыт работы с Bootstrap 3, то использование сетки в Bootstrap 4 не вызовет у вас никаких затруднений.
Материал основан на документации Bootstrap 4 alpha