Введение в Bootstrap 5

Bootstrap 5 — это мощный CSS-фреймворк, который облегчает создание адаптивных и мобильных веб-сайтов. Он включает различные компоненты, утилиты и шаблоны, которые помогают разработчикам быстро создавать интерфейсы.

Подключение Bootstrap к проекту

Чтобы использовать Bootstrap в вашем проекте, необходимо подключить CSS и JS-файлы. Это можно сделать через CDN или локально, скачав файлы с официального сайта.

Подключение через CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>

    <!-- Ваш контент -->

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Для подробного ознакомления с другими элементами и возможностями Bootstrap можно посетить официальный сайт здесь.

Сеточная система Bootstrap

Сеточная система Bootstrap состоит из контейнеров, строк и колонок. Она поддерживает адаптивные макеты с использованием брейкпоинтов, которые автоматически подстраиваются под размер экрана. Это позволяет создавать как фиксированные, так и гибкие макеты.

Колонки и брейкпоинты

Колонки в Bootstrap работают на основе 12-колоночной сетки. Они адаптируются к разным брейкпоинтам, что позволяет легко управлять адаптивностью макетов.

Пример использования брейкпоинтов:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">Контент</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Контент</div>
  </div>
</div>

Таблица брейкпоинтов:

Размер экрана	Минимальная ширина	Класс
Extra small (xs)	< 576px	`.col-`
Small (sm)	≥ 576px	`.col-sm-`
Medium (md)	≥ 768px	`.col-md-`
Large (lg)	≥ 992px	`.col-lg-`
Extra large (xl)	≥ 1200px	`.col-xl-`
Extra extra large	≥ 1400px	`.col-xxl-`

Типы контейнеров

В Bootstrap есть несколько типов контейнеров:

.container: имеет фиксированную ширину для каждого брейкпоинта.
.container-fluid: занимает 100% ширины экрана на любом устройстве.
.container-{breakpoint}: фиксированная ширина, адаптируемая к определенному брейкпоинту, например, .container-md.

Пример:

<div class="container">
  <div class="row">
    <div class="col">Колонка 1</div>
    <div class="col">Колонка 2</div>
  </div>
</div>

Компоненты Bootstrap

Bootstrap предоставляет большой набор готовых компонентов для создания современных интерфейсов. Рассмотрим некоторые из них более подробно.

Кнопки и их состояния

Кнопки в Bootstrap — это один из самых популярных элементов. Они легко стилизуются и могут принимать различные состояния. Стилизация кнопок достигается добавлением различных классов.

Основные стили кнопок:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
...

Кроме основных стилей, кнопки могут находиться в различных состояниях:

Active: делает кнопку активной. Пример: class="btn btn-primary active".
Disabled: делает кнопку неактивной (недоступной). Пример: class="btn btn-primary" disabled.
Outline: кнопки с рамкой и прозрачным фоном. Пример: class="btn btn-outline-primary".

Пример с активной и неактивной кнопками:

<button type="button" class="btn btn-primary active" aria-pressed="true">Активная</button>
<button type="button" class="btn btn-secondary" disabled>Неактивная</button>

Модальные окна

Модальные окна — это всплывающие диалоговые окна, которые позволяют взаимодействовать с пользователем. Их можно использовать для подтверждений, ввода данных или показа дополнительной информации.

Пример модального окна:

Другие компоненты

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

Для более подробного изучения всех компонентов и их возможностей посетите официальную документацию Bootstrap

Практическое задание: Адаптивный лендинг с использованием Bootstrap

Цель этого задания — познакомиться с возможностями Bootstrap и научиться использовать его для создания адаптивных веб-сайтов. Задание разделено на две части: первая для знакомства с основными возможностями Bootstrap, вторая — для создания более сложного проекта.

Часть 1: Знакомство с Bootstrap

Ваша задача — восстановить внешний вид и функционал сайта на основе предоставленной DOM модели, используя Bootstrap. Это задание поможет вам освоить стилизацию и компоненты Bootstrap для создания современных и адаптивных веб-страниц.

Файл с DOM моделью можно загузить по ссылке

Готовый вариант

На что нужно обратить внимание:

Навигация

Добавьте классы Bootstrap для панели навигации.
Используйте navbar с темной темой и классами navbar-expand-lg, bg-dark и fixed-top.
Обеспечьте адаптивность меню с помощью collapse и toggler элементов.

Главная секция

Примените классы для выравнивания текста в центре (например, text-center).
Добавьте отступы с помощью классов py-3 и mt-5 для соответствия исходной верстке.
Используйте стили для кнопки btn, btn-primary, btn-lg.

Карусель с изображениями

Используйте компонент Carousel для создания слайд-шоу.
Убедитесь, что изображения занимают полную ширину и высоту с помощью классов card, card-img-top.
Добавьте кнопки prev и next для управления каруселью, используя классы carousel-control-prev и carousel-control-next.

Таблица с VPN серверами

Используйте таблицу с классами Bootstrap table и table-bordered.
Включите стили progress bar для отображения нагрузки на серверы.
Для выравнивания текста используйте классы align-middle.

Настройка шифрования VPN

Добавьте компонент range input с использованием стиля form-range для настройки уровня шифрования.
Обновляйте отображение выбранного значения с помощью JavaScript.

Отзывы пользователей

Воспользуйтесь компонентом Carousel для переключения отзывов пользователей.
Используйте стили blockquote и blockquote-footer для создания отзывов.
Убедитесь, что слайдер работает плавно, и отзывы не накладываются друг на друга.

Форма контактов

Примените floating labels для полей ввода формы.
Добавьте валидацию формы с использованием Bootstrap классов was-validated, is-invalid и is-valid.
Поля формы должны быть адаптивными и удобными для ввода.

Дополнительные требования

Валидация формы

Реализуйте клиентскую валидацию формы, используя встроенные стили Bootstrap для валидации (.was-validated, .invalid-feedback).

Scrollspy

Добавьте функциональность scrollspy, чтобы подсвечивать активные ссылки навигации в зависимости от прокручиваемой секции.

Часть 2: Создание проекта (доп. задание)

У вас есть два варианта для выполнения этой части задания:

Создание сайта на выбранную вами тематику: Например, вы можете выбрать тему любимой музыкальной группы, фильма или другого хобби. Необходимо разработать уникальное наполнение для своего сайта, чтобы результат отличался у всех.
Верстка сайта по шаблону: Используйте следующий шаблон с Figma: ссылка на шаблон. Если вы решите верстать по шаблону, обратите внимание, что если просто скопировать код, это будет сразу выделяться, так как вы ещё не изучили все технологии, использованные в оригинальной верстке.

Дополнительные требования:

Проверьте работу сайта на всех популярных размерах экрана, начиная от мобильных телефонов до больших мониторов.
При успешной отправке формы должно появляться сообщение об успехе, при ошибке — предупреждение.
Обратите внимание на использование иконок и кнопок, применяйте их стилизацию с помощью Bootstrap.