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

Современный пользователь интернета заходит в сеть с различных устройств. Все они отличаются размерами экранов. Поэтому их сайт будет отображаться на них по-разному. Чтобы посетителю было комфортно находиться на странице с любого гаджета, в основу проекта закладывают адаптивную верстку. Наиболее востребованное программное обеспечение для ее создания – Bootstrap. 

Рис.1 Разница в вертске сайта. Как смотрится сайт на различных устройствах при фиксированной и адаптивной верстке.

Виды макетов сайтов по ширине 

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

Выделим основные варианты верстки сайтов:

• Фиксированная верстка сайта

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

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

Рис.2 Фиксированная верстка сайта. Все элементы и блоки на сайте не меняются, а только только уменьшаются.

•  Гибкая (резиновая) верстка сайта 

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

В гибком макете ширина выражается в процентах и может подстраиваться под различные экраны, меняя свои размеры. Так решилась проблема с разными диагоналями мониторов. 

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

Рис.3 Резиновая верстка сайта. Сайт растягивается по всей ширине экрана устройства, но смотрится порой "криво".

•  Адаптивная верстка сайта

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

На смартфонах и планшетах блоки располагаются вертикально, на ноутбуках – горизонтально в соотношении 33,3% и 66,7%, на мониторах компьютеров -  25% и 75% соответственно. Тему адаптивной верстки мы раскрыли в статье «Почему стоит выбрать адаптивный дизайн для сайта», поэтому сейчас подробно расписывать ее не будем. 

Рис.4. Адаптивная верстка сайта. Элементы и блоки дизайн макета сайта подстраиваются под разрешения устройств.

Для чего нужен Bootstrap  

Bootstrap – это многокомпонентное программное обеспечение, представляющее собой CSS- и JS-фреймворк. Он является файлом или группой файлов, которые подключаются к сайту. Готовый код, содержащийся в Bootstrap, ускоряет, упрощает и оптимизирует работу программистов при создании сайта. 

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

Функционал Bootstrap берет на себя решение задач адаптивности и кроссбраузерности. Даже программист с небольшим опытом в верстке и CSS сумеет создать html-шаблон.  

Фреймворк обеспечивает адаптивную верстку с помощью сетки. Пользователю нужно лишь создать блок, задать ширину и включить его в макет сайт. Версии Bootstrap 3 и 4 заточены именно под создание адаптивной верстки. Все их компоненты являются гибкими, а некоторые адаптивными.  

Рис.5. Сетка Bootstrap для адаптивной верстки сайта

Интуитивно понятная процедура верстки сделала Bootstrap самым востребованным продуктом среди аналогов. Он ускоряет разработку сайта в 3-5 раз и упрощает взаимодействие в команде. 

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

Недостатки Bootstrap

Bootstrap – многофункциональное приложение, значительно упрощающее жизнь разработчикам. Но и у него есть свои минусы: 

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

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