Neueste Web-Entwicklung Tutorials
 

Bootstrap Collapse


Grund Collapsible

Collapsibles sind nützlich, wenn Sie ausblenden möchten und zeigen große Menge an Inhalt:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Beispiel

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Versuch es selber "

Beispiel erklärt

Die .collapse Klasse zeigt einen zusammenklappbaren Element (a <div> in unserem Beispiel); Dies ist der Inhalt, der mit einem Klick auf eine Schaltfläche angezeigt oder ausgeblendet werden.

Zur Steuerung (Ein- / Ausblenden) , um den zusammenklappbaren Inhalt, fügen Sie die data-toggle="collapse" Attribut zu einer <a> oder ein <button> Element. Dann fügen Sie die data-target="#id" Attribut die Schaltfläche mit dem zusammenklappbaren Inhalt zu verbinden (<div id="demo">) .

Hinweis: Für <a> Elemente, die Sie verwenden können href Attribut anstelle des data-target

Beispiel

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Versuch es selber "

Standardmäßig ist der zusammenklappbare Inhalt versteckt. Sie können jedoch die hinzufügen .in Klasse den Inhalt automatisch zeigt:

Beispiel

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Versuch es selber "

Reduzierbare Palette

Panel Gehäuse

Das folgende Beispiel zeigt einen zusammenklappbaren Platte:

Beispiel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
Versuch es selber "

Reduzierbare Liste Gruppe

  • Eins
  • Zwei
  • Drei

Im Folgenden wird ein zusammenklappbares Panel mit einer Liste Gruppe innen:

Beispiel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>
Versuch es selber "

Akkordeon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Das folgende Beispiel zeigt ein einfaches Akkordeon durch die Panel-Komponente erstreckt.

Hinweis: Verwenden Sie die data-parent - Attribut , um sicherzustellen , dass alle zusammenklappbare Elemente unter dem angegebenen Eltern geschlossen wird, wenn einer der zusammenklappbare Element dargestellt ist.

Beispiel

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>
Versuch es selber "

Komplette Bootstrap Collapse Referenz

Eine vollständige Referenz aller Zusammenbruch Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Collapse Referenz .