Bootstrap 3 - адаптивная сетка

Bootstrap 3 - адаптивная сетка

@honey_and_money

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

В предыдущей статье мы использовали такой html-код и на нем остановились:

Напомню что тут есть:

Контейнер для строк и столбцов. В этом контейнере мы задали одну строчку (class="row"), а в ней три блока - три больших столбца, которые занимают разную ширину в зависимости от ширины экрана (от ширины окна браузера).

Эти соотношения для столбцов мы задавали числами в классах (например col-xs-4)

Надеюсь вы вспомнили и вошли в курс дела.

Для начала разберемся с внешним контейнером. class="container" имеет фиксированную ширину в зависимости от ширины экрана. Это можно объяснить так: Если размер экрана больше 1200 пикселей (то есть large в терминологии Bootstrap), то ширина контейнера будет фиксированной - не знаю сколько точно, но пусть это будет 1100 пикселей. То есть если вы откроете страницу на огромном мониторе с шириной в 4000 пикселей, контейнер все равно будет занимать 1100 пикселей в ширину. Это главный недостаток этого класса.

Решается это просто - будем использовать класс "container-fluid" - тогда наш контейнер становится "резиновым" и при любом размере экрана занимают всю ширину.

Вот каким теперь стал наш html:

Ну и как это все выглядит на странице:

Теперь наш сайт занимает всю ширину окна браузера.

Отлично, с этим разобрались. Дальше перейдем к структуре строк и колонок:

В контейнере можно создавать бесконечно количество строк (class="row"), в которых можно создавать столбцы. Но и в наших столбцах можно создавать новые строки, затем в них столбцы и так далее, до бесконечности.

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

Вот так я дописал наш html.

Что нового: В первую колонку (из наших трех, которые находятся в первой строке) я вставил еще одну строку и разбил ее на три колонки. Колонкам я задал соответственно такие классы: "block-1" "block-2" "block-3", ну и классы col-md-4 (в сумме 12, строку мы всегда разбиваем на такое количество элементарных колонок, чтобы в сумме оказалось 12)

Вот так я описал CSS-классы для наших новых трех блоков:

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

Смотрим что получилось:

Все получилось так как и хотели. Первая колонка из трех разбита еще на три колонки, как мы и описывали в коде.

Какой вывод из этого можно сделать:

При использовании Bootstrap в любой блок можно добавить строку (class="row") и разбить ее на нужное количество столбцов.

Это очень удобно для разработки дизайна сайта и дает нам широкий спектр возможностей для реализации своих фантазий.

Как вы могли заметить, на последнем скриншоте с результатом разбиения колонки на три новые, внизу блоки немного выходят за пределы рамки - высота чуть больше той высоты, которую имеет родительский столбец. Этому есть объяснение, это не какая-то ошибка. Разбирать эту особенность будем в одной из последующих статей.


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


@honey_and_money - Смысл жизни в мечтах и их достижении. Ничего больше!