Bootstrap 3 - адаптивная сетка (ч.2)

Продолжаем дополнять наши знания по дизайну веб-страниц с помощью фреймворка Bootstrap 3.

Сегодня поговорим про отступы с помощью базовых колонок.

Как с помощью сетки реализовать отступы без лишних заморочек?

Нам поможет класс вида col-...-offset-1 (вместо многоточия указывается вид размера экрана, на котором должен работать указанный отступ xs, sm, md или lg, в качестве значения число 1 приведено примерно. Там может быть любое. Оно показывает количество элементарных колонок, отведенных на отступ)

Давайте разберем это все на примере:

Что я тут использую: Во-первых container-fluid - резиновый контейнер, который занимает всю ширину экрана при любом размере окна браузера.

Далее в контейнере создана строка, в которой есть три блока с описанными классами - "block-1" "block-2" "block-3" и указанными классами от Bootstrap - они задают размеры каждого блока на определенной ширине экрана (для всех я задал по 4 элементарные колонки, чтобы не путаться)

Вот так я описал свои классы в CSS:

Каждому блоку задал высоту в 300 пикселей и цвет фона.

Как это все выглядит в браузере:

При описании классов Bootstrap мы заняли все 12 базовых колонок (По 4 на каждые три блока)

Что будет если допустим первым двум оставить по 4 базовые колонки, а последнему сделать две?

Третьему блоку я поменял параметры всех классов для нашей сетки: 4 заменил на 2.

Смотрим в браузере:

Как мы видим, третий блок теперь изменил свои размеры. Справа от него белый промежуток говорит о двух свободных базовых колонках.

И правда: 4+4+2 = 10, мы использовали всего 10, а дано нам всегда 12.

Так вот, если у вас образуются такие свободные колонки, то вы можете использовать их под пробелы между блоками.

Повторюсь: Пробелы создаются только с помощью свободных базовых колонок, которые остались в нашей выделенной строке class="row".

Давайте изменим наш html-код:

Тут я второму блоку добавил класс col-md-offset-1 - будет один отступ. Отступы создаются именно слева от блока. Так всегда. То есть у нас слева от второго блока должен появиться отступ в одну базовую колонку:

Отлично, отступ появился. И осталась одна свободная колонка справа от третьего блока. Так как мы указывали md в описании нашего класса - отступ будет появляться только на экранах medium (больше 768 и меньше 1200 пикселей)

Если сузить окно браузера до размера small (меньше 768 пикселей), то отступ пропадет.

Чтобы он не пропадал, нам надо задать отступ для каждого вида экрана - точно так же как мы это делали с выделением базовых колонок под каждый блок на каждый размер экрана.

Тут уже можно извращаться как угодно:

Здесь я задал отступы второму блоку на всех размерах экрана, кроме extra small - мобильных устройств.

Но у нас осталась еще одна свободная колонка - можем с помощью неё сделать еще один пробел, например перед первым блоком:

Вот так получилось.

Что имеем вы итоге: вы можете забирать какое-то количество базовых колонок у ваших блоков и использовать их под отступы. Отступами можно удобно управлять, задавая разное значение для разных размеров экрана - точно так же как и с обычными блоками

@honey_and_money - Целью жизни не могут быть деньги. Цель - это свобода, которую вы можете получить с помощью денег!