[MUSIC]
Давайте теперь поговорим о очень полезном плагине в Bootstrap, называемом Collapse.
Мы видели его применение в навигационной панели ранее.
Мы пересмотрим этот код и рассмотрим его более подробно.
Связанный компонент называется аккордеон.
Аккордеон использует плагин Collapse для его функционирования.
И мы увидим это подробно в упражнении, которое следует.
Плагин Collapse обеспечивает простой способ обнаружения и
скрытия контента на вашей веб-странице.
Это раскрытие и скрытие контента, как правило
, инициируется пользователем нажатием кнопки или ссылки на вашей веб-странице.
Теперь вы увидите много мест, где
поведение Collapse очень хорошо используется, чтобы показать контент.
Мы перейдем к нашей навигационной панели, чтобы посмотреть на плагин Collapse в действии, а
затем мы также увидим пример Accordion.
Возвращаясь к нашей веб-странице, вы вспомните, что когда мы создали навигационную панель на
нашей веб-странице для сверхмаленьких экранов, навигационная панель была свернута, а
затем она была раскрыта, когда мы нажали на кнопку здесь.
Теперь это пример использования плагина Collapse здесь.
Когда мы посмотрим на код, мы увидим, что мы действительно применяем плагин Collapse
к div, который содержит эту навигационную панель.
Взглянув на код
нашей навигационной панели, которую мы разработали ранее, вы увидели, что здесь,
внутри контейнера, мы создали эту кнопку, которая отображается для
сверхмалых размеров экрана с помощью класса navbar-toggler.
Посмотрите на div, который следует за этой кнопкой здесь.
Для div, который следует за этой кнопкой, мы использовали класс свертывания.
Таким образом, это использование плагина Collapse в нашей навигационной панели.
Таким образом, это создает то, что этот конкретный контент,
наша навигационная панель, которая заключена внутри этого div, будет
свернута для очень небольших размеров экрана.
И затем вместе с плагином Collapse, эта кнопка, которая появляется
там, вызовет отображение и скрытие этой навигационной панели здесь.
Вот почему, когда вы посмотрите на кнопку, вы увидите, что прямо там,
мы поставляем атрибут data-toggle с коллапсом здесь,
а затем data-target как #Navbar здесь.
И обратите внимание, что идентификатор для этого div, который мы применили здесь, - Navbar.
Таким образом, мы указываем по существу, что эта кнопка будет действовать как
механизм запуска для этого плагина Collapse для работы над этим div здесь.
Таким образом, это использование плагина Collapse на вашей веб-странице.
Кроме того, мы рассмотрим другой компонент, который является аккордеон в Bootstrap.
Как ведет себя аккордеон?
Итак, это пример аккордеона, который мы собираемся построить в упражнении,
которое следует за этим.
Итак, здесь вы увидите, что я заменил навигацию с вкладками, которую мы
сделали в предыдущем упражнении, используя аккордеон здесь.
Способ работы Аккордеона заключается в том, что один фрагмент контента раскрывается
, а остальные три скрыты.
Таким образом, это использует плагин Collapse для этой цели.
Поэтому, когда вы нажимаете на имя любого из этих других корпоративных лидеров,
то детали этого корпоративного лидера раскрываются, а
остальные три скрываются.
Итак, это поведение аккордеона.
Если вы знакомы с аккордеоном,
музыкальным инструментом, вы знаете, как работают сильфоны аккордеона.
Так что это, в некотором смысле, ведет себя как сильфоны аккордеона.
Поэтому этот компонент называется аккордеоном в Bootstrap.
Еще один пример используемого плагина Collapse находится на вашем сайте курса.
Поэтому, если вы заходите на сайт курса, а
затем заходите в контент вашего сайта курса и
начинаете просматривать его здесь, вы заметите, что с левой стороны
у вас есть навигация, которая появляется в картинке с левой стороны.
Итак, это навигация там.
Поэтому, когда вы нажимаете на каждую из них, вы замечаете, как содержание здесь
скрыто и раскрывается, нажав на каждую из этих ссылок там.
Так что это похоже на плагин Collapse, который мы видели в Bootstrap.
Хотя, конечно, страница Coursera на самом деле не использует Bootstrap.
Мы перейдем к следующему упражнению, где мы увидим, как мы создаем
аккордеон для демонстрации информации о корпоративном лидерстве.
[ МУЗЫКА]