В этом упражнении мы рассмотрим навигацию на основе вкладок Bootstrap,
поддержку Bootstrap для вкладок
и то, как вкладки могут быть использованы для организации контента на вашей веб-странице.
И как вы можете перемещаться с одной вкладки на другую,
а затем отображать содержимое на каждой из этих вкладок на веб-странице.
Теперь вы увидите меня, используя класс nav,
а затем дополнительно квалифицируйте его с помощью класса nav tabs.
Тот же подход может быть использован и с пилюлями навигации
, которые мы рассматривали в предыдущей лекции.
Чтобы начать с этого упражнения,
мы перейдем на страницу aboutus.html.
И тогда прямо там,
где у нас есть контент корпоративного лидерства там,
после h2, я собираюсь представить навигацию с вкладками.
Итак, здесь я собираюсь использовать ul с классом nav nav-tabs.
Итак, вы видели, что ранее, когда мы построили навигационную панель,
мы также использовали ul внутри навигационной панели, чтобы указать навигационные элементы там.
Аналогичный подход здесь, за исключением того, что здесь мы собираемся
использовать ul с nav и nav вкладки здесь.
Итак, внутри этой ul,
мы построим структуру навигации для этой навигации с вкладками здесь.
Поэтому там я буду использовать элемент списка с классом nav-item
и строить навигацию вокруг этого элемента списка.
Таким образом, это вводит первый элемент в мои вкладки навигации.
Сразу после этого внутри я представлю a с классом nav-link active.
Итак, этот, как вы видите,
если вы помните, как мы используем ul с элементом навигации и навигационной ссылкой.
В навигационной панели
мы видим подобный подход здесь.
Итак, nav-элемент активен, а затем href.
Таким образом, это будет ссылка на панель вкладок позже,
которая будет иметь идентификатор Петра там,
а роль - вкладка для этого
и вкладка переключения данных.
Таким образом, вы можете увидеть компонент javascript Bootstrap, входящий в картинку здесь.
А потом я скажу Питеру Пэну,
а потом закрою бирку.
Таким образом, это завершит нашу первую вкладку в нашей навигации с вкладками.
Позвольте мне завершить остальную часть кода,
а потом мы вернемся и проверим остальную часть кода.
Итак, здесь вы можете видеть, что я завершил эту навигационную структуру здесь.
Точно так же, я определяю список для остальных свободных корпоративных лидеров здесь.
Теперь это, позвольте мне сохранить изменения.
А затем давайте посмотрим на веб-страницу.
Переключившись на веб-страницу,
вы теперь увидите, как с помощью вкладок навигационной навигации мы создали
эту структуру навигации прямо под корпоративным руководством здесь.
Итак, эта структура навигации означает, что я должен иметь возможность перемещаться и
просматривать каждый из них более подробно, нажав на это.
Итак, вот как здесь работает навигация с вкладками.
Теперь, очевидно, содержание каждого из них должно
соответствующим образом показывать здесь только детали этого человека.
Таким образом, это где использование содержимого с вкладками
и классов панели вкладок вступит в силу.
И мы собираемся заключить этот контент с помощью этого.
А затем привяжите это к этой
навигации, вкладки навигации здесь,
так что только одна информация корпоративного лидера
отображается на экране за раз.
После того, как мы завершим настройку этой навигации с вкладками,
мы перейдем вниз к фактическому контенту здесь.
И теперь я собираюсь реорганизовать этот контент в четыре отдельных панели вкладок,
каждая из которых будет отображаться, когда
соответствующая панель вкладок выбрана в навигации с вкладками.
Итак, чтобы начать,
первое, что мы собираемся сделать, это войти и разделить
каждого из этих четырех корпоративных лидеров на четыре части,
чтобы мне было легко понять, что я делаю.
Итак, на h3,
я разрезаю их на четыре разные части,
и тогда мы сможем работать с ними.
Итак, теперь у меня есть один, два, три, четыре.
Таким образом, этот контент теперь должен быть заключен внутри div
с классом tab-content.
Таким образом, весь этот контент, который у нас есть для
четырех разных корпоративных лидеров, должен быть заключен внутри div tab-content.
Итак, теперь я заключил это внутри контакта вкладки.
Теперь для каждого из них
мне нужно создать еще один div с панелью вкладки классов и некоторыми дополнительными классами.
А затем организовать этот контакт.
Итак, давайте начнем с первого.
Итак, для первого корпоративного лидера,
я собираюсь представить новый div с ролью в качестве вкладки.
Таким образом, это служит панелью вкладок, которая будет отображаться
при выборе первой навигации по табуляции.
И соответствующий класс, который мне нужно применить, - это панель вкладок.
Итак, это панель вкладок,
фактическое содержимое, которое содержится там.
И тогда еще один класс, который я применяю, - это исчезает.
Таким образом, класс fade позволяет этому контенту исчезать.
Итак, это класс анимации, который поддерживает Bootstrap.
Кроме того, я применяю этот класс под названием show.
Класс show по существу указывает
, что этот конкретный контент должен отображаться при первом отображении страницы.
Таким образом, он применит класс show только к первой панели вкладок,
остальные панели вкладок не будут применять класс show.
И последний класс, который я собираюсь применить, активен, потому
что это панель вкладок, которая будет отображаться на странице при первом отображении страницы.
Кроме того, для работы навигации
мне нужно дать это a и ID,
и поскольку я использовал хэштег Peter для содержимого навигации по вкладке,
поэтому я собираюсь применить идентификатор как Питер здесь.
И поэтому, когда это упоминается в ссылке там с хэштегом Peter,
это соответствующая панель, на которую я имею в виду.
Теперь, что я собираюсь сделать, я собираюсь скопировать этот div оттуда.
И тогда я собираюсь применить этот div к информации второго корпоративного лидера,
за исключением того, что для этого я должен применять только панель вкладок и соответствовать.
Шоу и активный не должны применяться для остальных трех.
И удостоверение должно быть Дэнни для второго.
Я просто скопирую этот код,
а затем вставьте его для третьего корпоративного лидера здесь.
А затем панель вкладок, а третья - Агумбе.
И последний,
опять же, я вставляю это в,
а затем идентификатор должен быть изменен на Альберто,
и закрыть этот div здесь.
Итак, этот div для последнего должен быть закрыт в этот момент.
И это должно позаботиться о четырех панелях вкладок, которые мне нужны.
Входя и отступая это содержание,
чтобы я был доволен,
моя одержимость довольна там.
Хорошо, это завершает организацию содержимого вкладки.
Теперь давайте сохраним изменения и
посмотрим на то, что сейчас нравится веб-страница.
Перейдя на нашу веб-страницу,
вы теперь видите, что наша веб-страница отображает только содержание, соответствующее их генеральному директору.
Если вы переключитесь на любой из других,
вы увидите, что соответствующая информация отображается.
И обратите внимание, как эта информация исчезает при выборе конкретного пользователя.
Но, конечно, если вы довольны этим,
то это нормально, мы можем остановиться на этом этапе.
Но я хотел бы красиво определить реальную вкладку вокруг этого.
Итак, здесь я собираюсь применить несколько атрибутов CSS,
свойств для этой конкретной вкладки здесь,
чтобы
там была хорошая, чистая структура вкладок.
Итак, давайте создадим несколько свойств CSS для этого.
Последний шаг, переключение на styles.css.
После обратной навигационной панели
я собираюсь ввести классы CSS для содержимого вкладки,
поэтому я указываю для содержимого вкладки,
граница-слева: 1px solid DDD.
И я собираюсь применить то же самое для границы справа и снизу.
Мне не нужно применять к вершине, потому что верхняя часть
уже регулируется навигацией по вкладкам.
А затем позвольте мне дать отступ 10 пикселей вокруг,
а затем сохранить изменения.
Давайте посмотрим на нашу веб-страницу после этого.
Возвращаясь к нашей странице,
теперь вы видите красивую,
чистую структуру, подобную вкладкам, создается.
Таким образом, когда вы переходите к каждому из них
, соответствующая информация отображается в его собственной вкладке.
Это завершает это упражнение, где мы
рассмотрели использование вкладки навигации для нашей веб-страницы.
И тогда мы увидели, как мы можем создать навигацию по вкладкам и заключить другой контент.
Это также хорошее время для вас сделать Git комментарий с вкладками сообщений.