Примеры сайтов на ukit.com

Примеры сайтов, созданных на Bootstrap

Bootstrap — бесплатный фреймворк, включающий в себя набор инструментов для создания сайтов и приложений. Для работы с ним требуется знание HTML и CSS на хорошем уровне.

2018-12-07 16 Евгений Куликов Рейтинг: 4.0

Bootstrap — бесплатный фреймворк, включающий в себя набор инструментов для создания сайтов и приложений. Для работы с ним требуется знание HTML и CSS на хорошем уровне.

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

№1. Пример сайта автосервиса «АС-Авто»

Ac-avto161.ru — сайт автотехцентра с главной страницей, сделанной в формате посадочной страницы, и адаптивным дизайном. Одинаково удобен для посетителей при просмотре на десктопе и экране мобильного устройства, чтобы обычно для проектов, сделанных на Bootstrap. На главной в основном размещена информация о предоставляемых услугах; есть также отзывы и масштабируемая карта с отметкой о местоположении. Для общения с менеджером посетители могут использовать онлайн-чат от Jivosite. Для каждой услуги создана отдельная страница, ссылка на которую есть в одном из разделов основного меню или на главной. Объём представленной информации сильно различается: где-то написаны подробные материалы, а где-то указано только краткое перечисление основных возможностей.

№2. Салон красоты и гармонии «Visandra»

Visandra.com.ua — лендинг салона красоты. В меню навигации закреплены ссылки на основные разделы страницы. При нажатии на кнопку «Подробнее» в блоке с услугами появляется окно с описанием и расценками. Есть два раздела с фотографиями, собранными в галерею. По умолчанию отображаются только миниатюры, при нажатии открывается полное изображение. С адаптивностью никаких проблем нет: контент одинаково хорошо отображается на мониторе компьютера и экране телефона. В самом низу страницы есть блок с новостями, который ведёт в раздел «Блог» со ссылками на другие посты.

№3. Пример интернет-магазина женского белья «Дикая Орхидея»

Shop.wildorchid.ru — онлайн-магазин женского белья. В основном меню у него есть не только постоянные страницы, но и ссылки для временных разделов — например, распродаж. На первом экране размещён слайдер с автоматической сменой баннеров. Здесь не хватает возможности ручного управления, которые Bootstrap позволяет добавить. Без них если пропустишь сообщение об акции, придётся ждать, пока оно снова появится. На главной странице есть раздел «Самое популярное», в котором закреплены ссылки на распродажи, программу лояльности и новинки. С функциональностью интернет-магазина всё в порядке: есть фильтры по категориям и назначению, в карточке товара можно выбрать цвет, размер, подобрать комплект, просмотреть рекомендации и воспользоваться скидкой. Поддерживается онлайн-оплата с помощью банковской карты через защищённую страницу банка «Русский стандарт».

№4. Элитная стоматология «French Dental Clinic»

Fdc-vip.ru — сайт клиники элитной стоматологии с версиями на трёх языках: русском, английском и французском. Тоже начинает знакомство с посетителями с помощью слайдера, в котором есть информация об акциях, преимуществах и создателях компании. Кроме обычной галереи на главной странице есть блок, в котором отображаются посты из профиля клиники в Instagram. Все услуги скрыты в отдельное меню, которое нужно раскрывать нажатием даже на десктопе. Есть возможность записаться на приём онлайн, используя простую форму обратной связи с минимальным количеством обязательных для заполнения полей.

№5. Сайт компании производителя светопрозрачных конструкций «Саберс»

Sabersgroup.com — сайт компании, производящей светопрозрачные алюминиевые конструкции. На главной странице есть слайдер, в котором баннеры меняются по таймеру, но если навести на них курсор, то отсчёт времени останавливается. Кроме того, есть элементы ручного управления, которые позволяют быстро переключать изображения. В меню навигации расположены ссылки на список услуг, каталог продукции, портфолио и блог. Всё сделано очень аккуратно: единый стиль оформления, хорошие шрифты, адаптивность под разные экраны — сайтом приятно пользоваться.

Подведём итоги

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

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