Опубликовано 1 комментарий

Bootstrap сетка

Bootstrap сетка
сетка

Bootstrap сетка — заранее прописанный набор CSS-классов, который позволяет расположить столбцы и блоки в сеточный формат. Сеточная модель применяется и в других фреймворках (например, 960grid); строиться  она на медиа-запросах (Media queries). Минимальным размером сетки является размер одной колонки, а вся ширина контейнера страницы состоит из двенадцати колонолок.  Контейнер сетки Bootstrap должен иметь класс .container или .container-fluid, а внутри него контейнер с классом .row и элементами с классами, начинающимися с «col». После обозначениея «col» идет краткое обозначение размера устройства для отображения; следом идет число от 1 до 12 — ширина текущего блока в ширинах отдельных колонок.

Bootstrap сетка

Экстра МАЛЕНЬКИЕ УСТРОЙСТВА смартфоны (<768px) МАЛЕНЬКИЕ УСТРОЙСТВА планшеты (<=768px) Средние устройства  десктопы (≥992px) Большие устройства  десктопы (<=1200px)
Поведение сетки Все время горизонтальная Схлопывается в горизонтальную ближе к точке останова
Ширина контейнера нет (auto) 750px 970px 1170px
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
# колонок 12
Ширина колонки Auto ~62px ~81px ~97px
Ширина отступа 30px (15px на каждую сторону колонки)
Вложения доступны
Смещения доступны
Сортировка колонок Доступна

Например, можно создать две колонки с разными ширинами для разных устройств просмотра:

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

При этом div  с классом col-md-4, означает, что получится колонка/столбец шириной 4/12 от общей ширины контейнера страницы. Если сумма чисел у классов колонок будет превышать 12, колонки будут отображаться с новой строки. При этом классы .col-xs-* обозначают очень маленькие устройства (extra small), .col-sm-* маленькие, .col-md-* средние, .col- lg-* большие. Само определение размера устройства происходит на основе медиа-запросов. Каждому из классу из наборов ставится приблизительная им точная ширина, в зависимости от ширины контейнера.

Для отмены последствий работы свойства float используется класс .clearfix. Если понадобится расположить столбец, пропустив некоторое расстояние кратное ширине одного столбца, используются классы типа .col-md-offset-*, где вместо звёздочки указывается кол-во пропускаемых столбцов для устройств среднего размера (md — middle).

Если вам понадобиться разбить колонку на собственный набор колонок, то прописав класс .row, мы получим еще одно деление рассматриваемой области на двенадцать частей.

Визуальное расположение колонок и расположение в HTML-файле может понадобиться изменить. Это реализуется классами .col-md-push-* и .col-md-pull-*.

1 комментарий к “Bootstrap сетка

  1. […] Bootstrap, для просмотра небольшого изображения. Вместе с сеткой Bootstrap позволяет отображать сетку изображений, видео, текста […]

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