Как устроена сетка Bootstrap
Сетка Bootstrap состоит из 12 колонок, так как число 12 делится на большое количество чисел без остатка. Деление на числа 2, 3, 4, 6, 12, позволяет получить много вариантов равных частей. Для верстки любого макета, 12 колонок вполне достаточно. Основу сетки Bootstrap составляют 3 обязательных класса, по аналогии с табличными тегами.
.container --> <table> // контейнер
.row --> <tr> // ряд
.col-x-x --> <td> // колонка, где x будет с разными значениями
Классический пример сетки с двумя колонками.
<div class="container">
<div class="row">
<div class="col-sm-6">
Первая колонка
</div>
<div class="col-sm-6">
Вторая колонка
</div>
</div>
Контейнеры в Bootstrap 4
Сетка должна быть обернута в класс .container или .fluid-container. В чем разница? Класс .container задает фиксированную ширину. Это значит, что при увеличении размеров экрана, блоки не будут растягиваться на всю ширину страницы.
Класс .fluid-container будет тянуть блоки на всю ширину страницы, как резина.
Ряды в Bootstrap 4
Внутри одного контейнера можно создавать сколько угодно рядов.
<div class="container">
<div class="row">
<div class="col-md-12">
Шапка
</div>
<div class="row">
<div class="col-md-8">
Контент
</div>
<div class="col-md-4">
Колонка справа
</div>
<div class="row">
<div class="col-md-12">
Подвал
</div>
</div>
Колонки в Bootstrap 4
Название колонки всегда начинается с col, комбинация символов после дефиса – это сокращенное название ширины экрана у девайсов.
.col- // extra small (<576px) для мобильных
.col-sm // small
.col-md // medium
.col-lg // large
.col-xl // extra large (>1200px) для больших десктопов
После размера ширины экрана, указывается количество колонок. Сколько колонок будут занимать блоки на страницах.
.col-sm-6 // на маленьких экранах блок займет 6 колонок
.col-lg-3 // на большом экране тот же блок займет 3 колонки
В HTML разметке мы прописываем блоку, сколько ему колонок занимать на маленьком и большом экране.
<div class="col-sm-6 col-lg-3"></div>
</code>
Ширина колонок
Пример ниже демонстрирует, как зависит ширина колонки от размеров экрана. Сколько конкретно пикселей приходится на одну колонку от самых маленьких до самых больших экранов, высчитывается браузером автоматически. Поскольку в CSS правилах фреймворка, ширина колонок указана в %. Иначе говоря, такой показатель, как ширина колонок, нас вообще не должен беспокоить.
Как получить 5 колонок одинаковой ширины?
Для этого есть специальный класс .col.
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
<div class="col">Column 4</div>
<div class="col">Column 5</div>
</div>
</div>
Высота колонок
А как насчет высоты, вертикального выравнивания? И здесь так же можно не волноваться. В сетке Bootstrap 4 все колонки имеют одинаковую высоту, независимо от количества контента.
Отступы у колонок
У Bootstrap есть классы для добавления отступов колонок, которые начинаются со слова offset, затем указывается величина экрана и количество колонок. Сдвинуть элемент вправо на 3 колонки.
<div class="row">
<div class="col-md-3 offset-md-3"></div>
</div>
Вложенные колонки
В колонку можно вкладывать новую сетку, где также доступны все 12 колонок. Класс .container во вложенной сетке прописывать уже не нужно, сразу создаем ряд.
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
Вложенный блок 1
</div>
<div class="col-md-6">
Вложенный блок 2
</div>
</div>
Горизонтальное выравнивание колонок
Для горизонтального выравнивание относительно главной оси, в Bootstrap есть классы:
justify-content-center // по центру
justify-content-start // в начале главной оси
justify-content-end // в конце главной оси
Заключение
Умение верстать по сетке Bootstrap, часто встречается в обязательных требованиях при трудоустройстве в профессиональные веб-студии. Дабы сберечь ваше время и нервы, настоятельно рекомендую приобрести видео-курс по Bootstrap, именно этого автора. Говорить просто о сложных вещах – это редкое, но очень ценное качество для преподавателя.
-
Создано 02.09.2019 10:41:51
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.