Урок 18. Табы и аккордеон для сайта | Курс Веб разработчик | Академия верстки

Автор Denis Lisitsin
Урок 18. Табы и аккордеон для сайта | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артём Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно на YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашним дипломом и так далее.

Вам необходимо перейти по ссылке в описании или вот там справа в углу будет значок информации.

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту. И после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на YouTube. Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Всем привет. С вами. Артем Исламов мы продолжаем изучать основы веб-разработки. Сегодня мы говорим с. Вами про табы и аккордеон новичку может быть непонятно, что — это вообще такое. Что — это за. Табата, что — это за аккордеон мы будем рассматривать мы уже рассмотрели слайдеры. Мы уже рассмотрели всплывающие окна — это интерактивные элементы на сайте которые добавляют в динамике нашему сайту так вот динамику для интерфейса ещё добавляют такие вещи как-то бы и аккордеон мы уже говорили о том, что слайдер служит для того чтобы скрыть контент и вместе в одном блоке. То есть можно слайды и увидеть много контента сразу в одном месте то бы и аккордеон служит той же сам то есть уместить и компактно разместить контент на сайте для того чтобы было понятно. Я просто передал посылки Get bootstrap JavaScript Tips не увидим с вами. Как выглядят эти самые топовые. Что такое табы самый простой пример. Тамбов Это ваши вкладки в вашем браузере браузер занимает всё ваше, но вкладок у вас может быть открыта сотни десятки при этом весь контент получается помещается на одном вашем экране самый простой пример. Тамбов вкладки в вашем браузере. Здесь тоже самое то есть вкладки bootstrap позволяет сделать подобные табы табы нужны для того чтобы перечислить преимущества которые есть на сайте для того чтобы показать разные разделы может быть разные отцы или разные по структуре элемент и очень часто они нужны для навигационного меню и так далее то бы используется не так часто как например всплывающие окна, но тем не менее они есть и очень часто встречаются на сайте. Поэтому чтобы подключить их можно воспользоваться просто готовы Metabo meatbusters — это действительно сэкономит время нежели вы будете писать как самостоятельно. Можно конечно написать табы на гитаре очень быстро, но очень много времени потратили потратив на то, что уже в принципе есть готовая к тому же у вас уже подключено библиотеку jquery к сайту и подключены bootstrap.min.css то — это не составит труда. Как пользоваться этими табами всё очень просто здесь есть разметка. Мурка мы возьмём эту разметку скопирую и откроем в нашем в нашем html-документе система документ пустой поэтому я нажму контрл Shift P напишу старт и у меня возникнет сниппет bootstrap 3 template стартер я выберу эту тему чтобы сразу мне стартовый базовый шаблон здесь есть много лишних вещей. Вот например навигация и контейнер. Я здесь беру оставлю ну контейнер был нелишним ставим контейнер и вставим сюда то, что мы скопировали — это наше навигация в виде тапов здесь есть. Хоум Profile Manager I See things браузере. Я вижу вот эти вот вкладки табы. Все работает работает потому, что не видно, что работает потому, что здесь ничего не надо здесь напишу, что это. Холодно здесь, что — это Profile смотрим Home Profile Manager settings. Мы можем поставить туда разные картинки например например вот эти будет 1 2 3 ну и здесь ничего. Суть в том, что внутри. Тамбов может быть всё, что угодно и эти то бы они роль имена в одном месте собрать много контента и показать его. Как добавить свою новую вкладку и как они вообще работают. Давайте разберемся и так чтобы было читать я вот — это разнесу на разные строчки чтобы было понятно, что здесь происходит и так у нас есть список маркированный список который имеет класс на стандартном постряпушки и. Лепс роль можно убрать — это близко всё равно будет работать поэтому значение большого ними — это больше для села разметки затем. Есть ли роль его презентация собственная до Class Active Class говорит о том, что именно — это изображение или именно — это содержимое сейчас показывается — это Class Active внутри находится. Точнее не так. Это же у нас то бы чтобы вы здесь вас такси обводит элемент вот такой вот грамматикой то есть активный элемент всегда видел бы такого трубочкой и мы видим. Какой из элементов сейчас активен дальше идёт сама ссылка причём ссылка ссылается на какое-то идентификатор Home выделим я вижу, что выписывается на вот этот вот индикатор Home здесь. Затем идёт и я — это не нужно роль тоже не нужно — это путает я сейчас уберу чтобы не путать потому, что это.

0 комментариев
0

Читайте также