Уроки Bootstrap 5 - Модальное окно верстка

preview_player
Показать описание
В данном уроке мы научимся делать модальные окна, незаменимый инструмент любой верстки сайта любого проекта. Часто вы можете встретить модальные окна на сайте для регистрации или авторизации. Часто можно найти им и дургое практическое применение везде. Верстка сайта без модальных окон невозможна, их обязательно нужно уметь делать и как раз Bootstrap 5 позволяет с легкостью их выполнять незаивисимо от сложности проекта.

Скидка 45% по промокоду WD Blog
  1. Web Developer Blog
  2. уроки bootstrap
  3. bootstrap уроки
  4. bootstrap для начинающих
  5. уроки bootstrap верстка сайта
  6. верстка сайта bootstrap
Рекомендации по теме
Уроки Bootstrap 5 0:09:19

Уроки Bootstrap 5 - Модальное окно верстка

Урок 3. Bootstrap5. 0:10:55

Урок 3. Bootstrap5. Быстрый старт. Компонент Modal в Bootstrap5

Уроки Bootstrap / 0:07:48

Уроки Bootstrap / Как сделать модальное окно, всплывающее окно на сайте...

#2 Уроки по 0:29:30

#2 Уроки по Bootstrap 5 - Шапка, модальное окно, градиент, треугольник, адаптивное видео...

Уроки Bootstrap 5 0:08:54

Уроки Bootstrap 5 - Введение и установка

Уроки Bootstrap 5 0:08:10

Уроки Bootstrap 5 - Форма регистрации компонент

Уроки Bootstrap верстки 0:13:24

Уроки Bootstrap верстки / #12 - modal.js (модальные окна)

#7 Уроки по 0:06:42

#7 Уроки по Bootstrap 5 - Практика и задание по работе с Bootstrap 5

Урок 237. Компонент 0:09:44

Урок 237. Компонент Modal - модальное окно от Bootstrap. Часть 1.

Урок 1. Bootstrap5. 0:10:52

Урок 1. Bootstrap5. Быстрый старт. Подключение Bootstrap5

#9 Как создать 0:10:56

#9 Как создать модальное окно на Bootstrap 4, Уроки по Bootstrap 4

Уроки по Bootstrap 0:10:56

Уроки по Bootstrap 3 | #14 Создаем модальное окно

Уроки Bootstrap 5 0:12:16

Уроки Bootstrap 5 - Система сетки

#6 Уроки по 0:10:53

#6 Уроки по Bootstrap 5 - Адаптивные изображения на Bootstrap 5

Урок 4. Bootstrap5. 0:08:52

Урок 4. Bootstrap5. Быстрый старт. Компонент Carousel в Bootstrap5

Урок 12 - 0:19:39

Урок 12 - Кастомизация Bootstrap

Урок #1 - 0:11:11

Урок #1 - Система сеток Bootstrap 5

Уроки React JS 0:11:44

Уроки React JS + Bootstrap на практике - Форма регистрации, модальное окно...

Уроки Bootstrap 4 0:11:07

Уроки Bootstrap 4 - Делаем модальные окна

Spring MVC и 0:28:43

Spring MVC и модальное окно для редактирования

#1 Уроки по 0:20:37

#1 Уроки по Bootstrap 5 - Обзор, загрузка и подключение

Галерея и модальное 0:04:20

Галерея и модальное окно за 5 минут

Модальное окно bootstrap. 0:13:25

Модальное окно bootstrap. Урок №9.

Урок 2. Bootstrap5. 0:27:23

Урок 2. Bootstrap5. Быстрый старт. Компонент Navbar в Bootstrap5

Комментарии
Автор

(uk) 2:48 замість "ml" введіть "ms" (зміни 5 версії) це у відступах кнопок
(ru) 2:48 вместо "ml" введите "ms" (изменения 5 версии) ето при отодвигании кнопок

olesvitrianyi
Автор

Данная вeрстка не подходит для bootstrap 5. ml-3 класс был в 4 версии.
С 5ой версии ml на ms заменили.
В теги добавили приставку bs-
Например: data-target заменили на data-bs-target

rtckgze
Автор

У кого не получается: ЗАМЕНИТЕ data-toggle на data-bs-toggle aria-labelledby на aria-bs-labelledby data-dismiss на data-bs-dismiss aria-label на aria-bs-label. Вроде все упомянула, какие надо заменить. Проблема в конфликте версий: автор записывает на альфа версии (или на какой там?), в релизе добавили эти приставки.

icelandochka
Автор

Отличные уроки, с удовольствием прохожу их!

Filislav
Автор

Что может быть лучше, чем бокал красного сухого вина и всусный сыр под новую серию уроков по Bootstrap 5) В этом уроке у меня уже все получилось с первого раза. Спасибо за труд!

volodymyrvikarchuk
Автор

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

yankoli
Автор

если у вас не закрывается когда нажимайте на "Х", в data-dismiss измените на data-bs-dismiss, после этого будет работать

alberttoktoraliev
Автор

Зробив все як в відео, а форма не відкривається, в чому може бути проблема?

kwogbzl
Автор

Лучше понял в этом видео чем от работы 2 часа на сайте

fazulf
Автор

Не открывается модальное окно. В чём причина?
<div class="d-flex">
<button type="button" class="btn btn-outline-success me-3" data-bs-toggle="modal" in</button>
<button class="btn btn-outline-danger">Sign out</button>
</div>
</div>
</div>
</nav>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dilog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
<button class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
</div>

alexxpo
Автор

Где скриптовая часть создания модального окна?

yurikfirst
Автор

Все сделал как в видосе но кнопкам sing in и sing out не задается отступ ml-3 .

Tech_Noir
Автор

Что то не работает класс "btn-close", в правом углу в модалке просто не крестик, а прямоугольник пустой с фоном и обводкой. А когда в button добавляешь <span> aria-hidden="true">&times;</span>, то все работает.

evgen
Автор

за видос лайк! а разработчикам бутстрапа претензия: многовато надр запоминать для одного компонента!

toyotominashimoto
Автор

у меня не работает x все оменял как нужно для 5 вресии помогите кому не сложно

Gurbanov_ibra