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:
- Перейдите на сайт fonts.google.com
- Найдите шрифт Poppins
- Выберите стили: 400, 500 и 700
- Скопируйте код @import и вставьте его в main.css.
Добавьте в main.css базовые стили:
html, body {
width: 100%;
height: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
В этом уроке мы подготовили рабочую среду. В следующих уроках мы начнем создавать шапку, подвал и другие блоки сайта.