TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un collasso Bootstrap 5?

2

Il nome crollo è un termine generico utilizzato per mostrare elementi che possono essere mostrati o nascosti con un clic del mouse. Fisarmonica, spoiler e levette sono buoni esempi di componenti di collasso. Utilizza JavaScript per mostrare o nascondere il contenuto quando si fa clic sull’elemento. In questo tutorial esploriamo di più sull’aggiunta di componenti di compressione al tuo sito Bootstrap. Bootstrap 5 ha introdotto un nuovo componente a fisarmonica, quindi non confonderlo con questi due.

Bootstrap 5 Collapse Tutorial

  1. Introduzione al collasso Bootstrap
  2. Creazione del collasso con l’attributo href
  3. Comprimi con data-tool
  4. Collasso di più bersagli
  5. Crollo della fisarmonica
  6. Corpo del contenuto comprimibile

1 Introduzione a Collasso

Il componente di collasso ha due elementi:

  • Elemento di base per mostrare o nascondere il collasso.
  • Contenuto effettivo all’interno del contenitore compresso.

Utilizza le seguenti tre classi CSS:

  • ".collapse" viene utilizzato per nascondere il contenuto.
  • ".collapsing" viene utilizzato per applicare l’effetto di transizione.
  • “.collapse.show" viene utilizzato per mostrare il contenuto.

Qui discuteremo della creazione di tre tipi di collasso: utilizzando l’attributo href, utilizzando il data-toggle e lo stile a fisarmonica.

2 Comprimi con attributo Href

In questo caso il tag anchor viene utilizzato con le classi di pulsanti come trigger. Dovrebbe avere l’attributo "data-toggle" con il valore "collapse". L’attributo href deve avere un ID univoco. L’attributo "aria-expanded" è impostato su "false" per garantire che il contenuto sia nascosto al caricamento iniziale della pagina.

Dopo l’attivazione della compressione, il contenuto effettivo dovrebbe essere aggiunto con un separato

tag identificato con lo stesso ID dell’attributo href. Dovresti anche aggiungere la classe ".collapse" al tag div. Puoi aggiungere qualsiasi tipo di contenuto all’interno dei tag div. In questo esempio abbiamo utilizzato un blocco di carte con testo.

Il codice completo per la compressione con l’attributo href è mostrato di seguito:

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

Il risultato dovrebbe apparire come un pulsante e il contenuto comprimibile dovrebbe essere mostrato quando fai clic sul pulsante.

Come creare un collasso Bootstrap 5?

Dovresti sempre utilizzare il codice all’interno della sezione del corpo del modello di avvio Bootstrap che include il framework CSS e JavaScript richiesto.

3 Comprimi con data-toggle

Invece dell’attributo href puoi usare "data-toggle=collapse" con l’elemento button per creare un trigger come mostrato di seguito:

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

Il risultato del codice sopra apparirà come sotto simile all’esempio href.

Come creare un collasso Bootstrap 5?

4 Collasso Taget Multiplo

L’esempio sopra ha un singolo componente di compressione attivato tramite un pulsante. Puoi anche attivare più componenti di compressione utilizzando un singolo elemento. Ad esempio, il codice sottostante ha tre pulsanti. Il primo e il secondo pulsante vengono utilizzati per alternare rispettivamente il primo e il secondo collasso. Il terzo pulsante viene utilizzato per alternare sia il primo che il secondo collasso.

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

Apparirà qualcosa come sotto sul tuo sito:

Come creare un collasso Bootstrap 5?

Esempio di collasso bootstrap

5 crollo della fisarmonica

La variante finale e più popolare consiste nel creare la fisarmonica utilizzando il componente di compressione. Di seguito è riportato il codice della fisarmonica con tre cursori: il primo ha il layout del gruppo di carte e gli altri due hanno l’ intestazione della carta con del contenuto di testo.

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

È un blocco di codice lungo principalmente a causa della sezione del gruppo di carte per il primo crollo. Esaminiamo tutti gli elementi che fanno parte di questo codice:

5.1. Fisarmonica

  • La fisarmonica è racchiusa all’interno di tag div con un ID univoco (#fisarmonica in questo esempio). E l’attributo role dovrebbe essere usato come tablist.
  • Vengono utilizzate in totale tre sezioni comprimibili e ogni sezione dovrebbe iniziare con il proprio div. Abbiamo usato la classe ".card" per ciascuna di queste sezioni.
  • Ogni sezione della scheda è composta da un’intestazione e da un contenuto comprimibile.

5.2. Intestazione

  • La classe ".card-header" viene utilizzata per l’intestazione insieme a un id univoco (Firstheading) e l’attributo del ruolo con un valore come tab.
  • All’interno dell’intestazione, aggiungi i tag di intestazione, in questo caso abbiamo usato h5.
  • Ancora una volta, all’interno dei tag di intestazione, aggiungi il collegamento di ancoraggio con la seguente classe/attributi:

    • Aggiungi la classe ".collapsed" per la fisarmonica.

    • Aggiungi l’attributo data-toggle con il valore come comprimi.

    • Aggiungi l’attributo data-parent con lo stesso ID utilizzato per il primo

      (#fisarmonica in questo caso).

    • L’attributo Href dovrebbe avere un ID del contenuto comprimibile che è "#collapse1".

    • Imposta aria-expanded su true in modo che la sezione venga aperta quando la pagina viene caricata (dovresti impostarla su false per la seconda e le successive sezioni in modo che vengano chiuse durante il caricamento).

    • Imposta il valore dell’attributo aria-controls con lo stesso ID del valore dell’attributo Href (collapse1).

6 Corpo del contenuto pieghevole

  • Apri un nuovo

    tag dopo l’intestazione con lo stesso ID di corrispondente al valore dell’attributo href dell’intestazione (collapse1).

  • Aggiungi la classe ".collapse show" per mostrare il contenuto aperto. Non dovresti usare ".show" per le sezioni rimanenti in quanto dovrebbero essere chiuse.

  • Aggiungi il ruolo come tabpanel e assegna l’attributo aria-labelledby con lo stesso valore dell’ID intestazione della scheda (Firstheading).

  • Ora puoi aggiungere qualsiasi contenuto tu voglia aggiungere. In questo caso abbiamo aperto un altro div e aggiunto un gruppo di schede per la prima sezione e blocchi di schede per le restanti due sezioni.

Segui lo stesso processo per le altre due sezioni e la fisarmonica finale dovrebbe apparire come di seguito:

Come creare un collasso Bootstrap 5?


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More