Учебник по Bootstrap

• Содержание
• Лента

1. Основы Bootstrap

1.1. Подключение и настройка

• Что такое Bootstrap и зачем он нужен?
• Подключение фреймворка Bootstrap к сайту
• Сборка Bootstrap из исходных кодов
  • Изменение исходных стилей Bootstrap 3 и их компиляция в CSS
  • Кастомизация стилей и компонентов Bootstrap 3
  • Сборка Вootstrap 3 с использованием Grunt
  • Сборка Bootstrap 4 с использованием Gulp
  • Сборка Bootstrap 5 из исходных кодов

1.2. Верстка адаптивного макета

• Что такое адаптивный дизайн сайта?
• Элементы сетки и как их использовать для верстки макета
• Сетка Bootstrap 3
  • Подробное руководство по сетке Bootstrap 3
  • Классы для изменения порядка следования блоков
  • Верстка фиксированного макета шириной 960px
• Сетка Bootstrap 4
  • Подробное руководство по сетке Bootstrap 4
  • Утилитные классы для flexbox
  • Классы для управления margin и padding
  • Верстка адаптивного макета
  • Верстка отзывчивого макета

1.3. Стилизация контента и форм

• Работа с типографикой
• Оформление изображений
• Стилизация таблиц
• Стилизация figure и figcaption
• Стилизация форм
  • Классы платформы для HTML форм
  • Примеры оформления форм
  • Валидация HTML формы

1.4. CSS-компоненты

• Alerts - сообщения
• Badges - бейджи
• Breadcrumb - хлебные крошки
• Buttons и button group – кнопки и группы кнопок
• Card - карточки
• List group - стилизованные списки
• Pagination - навигационный блок для пагинации
• Placeholders (в планах)
• Progress - индикаторы выполнения
• Spinners - спиннеры
• Устаревшие
  • Иконки Glyphicons
  • Jumbotron - оформление ключевой информации
  • Panels - панели
  • Thumbnails - галерея
  • Media object - медиа-объект

1.5. JS-компоненты

• Accordion и collapse
• Carousel - карусель
• Dropdowns - выпадающие списки
• Modal - модальное окно
  • Подробное руководство по созданию модальных окон на Bootstrap
  • Создание модальных окон Bootstrap на JavaScript
• Offcanvas (в планах)
• Popovers - всплывающий контент, информеры
• Scrollspy - выделение ссылок на основании положения прокрутки
• Navs - навигационные блоки
• Navbar - основное горизонтальное меню
  • Navbar Bootstrap 3
  • Кастомизация основного меню Bootstrap 3 Navbar
  • Navbar Bootstrap 4
• Tabs – вкладки
• Toast (в планах)
• Tooltips – всплывающие подсказки
• Устаревшие
  • Affix - sticky-позиционирование элементов

1.6. Хелперы и утилитные классы

• Управление отображением элементов (Bootstrap 4)
• Управление границами и скруглениями углов элементов (Bootstrap 4)
• Вспомогательные классы

2. Создание различных решений и виджетов на Bootstrap

• Виджет для выбора даты и времени
• Создание выноски
• Галерея изображений
• Оформление карточки статьи или новости на сайте
• Оформление комментариев на сайте
• Таймлайн
• Форма обратной связи

3. Создание сайтов с использованием Bootstrap

• Верстка сайта визитки
  • Создание сайта визитки (Часть 1)
  • Создание сайта визитки (Часть 2)
  • Создание сайта визитки (Часть 3)
  • Создание сайта визитки (Часть 4)
  • Создание сайта визитки (Часть 5)

4. Разное

• Оформление заголовков
• Offcanvas (изменение мобильного вида меню navbar)
• Сторонние компоненты для реализации основного меню
• Создание своих адаптивных контейнеров
• Инструкция по созданию дополнительных стилей к компонентам
• Шрифтовые иконки погоды
• Сайты, c которых можно бесплатно загрузить шаблоны и темы Bootstrap
• Справочник по CSS классам Bootstrap 3
• Инструменты для визуального проектирования макетов веб-страниц
• Оформление элементов Bootstrap в стиле Modern UI (Metro)
• Проверка HTML на соответствие структурам Bootstrap 3