Уроки Bootstrap 5 - Аккордеон на сайт

Подписаться 245 тыс.

Просмотров 8 тыс.

50% 1

Курс уроков Bootstrap 5 с нуля для разработчиков продолжается и в этом видео мы сделаем аккордеон для сайта своими руками благодаря компонентам Bootstrap 5. Bootstrap 5 позволяет собрать сайт словно конструктор из мелких частиц и деталей и добавить содержимое и контент на страницу. В этом видео мы добавим в нашу верстку сайта аккордеон из Bootstrap 5.
Курс «Frontend-разработчик» в SkillFactory: clc.to/bRwRkA
Скидка 45% по промокоду WD Blog

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@sadigzade.hi10 3 года назад

Очень плохо все объясняешь !!! Тупо, все что надо рассказывать, берешь просто пишешь без всяких объяснений Местами это требуется для понимания Потому что все друг от друга зависит

@SuprunAlexey 3 года назад

А что конкретно не понятно?

@toyotominashimoto9963 3 года назад

привет вебдев! а эти аккордеоны вообще нужны в верстке? по моему их применяют очень редко

@vitaliikulyk2060 2 года назад

не работает анимация аккордеона. картинки резко открываются. как исправить?

@HugoPCWorld 3 года назад

реализация, как по мне, ужасная для портфолию. смысл оставлять пустые места при нажатии на кнопки ( а если картинок очень много?) Используйте для этого Isotope

@mrin0 10 месяцев назад

@hamletmuradyan5692 2 года назад

Вы понимаете что-либо из того что объясняете?

@w1nner306 4 года назад

Автор, а насколько активно и целесообразно использование Bootstrap`a в 2020? Тк многие говорят о том, что grid`ы хорошо являются ему заменой и тд. Пытаюсь понять, стоит ли досконально изучать его.

@SuprunAlexey 4 года назад

Знать надо

@KrunchKost 3 года назад

Просьба пояснить смысл, почему при нажатии на Hello, 1ая и 3ья картинки убираются (соответственно с World и 3 и 4 картинкой); мне кажется смысл обратный: при нажатии Hello, то что относится к World должно скрываться. Сделал у себя так.

@ivansavkiv2765 3 года назад

Хотелось бы какой-то сложный аккордеон увидеть в следующих видео)

@Filislav 4 года назад

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

@Filislav 4 года назад

Upd. Решил проблему JS, написал функцию в теле которой window.scrollBy(0,100) и добавлением еще одного блока под аккордеоном. Эту функцию вызываю в свойстве onclick кнопки.

@toyotominashimoto9963 3 года назад

мистер! тут хватит и якорей html!

@КонстантинСнида-л2ю 3 года назад

Ок, вроде все понятно, но столкнулся с проблемой Сollapse присваивает скрываемому/показываемому объекту .show Но у меня он это делает даже если у класса уже есть класс .show т.е. если объект уже показан (имеет .show), он его удаляет и снова присваивает .show; Тем самым после первого показа объект всегда будет показываться и не будет скрываться. Что еще более интересно, даже полностью скопированный пример с оф.сайта bootstrap имеет такую же особенность, но на их сайте он работает адекватно. Кто сталкивался с такой проблемой и как решили? Может проблема в beta версии bootsrap 5?

@sparke2 3 года назад

Возможно это из-за того, что в документе два раза указан js скрипт, который подключает bootstrap. У меня он указан был вверху и внизу документа, из-за этого не работал accordion. После удаления одного из js скриптов, всё стало работать, даже примеры с сайта.

@nikitaukrainec948 3 года назад

Почему-то картинки не исчезают...

@sparke2 3 года назад

Нужно поменять data-toggle на data-bs-toggle и data-target на data-bs-target. Также нужно проследить, чтобы js скрипт, который подключает bootstrap, был в документе один раз. У меня картинки не закрывались из-за того, что js был не только в начале, но и в конце документа.