Сетка Bootstrap 4 – это, пожалуй, самое “вкусное” в этом фреймворке, т.к. именно из-за сетки с ее адаптивными возможностями Bootstrap стал самой популярной системой для верстки. И, если в 3-й версии Bootstrap колонки с точки зрения css базировались на свойстве float: left, то в 4-ой версии основой разбиения блока на колонки стала модель Flexbox.
Классы-контейнеры
Но начнем мы не с самой сетки, а с классов-контейнеров, в которые обычно помещаются колонки. Как и в BS3, эти классы имеют название .container и .container-fluid. Общее в правилах для этих классов – это отступы слева и справа в 15px (padding-left: 15px и padding-right: 15px). Отличаются же они тем, что класс .container-fluid имеет ширину в 100% и занимает все доступное пространство по ширине окна браузера, причем при любом разрешении экрана, а класс .container имеет для разных разрешений фиксированную ширину, представленную в таблице:
 Extra small <576px |
 Small ≥576px |
 Medium ≥768px |
 Large ≥992px |
 Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Максимальная ширина контейнера.container |
Нет (auto) | 540px | 720px | 960px | 1140px |
| Префикс класса | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Число колонок | 12 | ||||
| Ширина отступа | 30px (15px с каждой стороны столбца) | ||||
| Может быть вложенным | Да | ||||
| Упорядочивание колонок | Да | ||||
Стили контейнеров
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.container, .container–fluid {
width: 100%;
padding–right: 15px;
padding–left: 15px;
margin–right: auto;
margin–left: auto;
}
Изменение ширины в зависимости от ширины устройства
@media (min–width: 992px){
.container {
max–width: 960px;
}
}
@media (min–width: 768px){
.container {
max–width: 720px;
}
}
@media (min–width: 576px){
.container {
max–width: 540px;
}
}
|
Размещение колонок
Все колонки, которые вы хотите разместить в одном ряду, следует в обязательном порядке размещать в div с классом .row, т.к. именно этот класс имеет свойство display: flex.
Чтобы создать несколько колонок одинаковой ширины, достаточно назначить элементу div класс .col. Вы не увидите особых изменений и перестраивания колонок при уменьшении экрана. Основными правилами для этого класса являются:
|
1
2
3
4
5
|
.col {
flex–basis: 0;
flex–grow: 1;
max–width: 100%;
}
|
Поэтому только при значительном уменьшении экрана колонки перестраиваются.
Колонки для всех устройств
Также можно использовать классы, которые делят пространство контейнера на равные части, исходя из 12 колонок в нем. Например, 3 колонки с классами .col-4 или 2 колонки с классами .col-6, или 6 колонок с классами .col-2 и т.п. Также можно использовать эти классы в другом сочетании, например, класс .col-9 и класс .col-3. Минусом этого варианта построения сетки является то, что колонки остаются колонками при любом разрешении экрана и не перестраиваются в одну даже на смартфонах. Поэтому в таблице выше этот класс указан для создания колонок для extra-small (очень маленьких) устройств.
Стили классов .col-* будут выглядеть примерно так:
|
1
2
3
4
5
6
|
.col–4 {
–webkit–box–flex: 0;
–ms–flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max–width: 33.333333%;
}
|
Изменяться будут только значения свойств flex-basis (последняя цифра свойства flex) и max-width в зависимости от цифры (чем меньше цифра, тем больше значения свойств).
В основе примера ниже лежит следующая разметка:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<div class=“container”>
<div class=“row”>
<div class=“col-9”>
Main content
</div><!— /.col–9 —>
<div class=“col-3”>
Sidebar
</div><!— /.col–3 —>
</div><!— /.row —>
<footer>
<div class=“row”>
<div class=“col-4”>
Footer column–1
</div><!— /.col–4 —>
<div class=“col-4”>
Footer column–2
</div><!— /.col–4 —>
<div class=“col-4”>
Footer column–3
</div><!— /.col–4 —>
</div><!— /.row —>
</div><!— /.container —>
|
В разметке на вкладке html вы найдете дополнения в виде цветовых классов и классов отступов, которые нужны для оформления внешнего вида примера, но далеко не всегда используются в реальной разметке.
See the Pen Bootstrap 4 .col-* class by Elen (@ambassador) on CodePen.dark
Классы адаптивной сетки
И, наконец, мы добрались до классов, которые перестаиваются в зависимости от разрешения экрана. Собственно, они уже были представлены в таблице. Все классы начинаются со слова col (от англ. column – столбец или колонка) и префикса -xl-, -lg-, -md-, -sm-, после которого идет цифра. Цифра получается путем деления 12 (максимальное количество столбцов в сетке Bootstrap) на нужное вам количество колонок. Например, для 2-х колонок равной ширины вам понадобятся классы с цифрой 6 в конце (12:2=6), для 3-х колонок – классы с цифрой 4 (12:3=4), для 4-х колонок – классы с цифрой 3 (12:4=3), для 6-и колонок – классы с цифрой 2 (12:6=2).
Для выбора нужного варианта префикса вам необходимо определиться, на каком разрешении вы хотите иметь определенное количество колонок.
Рассмотрим их применение для 3-хколоночного макета. Нам понадобится 3 колонки с классами .col-xl-4, .col-lg-4, .col-md-4 и .col-sm-4. Если уменьшать размер экрана, то все колонки будут перестраиваться в одну. Вот только произойдет это на разных разрешениях. Позже всех перестроятся в один столбец div-ы с классами .col-sm-4.
See the Pen Bootstrap 4 Grid by Elen (@ambassador) on CodePen.dark
Вы можете посмотреть на внешний вид колонок в отдельном файле, изменяя размер окна браузера или с помощью Device Toolbar в инспекторе свойств браузера Chrome или Firefox.
Если вы хотите разделить внутреннее пространство одной из колонок на части, вам нужно также исходить из того, что ширина родительского элемента для дочерних делится на 12 колонок. Соответственно, вы формируете классы, исходя из того, сколько колонок вам нужно: если 2, то используете классы col-6, если 3, то классы col-4 и т.п., помещаете их внутри класса row, но при этом блок .row колонок находится внутри родительского элемента.
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<div class=“container”>
<div class=“row”>
<div class=“col-sm-8”>
<h2>Основной контент</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, aliquid. ?</p>
<p>Mollitia eaque velit cumque, maxime dolore iure. Dicta quam commodi illo.</p>
<h3>Деление на колонки</h3>
<div class=“row”>
<div class=“col-sm-6”>
<h4>Внутренняя колонка</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
<p>Esse, eligendi, ducimus nihil repellendus, sapiente accusamus ?</p>
</div><!— /.col–sm–6 —>
<div class=“col-sm-6”>
<h4>Внутренняя колонка</h4>
<p>Voluptatibus corporis similique a nam laudantium rem. Error ipsum numquam.</p>
<p>Eaque cupiditate quod soluta nostrum accusamus minus, ea assumend.</p>
</div><!— /.col–sm–6 —>
</div><!— /.row —>
<h3>Блок контента</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptates ipsam?</p>
<p>Facilis magni, nobis reiciendis iste eum ipsum! Repellat in eligendi.</p>
<h3>Еще одно деление на колонки</h3>
<div class=“row”>
<article class=“col-sm”>
<h4>Колонка 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur ?</p>
<p>Explicabo inventore ab deleniti ipsa.</p>
</article>
<article class=“col-sm”>
<h4>Колонка 2</h4>
<p>Quam mollitia laudantium autem iusto dicta voluptates.</p>
<p>Magni doloribus expedita facilis sequi?</p>
</article>
<article class=“col-sm”>
<h4>Колонка 3</h4>
<p>Est provident porro harum cumque.</p>
<p>Quaerat cupiditate eius repellat.</p>
</article>
</div>
</div><!— /.col–sm–8 —>
<div class=“col-sm-4”>
<h2>Боковая колонка</h2>
<ul class=“list-unstyled”>
<li><a href=“#”>Элемент меню</a></li>
<li><a href=“#”>Элемент меню</a></li>
</ul>
<h4>Архив</h4>
<div class=“row”>
<div class=“col-md-6”>
<ul class=“list-unstyled”>
<li>2011</li>
<li>2012</li>
<li>2013</li>
</ul>
</div>
<div class=“col-md-6”>
<ul class=“list-unstyled”>
<li>2014</li>
<li>2015</li>
<li>2016</li>
</ul>
</div>
</div>
</div><!— /.col–sm–4 —>
</div><!— /.row —>
</div><!— /.container —>
|
See the Pen Внутренние колонки Bootstrap 4 by Elen (@ambassador) on CodePen.dark
Колонки разной ширины
Для построения колонок разной ширины вам, как правило, придется исходить из цифры 12, которую в сумме должны составлять колонки разных классов. Например, .col-sm-8 и .col-sm-4 или .col-sm-2 и .col-sm-10, если вы делаете двухколоночный макет. Для трехколоночного макета можно использовать такие сочетания классов: .col-md-3 и .col-md-6 и .col-md-3 или .col-md-3 и .col-md-7 и .col-md-2.
See the Pen Bootstrap 4 2-column Grid by Elen (@ambassador) on CodePen.dark
Ссылка на документацию
В Bootstrap-4 существует много вариантов использования классов сетки, которое мы рассмотрим в другой статье.
(Пока оценок нет)
Загрузка...