Hvordan lage en trekkspill ved hjelp av bootstrap 5

Et trekkspill pakker flere sammenleggbare elementer der en enorm mengde data kan plasseres og kan skjules eller vises på preferansen til en bruker. Den endelige fordelen med å bruke en trekkspill er at det forhindrer rot av stort innhold på en enkelt webside. Dessuten forbedrer en trekkspill brukeropplevelsen ved å forkorte websidene dermed redusere rulle.

Les artikkelen nedenfor for å lære hvordan du oppretter en trekkspill ved hjelp av Bootstrap 5.

Hvordan lage en trekkspill ved hjelp av bootstrap 5

I eksemplet nedenfor skal vi demonstrere hvordan du kan lage en trekkspill ved hjelp av Bootstrap 5.

Html

Det første trinnet i å lage en trekkspill er å lage en foreldre div container og tilordne det en ID. Her har vi tildelt det en ID merket “trekkspill”. Hensikten med denne foreldre Div -beholderen er å skjule alle andre sammenleggbare elementer når et av de sammenleggbare elementene blir vist.

Html

Hjem



Noe avsnitt.

Av hensyn til dette eksemplet vil vi benytte oss av kortkomponenten for å generere en trekkspill. Derfor lager vi i ovennevnte kode et kort ved å tilordne det .kort klasse til en div container. Etterpå lager vi overskriften på kortet ved å bruke .Korthode Klasse og en ankerkode som skjuler/viser at innholdet er blitt nestet inne i overskriften og koblet til den sammenleggbare diven ved hjelp av ID.

Til slutt ble en div gjort sammenleggbar ved å bruke .kollapse Klasse og kortlegemet ble nestet inne i den sammenleggbare beholderen. Noter det data-bs-foreldre = “#id” Gjør alle andre kollapsiske for å gjemme seg under foreldre Div -beholderen når en av kollapsiblene vises.

Html

Om



Noe avsnitt.

Et annet kort ble generert ved hjelp av samme teknikk som brukt for det første kortet. Den eneste forskjellen er at IDen som ble brukt for å koble ankerkoden til den sammenleggbare div, er forskjellig fra den som ble brukt for det første kortet.

Html

Tjenester



Noe avsnitt.

Samme tilnærming ble brukt til å lage enda et sammenleggbart kort med en annen ID som kobler ankerkoden til den sammenleggbare div -beholderen.

Produksjon

En trekkspill ble generert med hell.

Merk: Hvis du utelukker data-BS-foreldre-attributt, forblir trekkspillelementer åpne mens andre elementer åpnes.

Etter teknikken illustrert ovenfor kan du enkelt generere en trekkspill ved hjelp av Bootstrap 5.

Konklusjon

For å lage en trekkspill må du lage et element som en div container sammenleggbar ved å bruke .kollapse klasse og hekker slike sammenleggbare elementer inne i et overordnet element. Artikkelen over benytter seg av et kort for å generere et trekkspill. Totalt tre kort som hadde en overskrift og en kropp ble generert og gjort sammenleggbar. Hvert av kortene var koblet til en ankerkode som ble brukt til å skjule/vise innhold plassert inne i hvert sammenleggbart kort. Dessuten data-bs-foreldre = “#id” ble brukt til å skjule alle andre kollapsiske under foreldreelementet mens man vises.