Подробное руководство по Bootstrap
Материалы для изучения библиотеки Bootstrap на русском языке. Содержит детальное описание сетки и компонентов, включая: form, modal, navbar, carousel, tooltip и так далее.
Bootstrap 5 – это мощный, гибкий и многофункциональный инструмент для быстрого создания адаптивных интерфейсов сайтов.
Для разработки он нам предоставляет готовую систему сеток, компоненты и JavaScript плагины. Кроме этого возможна детальная настройка Bootstrap с помощью Sass.
1. Основы Bootstrap
1.1. Подключение и настройка
- Что такое Bootstrap и зачем он нужен?
- Подключение фреймворка Bootstrap к сайту
- Сборка Bootstrap из исходных кодов
1.2. Верстка адаптивного макета
- Что такое адаптивный дизайн сайта?
- Элементы сетки и как их использовать для верстки макета
- Сетка Bootstrap 3
- Сетка Bootstrap 4
1.3. Стилизация контента и форм
- Работа с типографикой
- Оформление изображений
- Стилизация таблиц
- Стилизация figure и figcaption
- Стилизация форм
1.4. CSS-компоненты
- Alerts - сообщения
- Badges - бейджи
- Breadcrumb - хлебные крошки
- Buttons и button group – кнопки и группы кнопок
- Card - карточки
- List group - стилизованные списки
- Pagination - навигационный блок для пагинации
- Placeholders (в планах)
- Progress - индикаторы выполнения
- Spinners - спиннеры
- Устаревшие
1.5. JS-компоненты
- Accordion и collapse
- Carousel - карусель
- Dropdowns - выпадающие списки
- Modal - модальное окно
- Offcanvas (в планах)
- Popovers - всплывающий контент, информеры
- Scrollspy - выделение ссылок на основании положения прокрутки
- Navs - навигационные блоки
- Navbar - основное горизонтальное меню
- Tabs – вкладки
- Toast (в планах)
- Tooltips – всплывающие подсказки
- Устаревшие
1.6. Хелперы и утилитные классы
- Управление отображением элементов (Bootstrap 4)
- Управление границами и скруглениями углов элементов (Bootstrap 4)
- Вспомогательные классы
2. Создание различных решений и виджетов на Bootstrap
- Виджет для выбора даты и времени
- Создание выноски
- Галерея изображений
- Оформление карточки статьи или новости на сайте
- Оформление комментариев на сайте
- Таймлайн
- Форма обратной связи
3. Создание сайтов с использованием Bootstrap
- Верстка сайта визитки
4. Разное
- Оформление заголовков
- Offcanvas (изменение мобильного вида меню navbar)
- Сторонние компоненты для реализации основного меню
- Создание своих адаптивных контейнеров
- Инструкция по созданию дополнительных стилей к компонентам
- Шрифтовые иконки погоды
- Сайты, c которых можно бесплатно загрузить шаблоны и темы Bootstrap
- Справочник по CSS классам Bootstrap 3
- Инструменты для визуального проектирования макетов веб-страниц
- Оформление элементов Bootstrap в стиле Modern UI (Metro)
- Проверка HTML на соответствие структурам Bootstrap 3