**Свой сайт знакомств #4: верстка шаблонов страниц на Bootstrap, HTML и CSS — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/dating-site-bootstrap-html-css-layout/

Создание сайта знакомств: верстка страниц с использованием Bootstrap, HTML и CSS в режиме реального времени.

## Key Takeaways

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

## What the video covers

- Автор приветствует подписчиков и начинает работу над сайтом знакомств в реальном времени.
- Обсуждается использование Bootstrap 5 для верстки элементов страницы, включая формы и селекты.
- Демонстрируется создание и стилизация блока с анкетой пользователя, включая имя, возраст и описание.
- Показывается работа с отступами, цветами, шрифтами и радиусами скругления для адаптивного дизайна.
- Автор экспериментирует с заголовками h2-h5 для оптимального размера текста.
- Рассматривается адаптация верстки для мобильных устройств, включая расположение кнопок.
- Поясняется переопределение стандартных стилей Bootstrap для кастомизации элементов.
- Обсуждается добавление интерактивности, например, увеличение блока при наведении мыши.
- Ведется работа с CSS-классами для упрощения поддержки и адаптации дизайна.
- Автор делает акцент на удобстве и визуальной привлекательности интерфейса.

## Chapters

1. 00:00 Введение и обзор проекта
2. 01:56 Выбор версии Bootstrap и документация
3. 04:08 Работа с формой и селектом сортировки
4. 06:23 Настройка отступов и адаптивность
5. 11:54 Создание блока анкеты: фон, скругления и шрифты
6. 16:47 Настройка заголовков и текста возраста
7. 19:17 Корректировка отступов и размеров шрифтов
8. 28:14 Расположение кнопки и адаптация под мобильные устройства
9. 30:19 Переопределение стилей Bootstrap и работа с CSS
10. 37:17 Интерактивность и финальные настройки дизайна

Answers

## Questions about this video

Какую версию Bootstrap использует автор для верстки?

Автор выбирает последнюю версию Bootstrap 5 для использования в проекте, ориентируясь на официальную документацию.

Как автор решает проблему с размером шрифтов в блоке анкеты?

Автор экспериментирует с заголовками h2-h5 и обычными тегами, чтобы подобрать оптимальный размер шрифта для имени и возраста.

Почему важно адаптировать верстку под мобильные устройства?

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

## Full Transcript — Download SRT & Markdown

00:01

Speaker A

Добрый день, дорогие подписчики! Рад вас приветствовать на новом выпуске проекта "Свой сайт знакомств", где мы, соответственно, в режиме реального времени пытаемся создать свой сайт знакомств.

00:36

Speaker A

Так что у нас на данный момент есть? У нас есть, получается, свна различных анкет. У нас есть неплохой макет Фима, который мы сегодня попробуем как раз-таки доделать и превратить уже в полноценную вёрстку.

01:04

Speaker A

Так, в прошлый раз мы остановились с вами, получается, на фильтрации. Пока мы её оставим и перейдём к следующим блокам.

01:36

Speaker A

Так, тут у нас что? А давайте мы сразу с вами откроем, получается, документацию по пятому бутстрапу. Вот и будем заглядывать, какие у нас есть, получается, внутри элементы.

01:56

Speaker A

Так, так, так, да выберем, наверное, последнюю [музыка] версию.

02:20

Speaker A

Так, если вдруг нам что-то понадобится, а в середине странички что я вижу? Я вижу, а у нас есть сортировка.

02:47

Speaker A

Вот давайте мы вот эту сортировку, а сейчас возьмём и разместим. Я так понимаю, в виде сортировки у нас должен быть какой-то селект.

03:39

Speaker A

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

04:08

Speaker A

Так, это у нас форма. Дальше, дальше, дальше идём вниз по вёрстке. Как много мы с вами сделали в прошлом выпуске.

04:27

Speaker A

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

05:07

Speaker A

Так, файл сохранить, обновляем страничку. Всё, у нас есть тут селект сортировки. Пока оставим его таким. Хотя можно, наверное, перекрасить его.

05:45

Speaker A

Вот в такой вот цвет. Так, цвет я сейчас что? Цвет я скопирую и давайте мы ему попробуем задать цвет.

06:23

Speaker A

Так, это что? Граунд? Так, цвет у нас не скопировал. Се решёточник. Сортировка, по-моему, без цвета было лучше, поэтому что? Поэтому мы уберём, наверное, этот цвет. Пускай будет стандартная сортировка.

06:56

Speaker A

Замечательно, так оставляем. Таким образом главное, чтобы глаза не мозоли. А переходим к следующему блоку.

07:40

Speaker A

Отступ получается между сортировкой и первой анкетой сколько? 37 пикселей. Я предлагаю сделать просто 35.

08:16

Speaker A

Вот у нас есть уже, соответственно, готовые классы, которые мы используем для отступов. Зачем мы делаем именно такую вёрстку?

09:06

Speaker A

Да потому что потом в мобильной версии нам проще эти классы адаптировать, мы их можем скрывать и так далее.

10:03

Speaker A

Так, тут у нас что внутри? У нас с вами блок. Какого цвета?

10:33

Speaker A

Так, посмотрим, у нас блок получается вот такой вот розовенький. Что я сделаю? Получается, новый div, в нём что мы разместим?

11:25

Speaker A

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

11:54

Speaker A

Так, так, задаём фон. Дальше что?

12:40

Speaker A

Дальше у нас есть закругление в 10 пикселей. Так, border-radius сколько у нас получился? 10.

13:21

Speaker A

А внутри, внутри получается вот имя Маша. У нас посмотрим, какие отступы сверху, а со всех сторон по 30 пикселей должно быть.

13:38

Speaker A

Будем использовать динг 30 пикселей, 30 пикселей, 30 пикселей и ещё раз 30 пикселей со всех сторон.

14:12

Speaker A

Так, имя человека давайте будем использовать, допустим, h2. Посмотрим, какой он большой или небольшой, и пока сохраним.

14:54

Speaker A

Сохраним. Да, Маша очень большой размер получился. Попробуем h3 использовать.

15:44

Speaker A

Мы, конечно же, можем, наверное, завести этот класс. Ну хочется вот... Ну вот, как визуально выглядит, слишком здоровый.

16:20

Speaker A

Давайте h4 поставим. H4, сохраняем, се обновляем. Вот такое имя мне уже не кажется слишком большим.

16:47

Speaker A

Так, переходим дальше. Берём, получается, возраст. Возраст давайте попробуем сделать h5, наверное, чтобы он был ещё меньше.

17:45

Speaker A

Либо же мы вообще не будем использовать теги h2-6. Нет, слишком большой шрифт получился, поэтому что?

18:13

Speaker A

Давайте попробуем сделать обычным, получается, абзацем или просто жирным. Жирным, б, б, 26 лет.

18:56

Speaker A

Так, лучше, наверное, взять, получается, н и уже в заголовке мы его разместим для того, чтобы не было у нас никаких переходов и переносов.

19:22

Speaker A

Так, слишком много, слишком крупно получилось. Пос h4 правильно? Да, нам этого не нужно, поэтому что?

19:59

Speaker A

Поэтому давайте всё-таки мы сделаем это отдельные классы. Соответственно, внутри этого дива у нас будет уже находиться span.

20:35

Speaker A

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

21:11

Speaker A

Так, 24 пикселя. Так, получается, используем font. Не, давайте йл дальше. Фонт-сай 24 пикселя бы использоваться.

21:37

Speaker A

Так, стиль bold это сколько? Интересно, я не помню. Кхт, по-моему, так прописывается.

22:07

Speaker A

Так, 600 укажем. Угу. А предлагаю поступить следующим образом: у нас получается пускай Маша будет выделено жирным, а сам возраст мы жирным не будем выделять.

22:42

Speaker A

Потом, конечно же, мы это всё будем оборачивать ссылками и смотреть, как у нас что получилось.

23:15

Speaker A

Так, тут у нас что? Тут у нас также div должен быть. Сохраняем, обновляем.

24:01

Speaker A

Ну вот, более-менее. Единственное, мне бы хотелось сделать отступ побольше. Сколько? 23? Ну даже не 20, можно 30 вполне пикселей поставить.

24:35

Speaker A

Так, стайл. Так, margin-left 30 пикселей. То есть это сдвиг получается слева. Всё более-менее прилично. Может быть, n size поставить уже не 24 как-то, а у нас тут какой размер? Просто 20.

25:15

Speaker A

Так, n size 20 сделаем. Слишком много всё-таки. Давайте 25 поставим. 25, 25 пикселей. Всё равно слишком далеко, а в макете выглядит нормально.

25:47

Speaker A

Да ну нет, давайте тогда сделаем 20 пикселей просто отступ слева и смотрим, что получается.

26:12

Speaker A

Вот так, ещё более-менее. Дальше что?

26:39

Speaker A

Дальше у нас должен быть текст, себе текст p. Угу. И соответственно должна быть кнопочка. Кнопочка это у нас... А так-так-так, давайте найдём кнопочки у нас где? В бутстрапе компоненты, вот buttons.

27:06

Speaker A

За основу красной кнопки мы возьмём вот эту кнопку danger красного цвета, разместим её мы вот тут. И внутри мы что должны написать? Не "изучить анкету", а "к анкете", так, к анкете смотрим.

27:37

Speaker A

Да, кнопка красная, лучше её, конечно, прижать вправо бок. Вот, кстати, опять же, может быть, мы "изучить анкету" попробуем.

28:14

Speaker A

Такого мне уже сейчас такое расположение блока не нравится, потому что на мобилке нам опять же что? Придётся делать, нам придется, всё равно, вот эту кнопку спускать вниз.

28:47

Speaker A

Так зачем нам её спускать вниз сейчас? Ой, пытаться её прижать вправо, если на мобилке она всё равно уйдёт вниз. И вот тут у нас полный контент с описанием не будет размещён.

29:08

Speaker A

Поэтому что? Поэтому кнопку мы оставим внизу.

29:47

Speaker A

Так, давайте "изучить анкету" мы оставим. Да, "изучить анкету". Но единственное, нам нужно перекрасить вот этот вот стандартный блок вот в такой вот розовый цвет.

30:19

Speaker A

Так, стайл, но при этом сохранить все [музыка]. Ау! Сохранить все стандартные бутстрапы, и тут мы их запороли.

30:43

Speaker A

Замечательно, значит что? Давайте сейчас мы перенесём вот наши уже готовые классы в CSS.

31:12

Speaker A

Так, так, так. А мы завели специальный файлик для стилей, да, и просто сюда будем дописывать класс общего.

31:42

Speaker A

Вот это бло, это у нас что? Давайте его назовём, да? Или, например, женская анкета. Так, название скопирую на всякий случай, сохраняем.

32:15

Speaker A

Дальше что? Дальше тут girl. Дальше размер шрифта у нас должен быть обязательно. Ничего не изменилось, ничего не изменилось, значит всё делаем правильно.

32:45

Speaker A

Идём дальше. Размер шрифта n size давайте будем использовать. Так, name, лас name будет у нас с вами раз.

33:36

Speaker A

Напоминаю, что вообще в будущем это будет, конечно же, ссылка, пока мы просто так делаем.

34:01

Speaker A

Возможно, мы будем ссылаться сразу всем блокам, то есть есть такой вариант навигации, когда мы что делаем? Ничего не поменялось.

34:43

Speaker A

Когда мы наводим, например, мышкой на блок, и он слегка увеличивается на 5-10%. Вот это очень выглядит здорово и привлекательно. Вполне возможно, мы так и сделаем.

35:14

Speaker A

Так, name и сделаем ещё один класс, отвечающий за возраст. Где он? Так, сворачиваем возраст.

35:40

Speaker A

Файл сохранить, идём дальше. Возраст, замечательно, блок меня устраивает, как выглядит.

36:32

Speaker A

И единственное, что мы сейчас... Давайте вот эту кнопочку Button Danger мы её перекрасим, прописывали и укажем вот такой вот розовенький цвет.

37:02

Speaker A

Если нужно будет, мы избавимся от рамочек, которые у нас есть уже. Для чего это делается? Это делается, чтобы сохранить, то есть перезаписать стандартное, получается, стиля бутстрапа.

37:38

Speaker A

А вот он вообще не срабатывает.

38:22

Speaker A

Так, посмотрим на нашу кнопочку. Почему нельзя оставлять такой яркий?

38:47

Speaker A

Ну потому что у нас полностью всё внимание перетягивает вот эта вещь button Danger.

39:26

Speaker A

Так, тут сохранились. А может быть, я вот этот файл не пересохранил? Да, всё, вот хоп.

39:58

Speaker A

То есть она становится красненькой при наведении, но мне не нравится, что у нас есть, получается, рамочка.

40:27

Speaker A

Что мы сделаем? Мы просто border: none для того, чтобы убрать вот эту рамочку вокруг. Всё замечательно, рамочки нету при нав...

41:05

Speaker A

рынок пиарить и смотреть что с ней будет дальше по-моему интересно решение Да Единственное что бы я сделал я бы между ними отступ подставил побольше поэтому что поэтому давайте колоночки мы сделаем размером по по внутри просто сделаем пустую колоночные

41:47

Speaker A

так раз вот это уже мне нравится это уже приятно более-менее выглядит всё понятно единственно кнопочку я не перекрасил Поэтому у кнопочки мы возьмём что нам нужно вот эту кнопочку взять раз так Смотрим код просто скопирую и вставим вместо

42:16

Speaker A

кнопочки так вместо кнопки войти Да мы сделаем Кстати если у вас есть иде созданию своего собственного стартапа напишите мне Мы можем с вами сделать коллаборацию вполне то есть и вы можете пропиарить свой бизнес Да с помощью YouTube канала и готового проекта в

42:45

Speaker A

дальнейшем и мне опять же будет контент для моего проекта вот можем Здорово помочь друг другу ниже ниже что у нас есть ниже У нас есть анкеты три анкеты будем их мне уже не нравятся Как выглядят три анкеты давайте

43:07

Speaker A

мы это делать не будем мы просто вот этот Нижний блок сейчас реализуем один а остальное продолжим уже наверное на следующих уроках так посмотрим как это ВС выглядит в данный момент ничего не поломалось нет ничего не поломалось Так значит что значит

43:37

Speaker A

сверху мы с вами пропустим 35 пикселей как и везде мы пропускали уже вот Сверху Раз дальше что хотя бы один вот такой вот информационный блок с плюсами сделаем чтобы было Так что у нас тут класс так контейнер внутри что а внутри мы уже

44:11

Speaker A

соответственно будем указывать так так так Нам же вот такой вот блок нужен на всю ширину будем указывать так дальше Что Дальше первый блок сделаем так так так первый блок у нас Сколько должен быть вот полностью рованный поиск раз отступы сверху тоже похожие Нет не

45:05

Speaker A

по 30 пикселей сверху 50 справа вообще 68 Ну давайте сделаем 30 чтобы на мобилке нормально смотрелось снизу также будет 50 и справа так справа также 30 ставил сверху 50 так сверху 50 пикселей справа получается 30 50 пикселей 30

45:38

Speaker A

пикселей закрываемся дальше что внутри давайте мы пропишет например потому что это можно взлететь хорошо в поиск вот если использовать все все возможности вёрстки Пусть видит Да что у нас есть персонализированный поиск Блин так посмотрим как у нас блок

46:11

Speaker A

внутри выглядит раз а мы забыли цвет указать Ну конечно Граунд не прописали так и вот тут Бордер радиус отступим сколько вот по макету сколько у нас пикселей отступ 65 надо много Я предлагаю пока ограничиться тридцать пятью и допустим у нас с вами будет два

47:04

Speaker A

Вот таких вот блоков внутри посмотрим так персонализированный поиск м не попали вёрстку так как это а получилось Мы это потому что не завели а получается новый блок внутри так так так div Давайте класс Call 12 пускай будет раз это вот первый блок у

47:48

Speaker A

нас это раз И тут мы сделаем ещё один блок соответственно Когда уже будем размещать картинки внутри Всё у нас должно быть хорошо супер Я думаю на сегодня мы с вами закончим этот выпуск обязательно подписывайтесь на канал ставьте лайки Я

48:21

Speaker A

жду вас в сообществе на бусте Если вдруг есть какие-то идеи по доработке этого проекта или по другим проектом У вас есть предложение обязательно напишите мне я всё выслушаю и с вами свяжусь Всё Всем спасибо за внимание увидимся

Topics: Bootstrap верстка HTML CSS сайт знакомств адаптивный дизайн фронтенд веб-разработка стилизация интерактивность


---
This is the markdown twin of https://sozai.app/transcript/dating-site-bootstrap-html-css-layout/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/