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

Як створити Bootstrap 5 Collapse?

2

Згортання назви – це загальний термін, який використовується для демонстрації елементів, які можна показати або приховати при натисканні миші. Гармонік, спойлер і тумблери – хороші приклади складання компонента. Він використовує JavaScript для показу або приховування вмісту при натисканні на елемент. У цьому підручнику давайте детальніше вивчимо додавання компонента згортання на ваш сайт Bootstrap. Bootstrap 5 представив новий компонент баяна, тому не плутайте з цими двома.

Bootstrap 5 Згорнути підручник

  1. Вступ до згортання Bootstrap
  2. Створення згортання з атрибутом href
  3. Згорнути за допомогою data-toogle
  4. Збій кількох цілей
  5. Аваріонний крах
  6. Складається тіло вмісту

1 Вступ до колапсу

Компонент згортання має два елементи:

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

Він використовує наступні три класи CSS:

  • ".Collapse" використовується для приховування вмісту.
  • “.Colapsing" використовується для застосування ефекту переходу.
  • ".Collapse.show" використовується для показу вмісту.

Тут ми обговоримо створення трьох типів згортання-за допомогою атрибута href, за допомогою стилю перемикання даних та гармошки.

2 Згорнути з атрибутом Href

У цьому випадку якірний тег використовується з класами кнопок як тригер. Він повинен мати атрибут "data-toggle" зі значенням "згортання". Атрибут href повинен мати унікальний ідентифікатор. Атрибут "aria-expand" встановлено як "false", щоб переконатися, що вміст приховано під час початкового завантаження сторінки.

Після тригеру згортання фактичний вміст слід додати окремим

тег, ідентифікований з тим самим ідентифікатором атрибута href. Вам також слід додати до тегу div клас “.collapse”. Ви можете додати будь -який тип вмісту до тегів 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 Collapse?

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

Як створити Bootstrap 5 Collapse?

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 Collapse?

Приклад згортання Bootstrap

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 в цьому прикладі). Атрибут role слід використовувати як список вкладок.
  • Всього використовується три розбірні розділи, і кожен розділ повинен починатися зі свого власного div. Для кожного з цих розділів ми використовували клас ".card".
  • Кожен розділ картки складається із заголовка та вмісту, який можна розкласти.

5.2. Заголовок

  • Клас “.card-header” використовується для заголовка разом з унікальним ідентифікатором (Firstheading) та атрибутом ролі зі значенням як вкладка.
  • Усередині заголовка додайте теги заголовка, у цьому випадку ми використовували h5.
  • Знову ж таки, всередині тегів заголовка додайте посилання прив’язки з таким класом/атрибутами:

    • Додайте клас “.collapsed” для акордеону.

    • Додайте атрибут перемикання даних зі значенням як згортання.

    • Додайте атрибут data-parent з тим самим ідентифікатором, що використовується для першого

      (#акордеон у цьому випадку).

    • Атрибут Href повинен мати ідентифікатор розбірного вмісту, який має бути "#Collaps1".

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

    • Встановіть значення атрибута aria-controls з тим самим ідентифікатором значення атрибута Href (Collaps1).

6 Складаний матеріал вмісту

  • Відкрийте новий

    тег після заголовка з тим самим ідентифікатором, що відповідає значенню атрибута href заголовка (Collaps1).

  • Додайте клас “.collapse show”, щоб відкрити вміст. Ви не повинні використовувати ".show" для інших розділів, оскільки вони повинні бути закриті.

  • Додайте роль як панель вкладок і призначте атрибут aria-labelledby з тим самим значенням, що ідентифікатор заголовка картки (Firstheading).

  • Тепер ви можете додати будь -який вміст, який хочете додати. У цьому випадку ми відкрили ще один div і додали групу карт для першого розділу та блоки карт для двох інших розділів.

Виконайте той самий процес для двох інших розділів, і остаточний акордеон має виглядати приблизно так:

Як створити Bootstrap 5 Collapse?


Вивчити Bootstrap 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі