Учебник по Bootstrap

Статьи и другая информация по адаптивной вёрстки сайтов с использованием 3 и 4 версии фреймворка Bootstrap.

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

I. Начало работы

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

• Что такое Bootstrap и зачем он нужен?
• Подключение к сайту

---

• Сборка проекта с помощью Gulp (Bootstrap 4)
• Пользовательская сборка платформы (Bootstrap 3)
• Настройка платформы с помощью переменных LESS (Bootstrap 3)
• Варианты установки, сборка с помощью Grunt (Bootstrap 3)
• Инструмент Bootlint (Средство для проверки бутстраповских страниц на корректность)

Создание макета

• Адаптивный дизайн сайта. Что это и как его создать?
• Элементы сетки и как их использовать для создания макета
• Сетка (Bootstrap 3)
• Изменение порядка следования адаптивных блоков в макете (Bootstrap 3)
• Сетка (Bootstrap 4)
• Основы создания адаптивно-фиксированного макета сайта
• Создание адаптивно-резинового макета
• Media object (медиа-объект)
• Как создать фиксированный макет шириной 960px?

II. Классы и компоненты

Оформление контента

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

Компоненты

• Breadcrumb (навигационные цепочки, хлебные крошки)
• Collapse и создание на базе него аккордеона
• Dropdowns (выпадающие списки)
• Jumbotron (оформление ключевой информации)
• Modal (модальные окна для веб-страницы)
• Navs (навигационные блоки)
• Navbar (основное меню сайта)
• Panels (Bootstrap 3 панели)
• Popovers (всплывающие панели)
• Scrollspy (выделение ссылок на основании положения прокрутки)
• Tabs (Bootstrap 3 вкладки)
• Thumbnails (Bootstrap 3 галерея)
• Alerts (сообщения)
• Badges (бейджи)
• Buttons (кнопки)
• Carousel (карусель)
• Pagination (навигационный блок для пагинации)
• Progress (индикаторы выполнения)
• Tooltips (всплывающие подсказки)

Классы помощники

• Управление отображением элементов (Bootstrap 4)
• Классы для работы с flexbox (Bootstrap 4)
• Управление margin и padding отступами (Bootstrap 4)
• Управление границами и скруглениями углов элементов (Bootstrap 4)

III. Дополнительно

Примеры

• Создание галереи изображений
• Динамическое создание модальных окон
• Форма обратной связи
• Как создать таймлайн (timeline)?
• Виджеты для выбора даты и времени
• Галереи для представления статей или новостей на сайте
• Как можно оформить комментарии на сайте

---

• Валидация HTML формы
• Графическая капча для защиты сайта от спама

Разное

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

---

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