Аккордеоны являются одним из тех раздражающих инструментов, которые некоторые из вас, возможно, видели уже.
Здесь есть один из этих сильфонов с клавиатурой внизу, а затем вы дуете, а затем играете музыку с ключами там.
И не всем это нравится.
Я почти уверен. Но без обид на аккордеонов игроков.
Аккордеоны в бутстрапе очень интересны наверняка.
Мы рассмотрим, как мы применяем аккордеоны, чтобы иметь возможность раскрывать и
скрывать контент на нашей веб-странице в этом упражнении.
Возвращаясь к About Us на HTML-странице, где у нас была информация о корпоративном лидерстве.
Теперь я собираюсь заменить верхнюю навигацию навигацией на основе аккордеона.
Я собираюсь удалить этот UL, который полностью определяет термин навигации.
А потом мы создадим аккордеон вокруг контента, который у нас уже есть.
Итак, давайте удалим этот UL, который содержит вкладку навигации, чтобы они остались
только с этой частью, которая заключена внутри верхней панели и верхнего содержимого.
Итак, мы собираемся пойти и изменить это.
Перейдя к этому div здесь,
я собираюсь удалить этот класс оттуда, а затем я применяю идентификатор как аккордеон.
Нам нужен этот идентификатор позже, чтобы иметь возможность создать аккордеон, который div,
который содержит этот контент, все еще на месте.
Таким образом, верхний контент теперь изменен на аккордеон.
Теперь, каждый из этого контента здесь,
мы собираемся преобразовать это в
структуру, основанную на карте, чтобы они могли раскрыть содержание в
каждой из этих карт, чтобы вы увидели меня, используя карту и
классы тела карты там, чтобы вложить это содержимое.
Теперь, зайдя в фактический контент здесь,
я собираюсь начать применять класс карты здесь с div там.
Итак, мы скажем, «карта класса div», а
затем закройте div там, а затем этот контент попадает в div там.
Теперь, здесь, мы собираемся войти и
создать div с классом «заголовок карты».
Я покажу вам один из них, а затем мы
повторим этот процесс и для остальных трех.
Итак, мы скажем, «вкладка заголовка карты», а затем «id pethead».
Я собираюсь взять этот h3 снизу отсюда,
вырезать его, а затем вставить его в панель карт.
Таким образом, этот h3, который определяет имя
корпоративного лидера, вырезается
из панели вкладок, а затем перемещается в заголовок карты здесь.
Это будет действовать в качестве моего навигационного средства.
Теперь, к этому h3, я собираюсь применить класс под названием mb-0.
Итак, это mb-0 здесь.
Теперь, само это имя,
я собираюсь заключить это внутри и a,
поэтому я перейду к следующей строке, а затем скажу:
«переключение данных»
, а переключатель данных скажет «свернуть».
Итак, теперь вы видите, что используете плагин коллапса.
Итак, у нас есть это закрытие h3 там.
Итак, я переместим его на следующую строку
здесь, а затем закрою метку прямо там.
Итак, с этим тег теперь включает имя генерального директора здесь.
И тогда тег h3, конечно, закрывает h3 сверху, а затем это
внутри div, который является заголовком карты класса.
Таким образом, это формирует структуру заголовка для моего аккордеона div.
Перейдя сейчас на панель вкладок ниже,
я собираюсь изменить этот класс с панели вкладок fade до свертывания.
Таким образом, это будет плагин коллапса, который будет полезен для нашего аккордеона,
а также я удалю
этот активный класс для этого, и идентификатор будет оставлен как Питер для этого.
И тогда вы скажете: «родитель данных», и вы укажете аккордеон.
Вы видите, почему мы дали идентификатор аккордеона div, который охватывает все это содержимое.
Итак, это способ указать, что это будет
частью аккордеона, которую вы строите там.
Вот почему родительский аккордеон данных.
Теперь, содержимое внутри этой панели вкладок,
я собираюсь заключить его внутри div с
телом карты класса
и закрыть этот div здесь,
а затем отступ этого содержимого там.
Давайте сохраним изменения, а затем заглянем на нашу веб-страницу в этот момент.
Перейдя на нашу веб-страницу, вы заметите, что в корпоративном
руководстве имя генерального директора выделяется здесь в заголовке карты.
И тогда содержание внизу.
Теперь мы создадим оставшиеся три внизу, а затем вложим в них все.
Я собираюсь повторить ту же структуру для остальных.
Итак, у меня будет карточка с заголовком карты,
и заголовок карты будет заключать имя человека, как это.
Таким образом, вы в значительной степени будете следовать
той же структуре для остальных трех частей контента.
Итак, давайте внесем изменения, а потом вернемся и проверим код.
Возвращаясь к коду,
вы теперь видите, что для остальных трех
вы замечаете, что я все еще использую карту здесь
с заголовком карты здесь и h3 с mb-0.
Это внутри класса заголовка карты div там, а затем вниз ниже
класса только как свернуть, а затем с идентификатором,
а затем тело карты, охватывающее P там.
То же самое с остальными двумя тоже.
Таким образом, с этим изменением,
эти три оставшиеся сведения корпоративных лидеров будут
разрушены, но информация Питера Пэна
будет раскрыта при первом показе веб-страницы.
Таким образом, с этим изменением, теперь
этот фрагмент кода, очевидно, доступен в
инструкциях, которые следуют здесь, поэтому не нужно беспокоиться слишком много.
Вы всегда можете обратиться к этому, чтобы убедиться, что вы сделали это правильно.
Итак, давайте сохраним изменения.
Вернувшись на нашу веб-страницу,
вы увидите аккордеон, построенный здесь.
Итак, вы видите, что здесь отображается первая информация о корпоративных лидерах.
Остальные три рухнулись в этот момент.
Таким образом, это причина использования плагина коллапса, а также причина смещения
имени корпоративного лидера в название карты.
Увидимся, вы видели, что он будет отображаться там вот так.
Теперь, нажав на любой из них, вы теперь заметите, что когда вы нажмете на
этот контент будет раскрыт, но остальные три скрыты.
Итак, это поведение аккордеона.
Таким образом, мы завершим это упражнение.
Это хорошее время для вас сделать git фиксацию с аккордеоном сообщения.