Bootstrap 4: Адаптивный сайт с нуля. Урок 1

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

Изучение Bootstrap 4

Этот курс сфокусирован на практическом применении Bootstrap 4, предлагающей множество новых возможностей. В частности, в CSS используется Flexbox для построения блоков. Подробное изучение всех встроенных стилей и JavaScript-функций Bootstrap освещено в другом видеокурсе (ссылка доступна на сайте [ссылка на сайт]).

Структура сайта

Мы создадим адаптивный веб-сайт со слайдером изображений, кнопками для раскрытия скрытых блоков и другими элементами. Дизайн будет продуманным, с использованием стилей Bootstrap 4 и собственных стилей. Дополнительные материалы, включая домашние задания и готовый код, доступны на сайте [ссылка на сайт].

Настройка среды

Вам понадобится текстовый редактор (например, Atom, доступный для Windows и macOS). Создайте папку www и внутри нее файл index.html с базовой HTML-разметкой: <html>, <head> (с мета-тегами и заголовком <title>), и <body>.

Подключите необходимые файлы стилей:

  • Стили Bootstrap
  • Дополнительные JavaScript-файлы (для слайдера и др.)
  • Файл с собственными стилями main.css
  • Файл со шрифтами (иконки)

Код подключения стилей (доступен по [ссылка на сайт]):

<!-- Подключение стилей и скриптов -->

Создайте папку css и файл main.css. Подключите в main.css шрифт Poppins из Google Fonts:

  1. Перейдите на сайт fonts.google.com
  2. Найдите шрифт Poppins
  3. Выберите стили: 400, 500 и 700
  4. Скопируйте код @import и вставьте его в main.css.

Добавьте в main.css базовые стили:

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;
}

В этом уроке мы подготовили рабочую среду. В следующих уроках мы начнем создавать шапку, подвал и другие блоки сайта.

Что будем искать? Например,программа