TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć Bootstrap 5 Zwiń?

1

Zwinięcie nazwy jest ogólnym terminem używanym do prezentowania elementów, które można wyświetlić lub ukryć po kliknięciu myszą. Akordeon, spoiler i przełączniki to dobre przykłady komponentu zwijanego. Używa JavaScript, aby pokazać lub ukryć zawartość po kliknięciu elementu. W tym samouczku omówimy więcej na temat dodawania komponentu zwinięcia do witryny Bootstrap. Bootstrap 5 wprowadził nowy komponent akordeonowy, dlatego nie należy się mylić z tymi dwoma.

Bootstrap 5 Zwiń samouczek

  1. Wprowadzenie do zwijania Bootstrapa
  2. Tworzę zwinięcie z atrybutem href
  3. Zwiń za pomocą narzędzia danych
  4. Zwinięcie wielu celów
  5. Upadek akordeonu
  6. Składana treść treści

1 Wprowadzenie do Zwiń

Komponent zwinięcia składa się z dwóch elementów:

  • Element bazowy do pokazania lub ukrycia zwinięcia.
  • Rzeczywista zawartość wewnątrz zwiniętego kontenera.

Używa następujących trzech klas CSS:

  • „.collapse" służy do ukrywania treści.
  • „.collapsing” służy do zastosowania efektu przejścia.
  • „.collapse.show” służy do wyświetlania treści.

Tutaj omówimy tworzenie trzech typów zwinięcia – za pomocą atrybutu href, za pomocą data-toggle i stylu akordeonu.

2 Zwiń z atrybutem Href

W tym przypadku tag kotwicy jest używany z klasami przycisków jako wyzwalacz. Powinien mieć atrybut „data-toggle” o wartości „collapse”. Atrybut href powinien mieć unikalny identyfikator. Atrybut „aria-expanded” jest ustawiony jako „false”, aby zapewnić ukrycie treści podczas początkowego ładowania strony.

Po wyzwalaczu zwinięcia rzeczywista treść powinna zostać dodana z osobnym

tag identyfikowany z tym samym identyfikatorem atrybutu href. Powinieneś także dodać klasę „.collapse” do znacznika div. W obrębie znaczników div można dodać dowolny rodzaj zawartości. W tym przykładzie użyliśmy bloku karty z tekstem.

Pełny kod zwinięcia z atrybutem href pokazano poniżej:

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

Wynik powinien wyglądać jak przycisk, a zwijalna zawartość powinna być pokazana po kliknięciu przycisku.

Jak stworzyć Bootstrap 5 Zwiń?

Zawsze powinieneś używać kodu w sekcji ciała szablonu startowego Bootstrap, która zawiera wymaganą strukturę CSS i JavaScript.

3 Zwiń z przełącznikiem danych

Zamiast atrybutu href możesz użyć „data-toggle=collapse” z elementem przycisku, aby utworzyć wyzwalacz, jak pokazano poniżej:

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

Wynik powyższego kodu będzie wyglądał jak poniżej podobnie do przykładu href.

Jak stworzyć Bootstrap 5 Zwiń?

4 Zwiń wiele tagów

W powyższym przykładzie pojedynczy komponent zwijania jest przełączany przyciskiem. Możesz także przełączać wiele komponentów zwinięcia za pomocą jednego elementu. Na przykład poniższy kod ma trzy przyciski. Pierwszy i drugi przycisk służą do przełączania odpowiednio pierwszego i drugiego zwinięcia. Trzeci przycisk służy do jednoczesnego przełączania zarówno pierwszego, jak i drugiego zwinięcia.

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

Na Twojej stronie będzie wyglądać mniej więcej tak:

Jak stworzyć Bootstrap 5 Zwiń?

Przykład zwijania Bootstrapa

5 Akordeon Zwiń

Ostatnią i najpopularniejszą odmianą jest tworzenie akordeonu z wykorzystaniem komponentu zwijanego. Poniżej znajduje się kod akordeonu z trzema suwakami – pierwszy z nich ma układ grup kart, a pozostałe dwa mają nagłówek kart z treścią tekstową.

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

Jest to blok długiego kodu głównie ze względu na sekcję grupy kart dla pierwszego zwinięcia. Przejdźmy przez wszystkie elementy tego kodu:

5.1. Akordeon

  • Akordeon jest zawinięty wewnątrz znaczników div z unikalnym identyfikatorem (#accordion w tym przykładzie). A atrybut role powinien być używany jako lista tabulacji.
  • Całkowicie używane są trzy składane sekcje, a każda sekcja powinna zaczynać się od własnego div. Do każdej z tych sekcji użyliśmy klasy „.card”.
  • Każda sekcja karty składa się z nagłówka i zwijanej zawartości.

5.2. Nagłówek

  • Klasa „.card-header” służy do nagłówka wraz z unikalnym identyfikatorem (Firstheading) i atrybutem roli o wartości tab.
  • Wewnątrz nagłówka dodaj tagi nagłówka, w tym przypadku użyliśmy h5.
  • Ponownie, wewnątrz tagów nagłówka, dodaj link do kotwicy z następującą klasą/atrybutami:

    • Dodaj klasę „.collapsed” dla akordeonu.

    • Dodaj atrybut przełączania danych z wartością zwinięcia.

    • Dodaj atrybut data-parent z tym samym identyfikatorem, który został użyty w pierwszym

      (#akordeon w tym przypadku).

    • Atrybut Href powinien mieć identyfikator zwijanej zawartości, czyli „#collapse1″.

    • Ustaw aria-expanded na true, aby sekcja była otwierana po załadowaniu strony (powinieneś ustawić to na false dla drugiej i dalszych sekcji, aby były zamykane podczas ładowania).

    • Ustaw wartość atrybutu aria-controls z tym samym identyfikatorem co wartość atrybutu Href (collapse1).

6 Składany korpus treści

  • Otwórz nowy

    tag po nagłówku o takim samym identyfikatorze, jak wartość atrybutu href atrybutu nagłówka (collapse1).

  • Dodaj klasę „.collapse show”, aby wyświetlić otwartą treść. Nie należy używać „.show” dla pozostałych sekcji, ponieważ powinny one być zamknięte.

  • Dodaj rolę jako tabpanel i przypisz atrybut aria-labelledby o tej samej wartości co identyfikator nagłówka karty (Firstheading).

  • Teraz możesz dodać dowolną treść, którą chcesz dodać. W tym przypadku otworzyliśmy inny element div i dodaliśmy grupę kart dla pierwszej sekcji oraz bloki kart dla pozostałych dwóch sekcji.

Wykonaj ten sam proces dla pozostałych dwóch sekcji, a ostateczny akordeon powinien wyglądać mniej więcej tak:

Jak stworzyć Bootstrap 5 Zwiń?


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów