Ako vytvoriť Bootstrap 5 Collapse?

Vytvorenie kolapsu pomocou Bootstrap 5 zahŕňa použitie triedy `.collapse` a atribútu `data-bs-toggle="collapse"`. Tu je podrobný návod:

1. Vytvorte prepínací prvok:

- Pridajte tlačidlo alebo akýkoľvek prvok, ktorý bude slúžiť ako prepínač na otvorenie a zatvorenie zbalenia.

- Priraďte prvku prepínača atribút `data-bs-toggle="collapse"`.

- Priraďte jedinečnú hodnotu atribútu `data-bs-target`, ktorá zodpovedá ID prvku, ktorý chcete zbaliť alebo rozbaliť.

2. Vytvorte zložiteľný prvok:

- Vytvorte prvok, ktorý chcete zobraziť alebo skryť po kliknutí na prepínač.

– Priraďte tomuto prvku triedu „.collapse“ a ID, ktoré sa zhoduje s hodnotou „data-bs-target“ prvku prepínača.

3. Pridať voliteľné triedy:

- Bootstrap 5 poskytuje ďalšie triedy na ovládanie vzhľadu kolapsu, ako napríklad:

- `.show`:Táto trieda sa používa na počiatočné zobrazenie skladacieho prvku.

- `.collapse-horizontal`:Táto trieda vám umožňuje vytvoriť horizontálne zrútenie namiesto vertikálneho.

4. Zahrňte Bootstrap CSS a JavaScript:

- Uistite sa, že ste do dokumentu HTML zahrnuli súbory Bootstrap CSS a JavaScript, aby ste povolili funkciu zbalenia.

Tu je príklad kódu HTML na vytvorenie zbalenia:

```html

Toto je zbaliteľný obsah.

```

Nezabudnite nahradiť „#collapseExample“ jedinečným ID vášho skladacieho prvku a podľa toho upraviť selektor v atribúte `data-bs-target`.