Учебник по 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 3
только для Bootstrap 4
глава пятая
Классы помощники
- Управление отображением элементов (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)