Как создать виджет свертывания в Bootstrap 5?

<

div itemprop=»articleBody»>

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

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

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

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>

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

Свернуть с Href

Вы всегда должны использовать код внутри основного раздела начального шаблона 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>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.