Сетка Bootstrap 4 (grid)

Сетка Bootstrap 4 (grid)

Сетка позволяет создавать расширенные макеты с использованием строк и столбцов. Сетка Bootstrap может содержать до 12 столбцов, и вы можете указать, как эти столбцы будут масштабироваться для разных размеров экрана.

Вот пример сетки Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Одна из трех колонок
    </div>
    <div class="col-sm-6">
      Одна из трех колонок
    </div>
    <div class="col-sm-3">
      Одна из трех колонок
    </div>
  </div>
</div>

Числа в конце каждого имени класса представляют количество столбцов, которые охватывают столбец. Таким образом, .col-sm-3 охватывает три колонки, а .col-sm-6 - шесть. Sm означает, что правило относится к небольшим устройствам (вроде планшетов и телефонов) и всему что имеет больший размер экрана. Вы также можете использовать md, lg и xl для средних, больших и очень больших размеров.

Для сверхмалых устройств предусмотрена пропущенная средняя аббревиатура. Например, .col-8 занимает восемь столбцов на очень маленьких устройствах и выше (другими словами, на всех устройствах).

Складывание колонок сетки

В следующем примере используется та же самая разметка, но на этот раз мы используем md для «medium». Это означает, что, если область просмотра меньше «среднего» (то есть меньше 768 пикселей), ячейки в сетке будут располагаться друг над другом, и каждая ячейка будет занимать всю ширину.

Если вы просматриваете это на широком экране, этот пример может не отличаться от предыдущего. Однако, если вы измените размер своего браузера вниз, ячейки в конечном итоге сместятся в сложенную позицию (и предыдущий пример останется без изменений).

<div class="container">
  <div class="row">
    <div class="col-md-3">
      Одна из трех колонок
    </div>
    <div class="col-md-6">
      Одна из трех колонок
    </div>
    <div class="col-md-3">
      Одна из трех колонок
    </div>
  </div>
</div>

Размеры сетки Bootstrap

В следующей таблице показано, как различные параметры сетки работают с разными размерами экрана.

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
Поведение сетки Всегда 100% ширины Обычное, 100% ширины на меньших разрешениях
Макс. ширина контейнера авто 540 720 960 1140
Префикс класса col- col-sm- col-md- col-lg- col-xl-
Кол-во колонок 12
Расстояние между
30px (по 15px с каждой стороны колонки)

Что нужно помнить при работе с сеткой Bootstrap

Для того, чтобы полноценно работать с сеткой бутстрапа, нужно помнить несколько важных моментов:

Контейнеры

Сетки должны быть размещены в контейнере (то есть, внутри класса .container или .container-liquid) для правильного расположения и выравнивания.

Строки и столбцы

Строки содержат один или несколько столбцов. Столбцы содержат контент. Только столбцы могут быть непосредственными потомками строк.

Отступы

Столбцы содержат отступы. Однако заполнение в первом и последнем столбцах смещено отрицательным полем в строке. Так что контент внутри сетки совпадает с контентом вне сетки.

Более 12 столбцов на строку?

Если в строке размещено более 12 столбцов, столбцы переносятся на новую строку. То есть столбцы будут обернуты как группа. Например, если строка содержит col-md-10 и col-md-3, весь col-md-3 будет перенесен на новую строку.

Менее 12 столбцов на строку?

Вам не нужно использовать все 12 столбцов. Вы можете использовать любое количество столбцов до 12 (до перехода на следующую строку). Например, у вас может быть строка, в которой общее число столбцов составляет 3 столбца.

Классы сетки

Классы сетки применяются к устройствам с шириной экрана, превышающей или равной размерам точек останова (breakpoints), и переопределяют классы сетки, предназначенные для небольших устройств. Поэтому использование любого класса .col-sm- * повлияет не только на маленькие области просмотра, но также на средние, большие и очень большие (кроме случаев, когда есть также col-md- * и / или col-lg - * / col-xl- *).

Несколько классов

Вы можете использовать несколько классов для элемента. Например, вы можете использовать class="col-sm-10 col-md-6", чтобы указать 10 столбцов для маленьких экранов и 6 столбцов для средних и больших экранов.

Практика, практика и еще раз практика...

В заключении, стоит сказать, что научиться работать с сеткой Bootstrap 4 не сложно. Проще всего это сделать на практике, попробовать создать несколько простых шаблонов с различным расположением колонок.

Больше информации по сеткам можно найти в разделе документации официального сайта Bootstrap 4 https://getbootstrap.com/docs/4.1/layout/grid/. Так же, благодаря своей популярности, в сети есть огромное количество примеров и ответов на различные вопросы, связанные с работой с сеткой.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*