Как создать виджет свертывания в Bootstrap 5?
<
div itemprop=»articleBody»>
Свертывание имени — это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты при щелчке мышью. Аккордеон, спойлер и переключатели — хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap. Bootstrap 5 представил новый компонент аккордеона, поэтому не путайте с этими двумя.
Учебное пособие по свертыванию Bootstrap 5
- Введение в Bootstrap collapse
- Создание коллапса с атрибутом href
- Свернуть с помощью функции Data-toogle
- Свертывание нескольких целей
- Аккордеонный коллапс
- Сворачиваемое тело содержимого
1. Введение в Collapse
Компонент сворачивания состоит из двух элементов:
- Базовый элемент для отображения или скрытия сворачивания.
- Фактическое содержимое внутри свернутого контейнера.
Он использует следующие три класса CSS:
- «.крах»Используется для сокрытия содержимого.
- «.collapsing»Используется для применения эффекта перехода.
- «.collapse.show»Используется для отображения содержимого.
Здесь мы обсудим создание трех типов сворачивания — с использованием атрибута href, с использованием переключения данных и стиля аккордеона.
2. Свернуть с атрибутом Href
В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь «переключение данных»Со значением«крах«. Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что содержимое скрыто при начальной загрузке страницы.
После триггера коллапса фактическое содержимое должно быть добавлено отдельным тегом
<
div>, идентифицируемым с тем же идентификатором атрибута href. Вы также должны добавить «.крах»К тегу div. Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.
Полный код коллапса с атрибутом href показан ниже:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="https://www.webnots.com/bootstrap-collapse-tutorial/#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, который включает необходимый фреймворк CSS и JavaScript.
3. Свернуть с переключением данных.
Вместо атрибута href вы можете использовать «data-toggle = свернуть”С элементом кнопки для создания триггера, как показано ниже:
<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.
4. Свертывание множественных тегов
В приведенном выше примере один компонент сворачивания переключается с помощью кнопки. Вы также можете переключать несколько компонентов сворачивания, используя один элемент. Например, в приведенном ниже коде есть три кнопки. Первая и вторая кнопки используются для переключения первого и второго сворачивания соответственно. Третья кнопка используется для переключения первого и второго сворачиваний вместе.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="https://www.webnots.com/bootstrap-collapse-tutorial/#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>На вашем сайте это будет выглядеть примерно так:
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="https://www.webnots.com/bootstrap-collapse-tutorial/#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»Класс по аккордеону.
- Добавлять переключение данных атрибут со значением как крах.
- Добавлять родитель данных атрибут с тем же идентификатором, который использовался для первого (в данном случае #accordion).
- Атрибут Href должен иметь идентификатор сворачиваемого содержимого: «# collapse1«.
- Установите для aria-extended значение true, чтобы раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).
- Установите значение атрибута aria-controls с тем же идентификатором значения атрибута Href (collapse1).
6. Сворачиваемое тело содержимого
- Откройте новый тег после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка (collapse1).
- Добавьте класс «.collapse показать», Чтобы показать содержимое открытым. Вы не должны использовать «.показывать»Для остальных разделов, поскольку они должны быть закрыты.
- Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).
- Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один блок и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух разделов.
Выполните тот же процесс для двух других разделов, и окончательный аккордеон должен выглядеть примерно так:
Изучите Bootstrap 5 (Индекс)
</div>
