Основы Bootstrap 4 — руководство для начинающих по использованию сетки

Bootstrap4 grid - руководство для начинающих

Bootstrap4 - это мощное решение для построения адаптивных веб интерфейсов. В основе bootstrap4 лежит технология flexbox grid способная избавить веб разработчиков от множества проблем связанных с адаптивной версткой.

bootstrap 4 как работает

Как это работает

-Bootstrap контейнеры используются для корректной работы bootstrap сетки и центрирования контента. Используйте .container как обертку для фиксированной ширины или .container-fluid для полной ширины.

-Bootstrap row(строки) - горизонтальные группы для bootstrap колонок. Используйте .row как обертку над bootstrap блоками для корректной работы bootstrap сетки.

-Благодаря flexbox ширина bootstrap столбцов вычисляется автоматически. Например, четыре столбца .col-sm будут автоматически иметь ширину 25%.

-Классы bootstrap блоков определяют какое количество колонок будет присвоено текущему столбцу из общей ширины 12-ти колоночной bootstrap сетки. Например три блока с классом col-md-4 займут в сумме двенадцать колонок.

-По умолчанию bootstrap колонки и строки(.row) имеют внешние и внутренние отступы. Чтобы сбросить все отступы необходимо добавить класс no-gutters блоку .row

-5-ти уровневая bootstrap сетка отлично поддерживает: очень маленькие, маленькие, средние, большие и очень большие дисплеи.

Bootstrap4 grid

Bootstrap4 grid

Bootstrap4 - Блоки с автоматической компоновкой

Используйте класс col без постфикса для создания bootstrap блоков одинаковой ширины.

bootstrap4

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

Bootstrap4 - Установка ширины блока

Используйте классы с постфиксом (col-*) если хотите задать ширину bootstrap столбцу. Если ширина одного bootstrap блока будет больше другого, то он автоматически перейдет на новую строку.

bootstrap 4

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Bootstrap4 - Многоуровневое расположение блоков

Используйте класс (w-100) для переноса bootstrap столбцов.

bootstrap4

<div class="container">
  <div class="row">
	<div class="col">col1</div>
	<div class="col">col2</div>
	<div class="w-100"></div>
	<div class="col">col3</div>
	<div class="col">col4</div>
  </div>
</div>

Bootstrap4 - Отзывчивые блоки

Класс (col-sm) без постфикса задает bootstrap блокам равную ширину. Как только размер вьюпорта достигнет пересечения в 576px(Обратите внимание, что размер 576px является границей. Следовательно перестроение bootstrap блоков произойдет на 575px), bootstrap колонки примут ширину во весь экран на небольших устройствах.

Аналогично работает класс (col-sm-*) с постфиксом, для присваивания размеров bootstrap колонкам. Достигая размера в 575px, bootstrap блоки располагаются на всю ширину. Следует отметить, что блоки (col-sm-8 и col-sm-4) в сумме дают 12. Если один из них превысит этот порог, то произойдет перенос.

bootstrap4

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Bootstrap4 - Смешанные режимы

Используйте смешанные классы для большей гибкости! Обратите внимание на класс (col-md) который предназначен для корректного отображения на средних дисплеях. Пересекая порог в 768px, на 767px bootstrap блок теряет свои параметры, где в работу вступает класс (col).

bootstrap4

<div class="container">
<div class="row">
  <div class="col col-md-8">.col .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
</div>

Bootstrap4 - Выравнивание

Для выравнивания bootstrap колонок по вертикали используются классы:

(align-items-start) - выравнивание по верху
(align-items-center) - выравнивание по центру
(align-items-end) - выравнивание по низу

bootstrap4

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Для выравнивания конкретного элемента используйте классы:

(align-self-start)
(align-self-center)
(align-self-end)

bootstrap4

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

За горизонтальное выравнивание отвечают классы:

(justify-content-start) - Выравнивание по левому краю
(justify-content-center) - Выравнивание по центру
(justify-content-end) - Выравнивание по правому краю
(justify-content-center) - Выравнивание по центру
(justify-content-around), (justify-content-between) - Разносторонее выравнивание

bootstrap4

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Bootstrap4 - Сбрасывание отступов

Использование класса (no-gutters) к bootstrap строкам(row) позволяет избавится от внешних(margin) отступов у родителя и внутренних(padding) отступов у дочерних bootstrap блоков.

Для более гибкого управления отступами переопределите следующий код и измените bootstrap 4 стили под ваши нужды:

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

bootstrap4

<div class="container">
<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

Bootstrap4 - Смещения

Используйте класс(offset) для смещения bootstrap блоков и расчистки пространства.
bootstrap4

<div class="container">
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>

bootstrap4

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Bootstrap4 - Порядок

Меняйте bootstrap колонки местами используя классы (push-* и pull-*)

bootstrap4

<div class="container">
<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>
</div>

Или используйте специлизированный классы для изменения порядка:

(flex-unordered, flex-last, flex-first)

bootstrap4

<div class="container">
  <div class="row">
    <div class="col flex-unordered">
      First, but unordered
    </div>
    <div class="col flex-last">
      Second, but last
    </div>
    <div class="col flex-first">
      Third, but first
    </div>
  </div>
</div>

Bootstrap4 - Вложенные блоки

bootstrap4

<div class="container">
  <div class="row justify-content-center">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
</div>

Читайте также:

комментария 2

  1. с флексом бутстрап пофункциональнее стал. Офсетами можно практически не пользоваться даже. Хотя я и раньше их не часто применял, обходился как-то

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *