TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 Collapse?

5

Namnkollapsen är en generisk term som används för att visa upp element som kan visas eller döljas med musklick. Dragspel, spoiler och växlar är bra exempel på kollapskomponent. Den använder JavaScript för att visa eller dölja innehållet när du klickar på elementet. Låt oss i den här självstudien utforska mer om hur du lägger till kollaps -komponent på din Bootstrap -webbplats. Bootstrap 5 introducerade en ny dragspelskomponent, bli därför inte förvirrad med dessa två.

Bootstrap 5 Dölj handledning

  1. Introduktion till Bootstrap -kollaps
  2. Skapar kollaps med href -attribut
  3. Dölj med data-toogle
  4. Flera målkollaps
  5. Dragspelkollaps
  6. Hopfällbar innehållsdel

1 Introduktion till Collapse

Kollaps -komponenten har två element:

  • Baselement för att visa eller dölja kollapsen.
  • Faktiskt innehåll inuti den kollapsade behållaren.

Den använder följande tre CSS -klasser:

  • ".Collapse" används för att dölja innehållet.
  • ".Collapsing" används för att tillämpa övergångseffekt.
  • ".Collapse.show" används för att visa innehållet.

Här kommer vi att diskutera att skapa tre typer av kollaps-med hjälp av href-attribut, med hjälp av data-växling och dragspelstil.

2 Dölj med Href -attribut

I detta fall används ankartagg med knappklasser som en utlösare. Det bör ha "data-toggle" -attribut med värdet "kollaps". Attributet href bör ha ett unikt ID. Attributet "aria-expanderat" är inställt som "falskt" för att säkerställa att innehållet döljs vid den första sidbelastningen.

Efter kollapsutlösaren ska det faktiska innehållet läggas till med en separat

taggen identifierad med samma ID för href -attributet. Du bör också lägga till ".collapse" -klassen i div -taggen. Du kan lägga till vilken typ av innehåll som helst i div -taggarna. I det här exemplet har vi använt ett kortblock med text.

Den fullständiga koden för kollapsen med href -attributet visas nedan:

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

Resultatet ska se ut som en knapp och det hopfällbara innehållet ska visas när du klickar på knappen.

Hur skapar jag Bootstrap 5 Collapse?

Du bör alltid använda koden i kroppsavsnittet i Bootstrap -startmallen som innehåller det nödvändiga CSS- och JavaScript -ramverket.

3 Dölj med dataväxling

I stället för href-attribut kan du använda "data-toggle = kollaps" med knappelement för att skapa en utlösare enligt nedan:

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

Resultatet av ovanstående kod kommer att se ut nedan som liknar href -exemplet.

Hur skapar jag Bootstrap 5 Collapse?

4 Multiple Taget Collapse

I exemplet ovan har en enda kollaps -komponent växlats med en knapp. Du kan också växla flera kollapskomponenter med ett enda element. Till exempel har koden nedan tre knappar. Första och andra knapparna används för att växla första respektive andra kollaps. Den tredje knappen används för att växla både första och andra kollapsar tillsammans.

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

Det kommer att se ut ungefär som nedan på din webbplats:

Hur skapar jag Bootstrap 5 Collapse?

Bootstrap Collapse Exempel

5 Dragspelskollaps

Den sista och mest populära varianten är att skapa dragspel med hjälp av kollaps -komponent. Nedan finns dragspelskoden med tre reglage – den första har kortgruppslayout och de återstående två har kortrubrik med lite textinnehåll.

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

Det är långt kodblock huvudsakligen på grund av kortgruppssektionen för den första kollapsen. Låt oss gå igenom alla delar av denna kod:

5.1. Dragspel

  • Den dragspel lindas inuti div-taggar med ett unikt ID (#accordion i detta exempel). Och rollattributet ska användas som fliklista.
  • Totalt tre hopfällbara sektioner används och varje sektion bör börja med sin egen div. Vi har använt ".card" -klassen till var och en av dessa sektioner.
  • Varje kortdel består av en rubrik och ett hopfällbart innehåll.

5.2. Rubrik

  • Klass ".card-header" används för rubrik tillsammans med ett unikt id (Firstheading) och rollattributet med ett värde som flik.
  • Lägg till rubriktaggar i rubriken, vi har använt h5 i det här fallet.
  • Återigen, i rubriktaggarna, lägg till ankarlänk med följande klass/attribut:

    • Lägg till ".kollapsad" klass för dragspel.

    • Lägg till data-toggle-attribut med värdet som kollaps.

    • Lägg till data-överordnade attribut med samma ID som användes för det första

      (#dragspel i det här fallet).

    • Href -attributet bör ha ett ID för det hopfällbara innehållet som är "#collaps1".

    • Ställ in aria-expanderat till true så att avsnittet öppnas när sidan laddas (du bör ställa in detta till falskt för andra och ytterligare sektioner så att de stängs när du läser in).

    • Ange attributvärde för aria-controls med samma ID för Href-attributvärdet (kollaps1).

6 Kropp för hopfällbar innehåll

  • Öppna en ny

    taggen efter rubriken med samma ID som motsvarar attributvärdet för header -href (kollaps1).

  • Lägg till klassen ".collapse show" för att visa innehållet öppet. Du bör inte använda ".show" för de återstående sektionerna eftersom de ska stängas.

  • Lägg till rollen som tablett och tilldela aria-labelledby-attribut med samma värde som kortrubrik-id (Firstheading).

  • Nu kan du lägga till allt innehåll du vill lägga till. I det här fallet har vi öppnat ytterligare en div och lagt till kortgrupp för den första sektionen och kortblock för de återstående två sektionerna.

Följ samma process för andra två sektioner och det sista dragspelet ska se ut ungefär så här:

Hur skapar jag Bootstrap 5 Collapse?


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer