Die Anleitung zu Bootstrap Collapse und Accordion

Bootstrap Collapse
Das Multi Targets
Accordion

1. Bootstrap Collapse

Bootstrap Collapse ist ein nützliches Komponent, das einen Raum (area) auf die Seit verstecken oder anzeigen. Der Benutzer kann den Raum erweitern um die Inhalt da zu sehen oder den Raum verstecken um die Plätze zu versparen.

Collapse

<!-- Link collapse -->
<a class="btn btn-link" href="#" data-toggle="collapse" data-target="#target1">
    What is Lorem Ipsum?
</a>
<div id="target1" class="collapse">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ...
</div>


<!-- Button collapse -->
<button class="btn" data-toggle="collapse" data-target="#target2">
    Why do we use it?
</button>
<div id="target2" class="collapse">
   It is a long established fact that a reader will be distracted by the
   readable content of a page when looking at its layout...
</div>

Das volle Beispiel sehen

collapse-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Dropdown Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container mt-3">
         <h4 class="mb-1">Collapse Example</h4>

         <a class="btn btn-link" href="#" data-toggle="collapse" data-target="#target1">
             What is Lorem Ipsum?
         </a>
         <div id="target1" class="collapse">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ...
         </div>

         <br><br>

         <button class="btn" data-toggle="collapse" data-target="#target2">
             Why do we use it?
         </button>
         <div id="target2" class="collapse">
            It is a long established fact that a reader will be distracted by the
            readable content of a page when looking at its layout...
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Collapse fasst 2 Teile um, button (oder Link) und das Ziel (target), wenn der Benutzer auf button klickt, wird das Ziel versteckt oder angezeigt. Bootstrap verwendet jQuery um diese Aktion zu behandeln.

Zum ersten wird die Klasse .collapse für das Ziel angewendet (target), jetzt ist das Ziel versteckt.
Der Benutzer klickt auf den button , wird die Klasse .collapsing für das Ziel angewendet. Sie werden sehen, dass das Ziel erweitert werden.
Zum letzten wenn die Inhalt ganz angezeigt wird, wird das Ziel die Klasse .collapse.show erstellt

2. Das Multi Targets

Sie können mehrere Ziele (target) für einen button (oder Link) durch die Verwendung von jQuery Selector bestimmen, d.h wenn der Benutzer auf button klickt, werden die Ziele verstecken oder anzeigen.

Multi Target

<p>
   <a class="btn btn-primary" data-toggle="collapse" href="#target1" role="button">
     Show/Hide Target 1
   </a>
   <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#target2">
     Show/Hide Target 2
   </button>
   <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".myTarget">
     Toggle both Targets
   </button>
</p>

<div class="row">
   <div class="col">
      <div class="collapse myTarget" id="target1">
         <div class="card card-body">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry...
         </div>
      </div>
   </div>
   <div class="col">
      <div class="collapse myTarget" id="target2">
         <div class="card card-body">
            Anim pariatur cliche reprehenderit,
            enim eiusmod high life accusamus terry richardson ad squid....
         </div>
      </div>
   </div>
</div>

3. Accordion

Accordion ist ein Interface-Komponent. Es wird aus vielen ".card" gemacht, die vertikal gestapelt đứng. Jede .card kann nach der Konfiguration erweitern (expand) oder verkleinern (collapse) .

Das ist das Foto der Struktur einer Accordion:

accordion-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Accordion Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container mt-3">
         <h4 class="mb-1">Accordion Example</h4>

         <div class="accordion" id="accordionExample">
            <div class="card">
               <div class="card-header" id="headingOne">
                  <h5 class="mb-0">
                     <button class="btn btn-link" type="button" data-toggle="collapse"
                        data-target="#collapseOne"
                        aria-expanded="true" aria-controls="collapseOne">
                     Javascript
                     </button>
                  </h5>
               </div>
               <div id="collapseOne" class="collapse show"
                  aria-labelledby="headingOne" data-parent="#accordionExample">
                  <div class="card-body">
                     JavaScript is a scripting or programming language that
                     allows you to implement complex things on web pages ..
                  </div>
               </div>
            </div>

            <div class="card">
               <div class="card-header" id="headingTwo">
                  <h5 class="mb-0">
                     <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                        data-target="#collapseTwo"
                        aria-expanded="false" aria-controls="collapseTwo">
                     Css
                     </button>
                  </h5>
               </div>
               <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                  data-parent="#accordionExample">
                  <div class="card-body">
                     CSS stands for Cascading Style Sheets.
                     CSS describes how HTML elements are to be displayed on screen,
                     paper, or in other media ..
                  </div>
               </div>
            </div>

            <div class="card">
               <div class="card-header" id="headingThree">
                  <h5 class="mb-0">
                     <button class="btn btn-link collapsed" type="button"
                        data-toggle="collapse" data-target="#collapseThree"
                        aria-expanded="false" aria-controls="collapseThree">
                     Bootstrap
                     </button>
                  </h5>
               </div>
               <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                  data-parent="#accordionExample">
                  <div class="card-body">
                     Bootstrap is a free front-end framework for faster and easier web development.
                     Bootstrap includes HTML and CSS based design templates for typography ...
                  </div>
               </div>
            </div>

         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Die Anleitung zu Bootstrap Card

Die Anleitung zu Bootstrap Collapse und Accordion

1. Bootstrap Collapse

2. Das Multi Targets

3. Accordion

Anleitungen Bootstrap

Anleitungen Bootstrap

Neueste Artikel