Bootstrap - это фреймворк для построения интерфейса сайта.
Особенность bootstrap
Уникальность bootstrap кроется в мультиплатформенности. Сайты с использованием данного фреймворка одинаково прекрасно смотрятся, как на мобильных девайсах, так и на персональных компьютерах.
А поскольку уже более 50% пользователей посещают сайты с мобильных устройств, то стремление в адаптивному дизайну как раз кстати.
Итак, что нам, друпалерам, надо знать о bootstrap?
Прежде всего то, что в bootstrap 3 все начинается с оберточного контейнера. В зависимости от класса container или container-fluid он может принимать фиксированную или резиновую форму. Обе формы адаптивны, то есть подстраиваются под ширину экрана, а разница лишь в том, что первая фиксируется исходя из ширины экрана, а вторая растягивается на всю его ширину. Стоит отметить, что каким бы ни был контейнер, он в любом случае будет иметь отступа от края в размере 15px.
 |
 |
Помимо контейнеров, которые представляют собой основную область страницы в bootstrap 3 имеется еще два не менее важных элемента: колонки и строки. Или иначе их называют ряды и блоки. Ряды - это блоки div с классом row, они служат для оборачивания адаптивных блоков (строк) div с классом col-?-?.
Давайте поговорим подробней об адаптивных блоках. Адаптивные блоки создают макет страницы и подстраиваются под особенности устройства на котором отображаются. Класс col-?-? представляет собой параметр указывающий на тип устройства и ширину колонки. Есть несколько типов устройств, используемых в bootstrap:
xs - ширина блока меньше или равна 768px.
sm - ширина блока 768px - 992px.
md - ширина блока 992px - 1200px.
lg - ширина блока больше или равна 1200px.
Ширина блока, указываемая вместо второго знака ? задает размер блока на том или ином устройстве. По умолчанию она определяется числом от 1 до 12.
Например, блок с классом "col-xs-12 col-sm-6 col-md-4 col-lg-3"будет иметь на устройстве xsширину 100% (12/12), на sm - 50% (6/12), на md - 33,3% (4/12), на lg - 25% (3/12). Надо заметить, что если в классе указывается только один тип устройства, например, "col-md-6" то данный заменяет собой все остальные диапазоны определяя блок в половину ширины контейнера на любом устройстве.
Это базовые моменты по разметке в bootstrap 3.
Особенности разметки
Адаптивные блоки по умолчанию выравниваются по левому краю. Поэтому перед блоком, который должен начинаться с новой строки необходимо ставить пустой div элемент с классом clearfix:
<div class="clearfix"></div>.
Чтобы скрыть элемент (блок) на определенных устройствах необходимо указать класс hidden-? заменив ? необходимым типом устройства.