Адаптивная вёрстка Bootstrap

Что такое Бутстрап и как его использовать для веб-верстки?

Bootstrap представляет собой js и css-фреймворк с уже написанным кодом. Целью применения этого фреймворка является существенное упрощение процедуры веб-разработки. Bootstrap – это бесплатный инструмент, который позволяет редактировать исходный код в соответствии с задачами разработчика. Данное обстоятельство является одним из главных преимуществ Bootstrap.

Установка Bootstrap

Для подключения файлов фреймворка к html-файлу необходимо скачать нужный фреймворк на сайте getbootstrap.com и скопировать его содержимое в проект. После этого разработчик должен подключить те файлы, которые он планирует использовать. Наиболее востребованными файлами в bootstrap верстке считаются:

• bootstrap.css/ bootstrap.min.css. Данные файлы являются несжатой и сжатой версией кода на CSS. К проекту, который уже работает, обычно подключается bootstrap.min.css. За счет использования сжатого файла обеспечивается улучшение скорости загрузки. Если разработчику нужно просмотреть код в файле, то ему стоит подключить bootstrap.css.
• bootstrap.js/ bootstrap.min.js. Такие версии файла, но со скриптами.
• Файлы glyphicons в папке Fonts. В этой папке содержится более 200 иконок шрифта.

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

Русскоязычная документация

На сайте getbootstrap.com вся информация указана на английском языке. Из-за этого у некоторых русскоязычных разработчиков могут возникнуть проблемы с пониманием доступных возможностей фреймворка. Русскоязычную справку по Bootstrap можно найти в разделе Getting Started. В самом низу этого раздела будет указана ссылка на переводы, в том числе и на русский. Стоит заметить, что на данный момент еще не вся техническая документация переведена на русский язык (около 75%).

Сетка Бутстрапа

Основным элементом Бутстрапа считается адаптивная сетка. Именно она обуславливает ценность данного фреймворка. Сетка позволяет оперативно создавать адаптивные шаблоны. Что самое главное, разработчикам не потребуется знание и понимание медиа запросов. Верстка сайта Bootstrap берет на себя ответственность за реализацию адаптивности.

Особенности работы с сеткой

Для понимания того, как работать с адаптивной сеткой, необходимо представить ее в виде html-таблицы с рядами и ячейками. Существует два варианта сетки:

• полностью резиновая;
• с определенной максимальной шириной.

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

В сетке Бутстрап также используется container-fluid. Наличие этого класса свидетельствует о том, что сетка является резиновой и не имеет каких-либо ограничений по размеру. Следовательно, пользователи смогут увидеть сайт во всю ширину, вне зависимости от размера монитора.

В container принято размещать ряды сетки. Это означает, что в «контейнер» помещаются все блоки, стоящие в одной строке. Для примера работы «контейнера» можно взять стандартный шаблон сайта:

• шапка;
• основа;
• колонка слева;
• футер.

В этом случае есть 3 колонки – шапка, основной контент и левая колонка, а также футер. Следовательно, для создания подобного сайта будет использоваться такая разметка:

<div class = "container">
<div class = "row">Шапка</div>
<div class = "row">Контент... и боковая колонка</div>
<div class = "row">Футер</div>
</div>

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

Особенности работы 12-колоночной системы

По мнению опытных разработчиков, самым главным вопросом, относящимся к Бутстрапу, являются нюансы работы 12-колоночной системы. Знание этих нюансов открывает разработчикам путь к оперативной адаптивной верстке.

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

• lg – для дисплеев большого размера шириной более 1199 пикселей (ПК);
• md – для дисплеев среднего размера шириной до 1199 пикселей (ноутбуки, нетбуки);
• sm – для небольших дисплеев шириной до 991 пикселя (планшетные устройства);
• xs – для самых маленьких дисплеев шириной до 768 пикселей (смартфоны).

Стоит добавить, что в этой системе с целью изменения размеров принято указывать числа от 1 до 12.

Изучив особенности этой системы, выше указанный код может быть исправлен и написан подобающим образом:

<div class = "container">
<div class = "row"><div class = "col-md-12">Шапка</div></div>
<div class = "row">
<div class = "col-sm-8">Контент</div>
<div class = "col-sm-4">Боковая колонка</div>
</div>
<div class = "row"><div class = "col-md-12">Футер</div></div>
</div>

В этой разметке без проблем разберется любой опытный веб-программист. Прежде всего, необходимо создать шапку, которая в принципе может не находится в сетке бутстрапа. Это связано с тем, что шапка, как правило, занимает все 100% ширины сайта. В нашем примере мы все-таки отправим шапку в «контейнер».

Изучая вышеуказанный код, у вас должен возникнуть вопрос: для чего необходим класс col-md-12? Этот класс необходим для передачи браузера следующего сообщения: на устройствах, относящихся к классу md (ноутбуки и нетбуки) ширина сетки должна составлять 12 из 12 колонок. Другими словами, здесь должно использоваться 100% от ширины ряда.

Что происходит с шириной сетки на других устройствах, учитывая отсутствие каких-либо явных указаний в коде? На устройствах, относящихся к классу lg ширина также будет 100%. Это обусловлено тем, что значения для больших дисплеев определяются по принципу наследования. Для меньших дисплеев это правило не действует. Поэтому, если разработчик указал col-xs-6, ширина колонок на любых устройствах будет равна 50%. Если же разработчик указал col-lg-6, то эта ширина будет актуальна исключительно для больших экранов. Об этой особенности должен знать любой веб-разработчик, который использует адаптивную верстку Bootstrap 4.

И все-таки, что происходит с экранами меньшего размера, если ширина блока явно не задана? В данном случае ширина по умолчанию будет равна 100%.

Следующий пример на порядок сложнее. Теперь разработчику необходимо расположить в одном ряду контент-блоки и боковой блок. Данная задача решается следующим образом:

<div class = "col-sm-8">Контент</div>
<div class = "col-sm-4">Боковая колонка</div>

Этот код отправляет браузеру следующее сообщение: ширина контент-блока будет равна 66% на всех экранах кроме экстра-маленьких. А вот на самых маленьких дисплеях по умолчанию сохраняется 100% ширина. Такой вариант кода – это не просто пример. На практике именно эта разметка используется чаще всего.

Что касается боковой колонки, то ее ширина буде равна 33% на маленьких, средних и больших дисплеях. Следовательно, на экране экстра-маленького размера ширина по дефолту будет равна 100%. Все очень просто.

Вложенная сетка Bootstrap

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

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

В приведенном ниже примере внутри блока создается вложенная сетка:

<div class = "col-sm-8">Контент</div>
И пишем в него:
<div class = "col-sm-8">Каталог товаров:
<div class = "row">
<div class = "col-sm-4">
<h2>Название товара</h2>
<img src = "bike.png">
<p>Описание товара</p>
</div>
</div>
</div>

В указанном примере внутри контента создается вложенная сетка. Внутри вложен ряд, а в нем три блока с различными товарами (в данном случае велосипедами). Если скопировать класс col-sm-4 и дополнительно вставить его два раза, то получится следующее:

Здесь стоит отметить один важнейший нюанс – для адаптации изображений под блоки, в которых они расположены, необходимо задать класс img-responsive. Альтернативный вариант предусматривает написание такого кода в style.css:

img{
	max-width: 100%;
	height: auto;
	display: block;
}

После этого остается только сохранить код и подключить файл css к созданному проекту. Изображения по дефолту будут адаптивными. Без бустрапа процесс адаптации картинок получился бы намного дольше и сложнее.

Отдельно стоит сказать о том, что в процессе создания вложенной сетки не нужно указывать дополнительный блок с классом container. Это обусловлено тем, что «контейнером» является именно тот блок, в котором размещается вложенная сетка.

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

Responsive-утилиты

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

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

<div class = "col-md-12 hidden-xs">Футер</div>

В этом примере класс hidden-xs необходим для скрытия футера на маленьких дисплеях. На устройствах с большим размером экрана футер будет всегда виден.

Обратный пример. Если на маленьких дисплеях необходимо показать какой-либо блок, веб-разработчик должен указать класс visible-xs-block. Этот код означает, что пользователи будут видеть блок исключительно на дисплеях смартфонов.

Классы Responsive-утилит прописываются следующим образом:

• в соответствии с задачей программиста указывается visible (видимый) или hidden (скрытый);
• для указания параметров дисплея применяются сокращения классов – xs, sm, md и lg;
• при указании visible необходимо добавить какое-либо значение: inline, inline-block или block.

Для закрепления всего вышесказанного необходимо рассмотреть несколько примеров:

1. hidden-lg hidden-sm. В этом примере элемент будет скрыт только на больших и маленьких экранах. При указании нескольких классов используется пробел. При этом запятые между классами исключены.
2. visible-lg-block visible-xs-inline-block. В данном примере выбранный элемент будет отображаться только на больших и самых маленьких дисплеях. Причем на большом экране он будет блочными, а на экстра-маленьком – строчно-блочным.
3. visible-md-block – элемент будет доступен исключительно на средних и больших (по принципу наследственности) дисплеях.

Теги: