Bootstrap предлагает довольно гибкую адаптивную сетку. Все экраны делятся по размеру на пять категорий:

Очень маленькие Маленькие Средние Большие Очень большие
<544px
(34em)
<768px
(48em)
&lt900px
(62em)
<1200px
(75em)
>1200px
(75em)
-xs- -sm- -md- -lg- -xl-

Для каждой категории определен префикс, с помощью которого формируются адаптивные классы колонок.

Контейнер

Элемент-обертка:
.container — адаптивный элемент фиксированной ширины:

-xs- -sm- -md- -lg- -xl-
auto 544px
(34rem)
750px
(45rem)
970px
(60rem)
1170px
(72.25rem)

или .fluid-container — резиновый элемент

Ряд

Обязательный элемент — ряд:
.row

Колонки

Разметка boorstrap 12-иколоночная. Это значит, что в ряду в общей сумме располагается 12 колонок. Комбинации могут быть разными: две колонки шириной в 6 единиц, 3 колонки шириной в 4 единицы, колонка в 5 единиц и колонка в 7 единиц и т.д.
Для разных экранов можно создать разную сетку, используя префиксы к классам колонок. В таблице указана примерная ширина колонок для каждой категории экранов:

col-xs-* col-sm-* col-md-* col-lg-* col-xl-*
auto ~44px
(2.75rem)
~62px
(3.86rem)
~81px
(5.06rem)
~97px
(6.06rem)

Вместо символа * в названии класса следует указать, сколько единиц включает в себя колонка. Например, класс col-md-6 говорит о том, что на средних экранах колонка будет занимать 6 из 12 единиц ряда — 6/12, то есть половину.

Манипуляции с колонками

Для манипуляций также необходимо уточнять размеры экрана, для которых эти манипуляции должны быть применены.
Смещение
col-md-offset-4 — на средних экранах сместить колонку на 4 столбца вправо — слева образуется пустое пространство шириной в 4 единицы.
Скрытие
Можно спрятать колонку, например, на маленьких экранах и отобразить на средних и больших.
Используются префиксы hidden-* (hidden-xs, hidden-md) и visible-* (visible-xs, visible-xl)
Передвижение
С помощью передвижения колонки можно менять местами!
.col-lg-push-* — сдвиг вправо(на больших экранах)
.col-lg-pull-* — сдвиг влево(на больших экранах)

0 комментариев

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

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован