Курс Bootstrap 5

Готовая библиотека компонентов на CDN: сетка, утилиты, карточки, формы, навигация и модальные окна — без сборщика и без сложной настройки.

Курс готовится к публикации

Материалы курса написаны и проверены, идёт подготовка к выходу на сайте: программа ниже — настоящая. Открытые курсы можно читать уже сейчас, а о запуске этого напишите — ответим, когда он появится.

Открытые курсы Спросить о запуске

Модулей: 12
Ак. часов: 72
Разделов: 83

Что нужно знать заранее. основы HTML и CSS.

Программа курса

12 модулей; каждый — полноценное занятие с теорией, листингами, практикой и домашним заданием.

1
Введение в Bootstrap
Bootstrap — самый популярный CSS-фреймворк для создания адаптивных сайтов. Его создали в 2010 году разработчики Twitter Марк Отто и Джейкоб Торнтон как внутренний…
Что такое BootstrapУтилиты vs компонентыПодключениеCDN vs npmКонтейнерыПервая страница
2
Сетка (Grid System)
Сетка (grid) — основа Bootstrap. Это система, которая делит ширину страницы на 12 равных колонок, из которых собираются адаптивные раскладки…
12 колонокcontainer/row/colБрейкпоинтыАдаптивные колонкиguttersВыравниваниеВложенность
3
Типографика и утилиты
Bootstrap задаёт стили для всех текстовых тегов по умолчанию и добавляет утилиты для тонкой настройки…
ЗаголовкиdisplayleadТекстовые утилитыЦветаОтступыФлекс-утилитыТени и границы
4
Кнопки, бейджи и алерты
Кнопка — наиболее распространённый интерактивный элемент. В Bootstrap кнопка собирается из базового класса .btn (задаёт отступы, скругление, поведение) плюс…
btn и вариантыРазмерыOutlineГруппы кнопокBadgeAlertСпиннерыСостояния
5
Навигация (Navbar)
Навбар (navbar) — панель навигации вверху страницы: логотип, пункты меню, иногда форма поиска и кнопки. Это один из самых узнаваемых компонентов Bootstrap…
navbarБренд и ссылкиАдаптивное сворачиваниеDropdown в менюФормы в навбареStickyЦвета
6
Карточки и медиа
Карточка (card) — универсальный контейнер для блока контента: товар, статья, профиль, тариф…
cardШапка/тело/подвалИзображенияСписки в карточкеСетка карточекcard-groupimg-fluid и ratio
7
Формы
Формы — одна из важнейших частей интерфейса. Bootstrap 5 даёт единый аккуратный стиль для всех элементов форм во всех браузерах…
form-controlМеткиFloating labelsЧекбоксы и радиокнопкиselectГруппы полейВалидацияСетка форм
8
Модалки, вкладки, аккордеон
Интерактивные компоненты (модалки, вкладки, аккордеоны) требуют JavaScript. Главная особенность Bootstrap — декларативный подход через data-атрибуты: собственный JS…
Modaldata-bs-toggleTabsAccordionOffcanvasTooltipToastJS-компоненты
9
Таблицы и списки
Таблицы нужны для табличных данных: прайсов, отчётов, списков пользователей. Bootstrap почти не трогает <table> без класса (Reboot лишь схлопывает границы ячеек),…
tablestriped/bordered/hoverЦвета строкАдаптивные таблицыlist-groupСсылки и бейджиFlush
10
Кастомизация и Sass
Стандартный вид Bootstrap узнаваем, и часто нужно его изменить под бренд: свои цвета, шрифты, скругления. Есть три уровня кастомизации — от простого к мощному:
CSS-переменныеПереопределениеSass-сборка$-переменныеТемаКарты цветовUtility API
11
Bootstrap JavaScript
До сих пор мы писали в основном HTML и CSS, а редкие скрипты копировали готовыми. JavaScript-компоненты (бургер навбара, модалки, вкладки, аккордеоны) тоже часто…
Куда писать JavaScriptData API и JS APIИнициализацияМетодыСобытияModal, Toast и Offcanvas из кодаКарусельИнтеграция с фреймворками
12
Итоговый проект — лендинг
Итоговый проект — полноценная адаптивная лендинг-страница, объединяющая изученные компоненты…
СтруктураHeroFeaturesPricingTestimonialsFooterАдаптивность

← Ко всем курсам