Bootstrap 3 - адаптивная сетка (ч.2)
@honey_and_moneyПродолжаем дополнять наши знания по дизайну веб-страниц с помощью фреймворка 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 - Целью жизни не могут быть деньги. Цель - это свобода, которую вы можете получить с помощью денег!