TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich Bootstrap 5 Collapse?

139

Der Namenszusammenbruch ist ein Oberbegriff für die Präsentation von Elementen, die per Mausklick ein- oder ausgeblendet werden können. Akkordeon, Spoiler und Toggles sind gute Beispiele für Klappkomponenten. Es verwendet JavaScript, um den Inhalt anzuzeigen oder auszublenden, wenn auf das Element geklickt wird. In diesem Tutorial erfahren Sie mehr über das Hinzufügen einer Minimierungskomponente zu Ihrer Bootstrap- Site. Bootstrap 5 hat eine neue Akkordeon-Komponente eingeführt, also lassen Sie sich nicht mit diesen beiden verwechseln.

Bootstrap 5 Collapse-Tutorial

  1. Einführung in den Bootstrap-Zusammenbruch
  2. Minimieren mit href-Attribut erstellen
  3. Mit data-toogle einklappen
  4. Zusammenbruch mehrerer Ziele
  5. Akkordeon kollabieren
  6. Reduzierbarer Inhaltskörper

1 Einführung in Collapse

Die Minimierungskomponente hat zwei Elemente:

  • Basiselement zum Ein- oder Ausblenden der Ausblendung.
  • Tatsächlicher Inhalt im minimierten Container.

Es verwendet die folgenden drei CSS-Klassen:

  • „.collapse” wird zum Ausblenden des Inhalts verwendet.
  • „.collapsen” wird verwendet, um Übergangseffekte anzuwenden.
  • „.collapse.show” wird verwendet, um den Inhalt anzuzeigen.

Hier besprechen wir das Erstellen von drei Arten von Kollaps – mit dem Attribut href, mit Data-Toggle und dem Akkordeon-Stil.

2 Collapse mit Href-Attribut

In diesem Fall wird das Anker-Tag mit Schaltflächenklassen als Auslöser verwendet. Es sollte das Attribut „data-toggle” mit dem Wert „collapse” haben. Das href-Attribut sollte eine eindeutige ID haben. Das Attribut „aria-expanded” wird auf „false” gesetzt, um sicherzustellen, dass der Inhalt beim ersten Laden der Seite ausgeblendet wird.

Nach dem Minimierungstrigger sollte der eigentliche Inhalt mit einem separaten. hinzugefügt werden

-Tag mit derselben ID des href-Attributs identifiziert. Sie sollten dem div-Tag auch die Klasse ".collapse" hinzufügen. Sie können jede Art von Inhalt innerhalb der div-Tags hinzufügen. In diesem Beispiel haben wir einen Kartenblock mit Text verwendet.

Der vollständige Code für den Zusammenbruch mit href-Attribut ist unten dargestellt:

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

Das Ergebnis sollte wie eine Schaltfläche aussehen und der zusammenklappbare Inhalt sollte angezeigt werden, wenn Sie auf die Schaltfläche klicken.

Wie erstelle ich Bootstrap 5 Collapse?

Sie sollten immer den Code im Body-Abschnitt der Bootstrap-Startervorlage verwenden, der das erforderliche CSS- und JavaScript-Framework enthält.

3 Zusammenklappen mit Datenumschaltung

Anstelle des href-Attributs können Sie „data-toggle=collapse” mit dem Button-Element verwenden, um einen Trigger wie unten gezeigt zu erstellen:

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

Das Ergebnis des obigen Codes sieht wie folgt aus, ähnlich dem href-Beispiel.

Wie erstelle ich Bootstrap 5 Collapse?

4 Zusammenbruch mehrerer Tagets

Im obigen Beispiel wird eine einzelne Minimierungskomponente mit einer Schaltfläche umgeschaltet. Sie können auch mehrere Minimierungskomponenten mit einem einzigen Element umschalten. Der folgende Code hat beispielsweise drei Schaltflächen. Die erste und zweite Schaltfläche werden verwendet, um zwischen der ersten bzw. zweiten Minimierung umzuschalten. Die dritte Schaltfläche wird verwendet, um sowohl die erste als auch die zweite Minimierung zusammenzuschalten.

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

Auf Ihrer Website sieht es in etwa wie folgt aus:

Wie erstelle ich Bootstrap 5 Collapse?

Beispiel für Bootstrap Collapse

5 Akkordeon-Zusammenbruch

Die letzte und beliebteste Variante ist das Erstellen eines Akkordeons mit der Kollaps-Komponente. Unten ist der Akkordeon – Code drei Schieberegler mit – dem ersten hat Kartengruppe Layout und die restlichen zwei haben Karte mit einigem Textinhalt Überschrift.

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

Es ist ein langer Codeblock, hauptsächlich aufgrund des Kartengruppenabschnitts für den ersten Zusammenbruch. Lassen Sie uns alle Elemente dieses Codes durchgehen:

5.1. Akkordeon

  • Das Akkordeon ist in div-Tags mit einer eindeutigen ID eingebettet (in diesem Beispiel #accordion). Und das Rollenattribut sollte als Tablist verwendet werden.
  • Es werden insgesamt drei zusammenklappbare Abschnitte verwendet und jeder Abschnitt sollte mit einem eigenen div beginnen. Wir haben für jeden dieser Abschnitte die Klasse „.card” verwendet.
  • Jeder Kartenabschnitt besteht aus einer Überschrift und einem zusammenklappbaren Inhalt.

5.2. Üerschrift

  • Die Klasse „.card-header” wird für die Überschrift zusammen mit einer eindeutigen ID (Firstheading) und dem Rollenattribut mit einem Wert als Tab verwendet.
  • Fügen Sie im Header Überschriften-Tags hinzu. In diesem Fall haben wir h5 verwendet.
  • Fügen Sie innerhalb der Überschrift-Tags erneut einen Ankerlink mit den folgenden Klassen/Attributen hinzu:

    • Fügen Sie die Klasse „.collapsed” für Akkordeon hinzu.

    • Fügen Sie das Data-Toggle-Attribut mit dem Wert "collapse" hinzu.

    • Datenübergeordnetes Attribut mit derselben ID hinzufügen, die für das erste verwendet wurde

      (#Akkordeon in diesem Fall).

    • Das Href-Attribut sollte eine ID des zusammenklappbaren Inhalts haben, die „#collapse1″ ist.

    • Setzen Sie aria-expanded auf true, damit der Abschnitt beim Laden der Seite geöffnet wird (bei zweiten und weiteren Abschnitten sollten Sie dies auf false setzen, damit diese beim Laden geschlossen werden).

    • Legen Sie den aria-controls-Attributwert mit derselben ID des Href-Attributwerts fest (collapse1).

6 Zusammenklappbarer Inhaltskörper

  • Öffne ein neues

    Tag nach dem Header mit derselben ID, die dem href-Attributwert des Headers entspricht (collapse1).

  • Fügen Sie die Klasse „.collapse show” hinzu, um den Inhalt geöffnet anzuzeigen. Für die restlichen Abschnitte sollten Sie nicht „.show” verwenden, da diese geschlossen werden sollten.

  • Fügen Sie die Rolle als tabpanel hinzu und weisen Sie das aria-labelledby-Attribut mit dem gleichen Wert wie die Kartenkopf-ID (Firstheading) zu.

  • Jetzt können Sie alle Inhalte hinzufügen, die Sie hinzufügen möchten. In diesem Fall haben wir ein weiteres Div geöffnet und eine Kartengruppe für den ersten Abschnitt und Kartenblöcke für die verbleibenden zwei Abschnitte hinzugefügt.

Befolgen Sie den gleichen Vorgang für die anderen beiden Abschnitte und das endgültige Akkordeon sollte ungefähr wie folgt aussehen:

Wie erstelle ich Bootstrap 5 Collapse?


Bootstrap 5 lernen (Index )


Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen