Введение в Bootstrap. Сетка

1. Введение в Bootstrap. Сетка

2. Введение

Bootstrap — это популярный, бесплатный CSS-фреймворк с открытым
исходным кодом, предназначенный для создания адаптивных и
кроссбраузерных веб-сайтов и приложений. Он включает в себя готовые
HTML-, CSS- и JavaScript-компоненты, которые упрощают процесс разработки
интерфейсов. Bootstrap был создан в 2011 году компанией Twitter и с тех пор
стал одним из самых востребованных инструментов для веб-разработчиков.

3. Основные возможности Bootstrap

1.
Система сетки: Bootstrap предоставляет гибкую 12-колоночную сетку, которая позволяет
легко создавать адаптивные макеты для любых устройств.
2.
Готовые компоненты: Включает кнопки, формы, навигационные панели, модальные окна,
слайдеры, выпадающие списки и другие элементы интерфейса.
3.
Утилитные классы: Позволяют управлять отступами, выравниванием, видимостью
элементов, цветами и другими часто используемыми задачами.
4.
Кроссбраузерность: Сайты, созданные с помощью Bootstrap, корректно отображаются в
большинстве современных браузеров.
5.
Адаптивность: Все элементы автоматически подстраиваются под размеры экрана,
обеспечивая удобство использования на мобильных устройствах.

4. Теория

Контейнеры (container, container-fluid) - основа для размещения контента.
Контейнеры в Bootstrap используются для содержания, заполнения и
центрирования контента. Они являются основным элементом макета и
необходимы для использования сеточной системы Bootstrap.
Строки (row) - горизонтальные группы колонок. Bootstrap использует серию
контейнеров, строк и столбцов для компоновки и выравнивания содержимого.
Сетка построена на основе 12-ти столбцов и 6-ти адаптивных уровней по
умолчанию. Это позволяет создавать макеты всех форм и размеров благодаря
десяткам предопределенных классов.
Колонки (col) - вертикальные блоки контента. Bootstrap использует
архитектуру Flexbox для управления колонками.

5. Основные классы и синтаксис колонок:

1.
container: Создает фиксированную ширину макета, зависящую от размера
устройства.
2.
row: Определяет, как колонки будут размещаться в строке.
3.
col: Определяет, как ширину колонки можно изменять.
4.
order: Упорядочивает колонки в зависимости от брейкпоинта.
5.
offset: Добавляет отступы между колонками.
6.
pull: Сдвигает колонку влево.
7.
push: Сдвигает колонку вправо.
Эти классы позволяют адаптировать макеты под различные устройства и
экраны, обеспечивая отзывчивость и адаптивность.

6. 12-колоночная система

12-колоночная система Bootstrap — это система сеток, используемая в
Bootstrap для создания адаптивных макетов. Она состоит из 12 колонок,
которые могут быть адаптированы для различных размеров экрана,
обеспечивая гибкость и адаптивность. Bootstrap использует flexbox для
компоновки и выравнивания содержимого, что позволяет легко создавать
сложные макеты. Сетка поддерживает шесть адаптивных контрольных точек,
что позволяет управлять размером и поведением контейнера и колонок.

7. Адаптивные точки останова:

Адаптивные точки останова Bootstrap — это строительные блоки адаптивного дизайна,
которые определяют поведение адаптивного макета на разных устройствах или размерах
области просмотра. Они позволяют контролировать, когда макет может быть адаптирован
для определенного окна просмотра или размера устройства.
xs (extra small) < 576px
sm (small) ≥ 576px
md (medium) ≥ 768px
lg (large) ≥ 992px
xl (extra large) ≥ 1200px
xxl (extra extra large) ≥ 1400px

8. Классы колонок

Классы колонок Bootstrap позволяют создавать гибкую и адаптивную разметку, используя
специальные классы. Классы колонок в Bootstrap позволяют создавать многоколоночные
разметки без необходимости вручную устанавливать ширину каждой колонки.
colcol-smcol-mdcol-lgcol-xl-
col-xxlЭти классы позволяют создавать адаптивные разметки, где ширина колонок изменяется в
зависимости от размера экрана устройства, на котором отображается веб-сайт.

9. Теория

Отступы (gutter) - расстояние между колонками
Выравнивание: по вертикали и горизонтали

10. Код

11. Код

12. Код

13. Код

14. Домашнее задание

Задание: Создайте адаптивный макет интернет-магазина с использованием Bootstrap сетки.
Требования:
Шапка с логотипом и навигацией
Боковое меню категорий (3 колонки на десктопе, скрывается на мобильных)
Основная область с карточками товаров (3 колонки на десктопе, 2 на планшете, 1 на
мобильных)
Футер с контактной информацией
Дополнительные задачи:
Добавьте отзывчивые изображения в карточки товаров
Реализуйте адаптивное меню с гамбургер-иконкой на мобильных
Используйте утилиты Bootstrap для отступов и типографики