Фреймворк Bootstrap

Bootstrap — инструмент из HTML, CSS, Sass и JavaScript для создания сайтов. Основные задачи: помощь в разработке веб-интерфейсов, избавление от рутинной работы и ускорение процесса написания кода.

Фреймворк создан разработчиками социальной сети Twitter в 2011 году. Активно развивается и собирает все современные наработки frontend-технологий.

Возможности Bootstrap

• Задание проекту размерной сетки;
• Поддержка адаптивности;
• Типографика текста;
• Оформление форм, кнопок, таблиц, навигации;
• Библиотека иконок;
• Встроенные модальные окна и другие JS-компоненты;
• Использование Flexbox.

Распространяется под бесплатной лицензией MIT. Поддерживается всеми мобильными устройствами и браузерами, кроме Internet Explorer для пятой версии. Bootstrap5 — последняя версия прогрессивной библиотеки для создания уникального дизайна. Использует концепцию Mobile First (сначала мобильные), обеспечивая правильный рендеринг и масштабирование проекта для всех устройств.

Исходные файлы устанавливаются через менеджеры задач npm или Yarn в среде Node.js. Скомпилированные и минизированные файлы: bootstrap.min.css и bootstrap.bundle.min.js подключаются к проекту через CDN.

Популярные компоненты Bootstrap:

• Accordion — сворачивание содержимого по принципу работы аккордеона;
• Breadcrumb — хлебные крошки, местоположение веб-страницы в иерархии меню;
• Buttons — настраиваемые стили кнопок для действий и форм;
• Card — вариации информационных карточек с различными опциями;
• Carousel — циклическая прокрутка изображений или текста в виде карусели;
• Modal — диалоговые модальные окна с различным контентом;
• Pagination — постраничная разбивка связанного содержимого;
• Tooltips — настраиваемые всплывающие подсказки;
• Progress — индикаторы из составных полос;
• Navs & tabs — навигационные компоненты и вкладки.

Другие аналоги фреймворка: Bulma, Foundation, Skeleton.

Преимущества Bootstrap

• Подробная документация;
• Разнообразие плагинов и утилит;
• Поддержка скриптов и интерактивность;
• Гибкая сетка и контейнера;
• Простота настройки и изучения;
• Сборка только необходимых компонент для проекта.

Мы используем Bootstrap5 и стратегию Mobile First для frontend-разработки адаптивных сайтов.