Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Почему Bootstrap Bootstrap 5: Основы верстки

За 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 справляется со своей работой.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Изображение Тото

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