2 of 12

Назначение фреймворков для разработки адаптивного веб-дизайна

Адаптивный дизайн – это способ верстки, при котором ширина макета трансформируется под ширину устройства, что обеспечивает успешное восприятие на различных устройствах.
Фреймворк – это платформа, библиотека, сборник определённых правил. Фреймворк предоставляет уже встроенные классы для работы с формами, элементами и т.д.

3 of 12

Виды фреймворков:

бек-энд фреймворки – используются для создания программно-административной части;
фронт-энд фреймворки – используются для создания пользовательского интерфейса.
Front-end разработка — это создание клиентской части сайта.
Front-end разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса.

Фреймворк Bootstrap

Bootstrap – это фреймворк, набор HTML+CSS инструментов и шаблонов для более эффективного и быстрого создания веб-сайтов. Он построен по принципу mobile first.
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Bootstrap реализован с помощью флексбокса и полностью адаптивен. Система макета сетки состоит из двумерной структуры (строки и столбцы), которая служит для организации содержимого веб сайта. Благодаря флексбоксу колонки сетки без установленного атрибута «ширина» автоматически получают равную ширину.

Параметры сеток

Bootstrap использует em и rem для задания большинства размеров, а пиксели px – для контрольных точек («брейкпойнтов») сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.

Размеры сетки Bootstrap для разных устройств

Схема макетов сетки в Bootstrap

Сетка в Bootstrap является одним из наиболее важных компонентов структуры, она служит основой для создания всего макета.

Состав сетки Bootstrap 4

обёрточные контейнеры - элементы с классом container и container-fluid;
ряды - элементы с классом row;
адаптивные блоки - элементы, имеющие один или несколько классов, равных col или начинающихся с col.
Сетка Bootstrap обычно состоит из 12 полей.

Параметры сетки Bootstrap

Подключение Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Контрольные точки

Точки останова - это настраиваемая ширина, которая определяет поведение адаптивного макета на разных устройствах или размерах области просмотра в Bootstrap.
Bootstrap включает шесть точек останова по умолчанию, иногда называемых уровнями сетки , для быстрого построения.
Каждая точка останова была выбрана для удобного размещения контейнеров, ширина которых кратна 12. Точки останова также представляют подмножество общих размеров устройств и размеров области просмотра - они специально не нацелены на каждый вариант использования или устройство.