За Bootstrap закрепилось неправильное понимание. Разработчики считают этот фреймворк доступным только для создания администраторских панелей и прототипов сайтов. Такая слава пришла к Bootstrap из-за простоты и доступности. Создать прототип на готовом фреймворке — это простая задача. При этом Bootstrap — сложный и многогранный фреймворк, который имеет стандартные компоненты и модули. Это не мешает создавать на его базе модули с уникальным дизайном, используя средства, которыми Bootstrap располагает. Среди них:
-
SASS-переменные, которые отвечают за десятки параметров. Изменить параметры можно без переписывания классов, как это часто делают разработчики с небольшими знаниями Bootstrap.
-
SASS-функции.
-
SASS-миксины. В них содержатся доступные компоненты и утилиты. На базе компонентов и утилит создаются уникальные блоки.
Это приводит к тому, что обвинения в шаблонности и отсутствии гибкости в использовании не более чем домыслы разработчиков, которые не до конца изучили возможности фреймворка. Фреймворк накладывает ограничения, поскольку является универсальным решением, но возможности намного шире, чем кажется на первый взгляд.
Bootstrap постоянно развивается. В разработке задействовано множество людей из самых разных стран. Одним из которых можете стать и вы.
Преимущества
Скорость
Главное преимущество Bootstrap — скорость. Это недооцененное преимущество, которое часто забывается. В наш век скорость имеет большое значение. Продукты меняются и обновление — это каждодневные изменения. Если такие изменения будут откладываться из-за сложной верстки, то к моменту, когда обновление появится на сайте, оно потеряет актуальность.
Bootstrap, используя готовые компоненты и утилиты, позволяет быстро ввести новую функциональность на сайт и дать ее пользователям.
Кроссбраузерность
Как и у любого фреймворка, задача Bootstrap — использование на разных браузерах: Safari, Firefox, Chrome, Edge. Эти браузеры поддерживаются фреймворком, что позволяет не бояться за то, что у пользователей возникнет проблема в использовании сайта.
Стоит уточнить, что Bootstrap старается идти в ногу со временем. Это значит, что он быстро начинает использовать новые модули CSS. Поэтому возникает проблема использования Bootstrap на старых версиях браузеров. Такова плата за новые технологии. Если необходима поддержка старых браузеров, то стоит внимательно следить за тем, что использует Bootstrap.
Готовые компоненты
Bootstrap обладает десятками готовых компонентов. Это позволяет быстро создать сайт или приложение. Все компоненты используются в реальных проектах и постоянно обновляются.
Структура Bootstrap предполагает переиспользование классов из набора компонентов. Это означает, что для компонента нет разницы, какие теги используются. Важным является правильное использование классов и вложенность. Например, при создании компонента «Buttons» нет привязки к тому, что элемент будет кнопкой. Это может быть ссылка или блочный элемент. Bootstrap в этих случаях создаст одинаковые кнопки. Это достигается с помощью создания базовых классов, которые сбрасывают возможные ненужные стили и добавляют свои.
Адаптивность
Используя готовые компоненты можно быть уверенным в том, что они будут хорошо отображаться на разных устройствах. Компоненты являются адаптивными, а утилиты имеют несколько префиксов, которые можно использовать на нужном разрешении. Подробнее об этом будет сказано в соответствующем уроке курса.
Для использования всех преимуществ «доступности» достаточно просто внимательно читать документацию и примеры кода. Встретив незнакомые атрибуты задумайтесь, почему они здесь? Скорее всего они нужны для использования специальных устройств или приложений при работе с сайтом.
Для многих компонентов вы также сможете найти лучшие практики в использовании специальных атрибутов.
Доступность
Разработчики Bootstrap вкладывают много сил в создание доступного фреймворка для людей с нарушениями функций организма. Множество компонентов изначально адаптированы под использование с клавиатурой или специальными устройствами для голосового воспроизведения контента.
Низкий порог вхождения
Использование Bootstrap не требует экспертных знаний HTML и CSS. Хватает только базовых знаний о том, как устроены стили и теги. При этом использование всех возможностей Bootstrap требует знаний в области HTML, CSS, SASS. Если использовать все это, то Bootstrap из фреймворка для админок превращается в инструмент для создания сложного проекта.
Недостатки
Конечно, Bootstrap не является идеальным фреймворком, который решает все проблемы. Как и любой инструмент, он имеет ограничения и недостатки. Все это незначительно и не мешает использовать фреймворк в проектах.
Вес
Если использовать только готовые файлы для подключения Bootstrap и его зависимостей, то это дает пользователю на закачку больше 300 килобайт данных. Это может быть критично для некоторых проектов, которые рассчитаны на слабое интернет-подключение.
Частично эта проблема решается с помощью сборщиков, таких как Webpack. При использовании Bootstrap есть возможность подключить только необходимую функциональность. Если нужна сетка, то можно подключить только ее и не держать на сайте ненужный CSS и JS код.
Использование в «дизайнерских проектах»
Создание сложного дизайна — непростая задача. Разные действия и анимации, асимметрия блоков и поведение заставляют попотеть разработчика. Использование Bootstrap или другого фреймворка в такой ситуации — это создание дополнительных трудностей. Bootstrap не подойдет для создания таких макетов, так как приведет к переписыванию самого фреймворка.
Такой подход будет удачным в случае создания своего фреймворка с готовыми компонентами. Тогда берут за основу популярный фреймворк и оптимизируют под задачи. Это часто используется в веб-студиях, которые занимаются созданием сайтов.
Новые практики CSS
В достоинствах было указано, что Bootstrap старается идти в ногу со временем и использовать новые средства CSS. Это было не до конца правдой. Из-за масштабов Bootstrap не может в один момент перевести код со старой технологии на новую. Связано это с поддержкой браузеров.
Зависимость от библиотек JavaScript
Многие компоненты Bootstrap завязаны на использование JavaScript. Это дополнительная сложность, так как неверное использование компонентов, будь то структура или классы, может привести к тому, что компонент не будет реализовывать свою задачу. Также это накладывает обязательства подключать все необходимые JavaScript зависимости. До версии 5.0 одной из таких зависимостей является JQuery, которая к моменту выхода новой версии потеряет актуальность. Разработчики потихоньку отказываются от зависимостей, поэтому в скором времени данный недостаток исчезнет.
Проекты на Bootstrap
Если вы еще уверены в том, что Bootstrap не подходит для создания красочных сайтов, то обратите внимание на официальный блог Bootstrap, в котором представлены сайты использующие Bootstrap в качестве фреймворка. Среди них есть как небольшие проекты, так и достаточно крупные.
Еще один проект, который использует Bootstrap — это Хекслет. Да, каждая страница нашего сайта использует Bootstrap, причем зачастую в стандартной версии. Для скорости разработки мы сознательно минимизируем количество CSS кода, который написан самостоятельно. Это позволяет быстро обновлять версии Bootstrap и реализовывать новую функциональность. Походите по сайту, загляните на страницы и посмотрите, как Bootstrap справляется со своей работой.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
