TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать коллапс Bootstrap 5?

133

Свертывание имени – это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты при щелчке мышью. Аккордеон, спойлер и переключатели – хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap. Bootstrap 5 представил новый компонент аккордеона, поэтому не путайте с этими двумя.

Учебное пособие по свертыванию Bootstrap 5

  1. Введение в Bootstrap collapse
  2. Создание коллапса с атрибутом href
  3. Свернуть с помощью функции Data-toogle
  4. Свертывание нескольких целей
  5. Коллапс аккордеона
  6. Сворачиваемое тело содержимого

1 Введение в Collapse

Компонент сворачивания состоит из двух элементов:

  • Базовый элемент для отображения или скрытия сворачивания.
  • Фактическое содержимое внутри свернутого контейнера.

Он использует следующие три класса CSS:

  • «.Collapse» используется для скрытия содержимого.
  • «.Collapsing» используется для применения эффекта перехода.
  • «.Collapse.show» используется для отображения содержимого.

Здесь мы обсудим создание трех типов сворачивания – с использованием атрибута href, с использованием переключения данных и стиля аккордеона.

2 Свернуть с атрибутом Href

В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь атрибут «переключение данных» со значением «свернуть». Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что контент скрыт при начальной загрузке страницы.

После триггера коллапса фактическое содержимое должно быть добавлено с отдельным

тег, идентифицируемый с тем же идентификатором атрибута href. Вы также должны добавить класс «.collapse» к тегу div. Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.

Полный код коллапса с атрибутом href показан ниже:

<p> <a class="btn btn-primary" data-toggle="collapse" href="#linkcollapse" aria-expanded="false" aria-controls="Collapse"> Link with Href </a> </p> <div class="collapse" id="linkcollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing. </div> </div>

Результат должен выглядеть как кнопка, и при нажатии на кнопку должно отображаться сворачиваемое содержимое.

Как создать коллапс Bootstrap 5?

Вы всегда должны использовать код внутри основного раздела начального шаблона Bootstrap, который включает необходимый фреймворк CSS и JavaScript.

3 Свернуть с переключением данных

Вместо атрибута href вы можете использовать «data-toggle = collapse» с элементом кнопки для создания триггера, как показано ниже:

<p> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse"> Button with data-target </button> </p> <div class="collapse" id="buttoncollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing. </div> </div>

Результат приведенного выше кода будет выглядеть, как показано ниже, аналогично примеру href.

Как создать коллапс Bootstrap 5?

4 Свертывание нескольких тегов

В приведенном выше примере один компонент сворачивания переключается с помощью кнопки. Вы также можете переключать несколько компонентов сворачивания, используя один элемент. Например, в приведенном ниже коде есть три кнопки. Первая и вторая кнопки используются для переключения первого и второго сворачивания соответственно. Третья кнопка используется для переключения первого и второго сворачиваний вместе.

<p> <a class="btn btn-primary" data-toggle="collapse" href="#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a> <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button> <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse1"> <div class="card card-body"> Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse2"> <div class="card card-body"> Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> </div>

На вашем сайте это будет выглядеть примерно так:

Как создать коллапс Bootstrap 5?

Пример свертывания начальной загрузки

5 Разрушение аккордеона

Последний и самый популярный вариант – создание аккордеона с использованием компонента сворачивания. Ниже приведен код аккордеона с тремя ползунками – первый имеет макет группы карточек, а остальные два имеют заголовок карточки с некоторым текстовым содержимым.

<div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div style="margin:20px;"> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-body"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> Here is the content for the third section. </div> </div> </div> </div>

Это длинный блок кода, в основном из-за раздела группы карт для первого сворачивания. Давайте рассмотрим все элементы этого кода:

5.1. Аккордеон

  • Аккордеона обернута внутри DIV метки с уникальным идентификатором (#accordion в этом примере). А атрибут роли следует использовать как список вкладок.
  • Всего используются три складных раздела, и каждый раздел должен начинаться со своего собственного div. Мы использовали класс «.card» для каждого из этих разделов.
  • Каждый раздел карточки состоит из заголовка и сворачиваемого содержимого.

5.2. Заголовок

  • Класс «.card-header» используется для заголовка вместе с уникальным идентификатором (Firstheading) и атрибутом роли со значением табуляции.
  • Внутри заголовка добавьте теги заголовков, в данном случае мы использовали h5.
  • Опять же, внутри тегов заголовков добавьте ссылку привязки со следующими классами / атрибутами:

    • Добавьте класс «.collapsed» для аккордеона.

    • Добавьте атрибут переключения данных со значением collapse.

    • Добавьте родительский атрибут данных с тем же идентификатором, который использовался для первого

      (в данном случае # аккордеон).

    • Атрибут Href должен иметь идентификатор сворачиваемого содержимого «# collapse1».

    • Установите для aria-extended значение true, чтобы раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).

    • Установите значение атрибута aria-controls с тем же идентификатором, что и значение атрибута Href (collapse1).

6 Сворачиваемое тело содержимого

  • Открыть новый

    тег после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка (collapse1).

  • Добавьте класс «.collapse show», чтобы отображать содержимое открытым. Вы не должны использовать «.show» для остальных разделов, так как они должны быть закрыты.

  • Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).

  • Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один блок и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух разделов.

Выполните тот же процесс для двух других разделов, и окончательный аккордеон должен выглядеть примерно так:

Как создать коллапс Bootstrap 5?


Изучите Bootstrap 5 (индекс )


Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее