Podstawowe Składany
Collapsibles są użyteczne, gdy chcesz ukryć i pokazać dużą ilość treści:
Przykład
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Spróbuj sam " Przykład Poradnik
.collapse Klasy wskazuje element składany (a <div> w naszym przykładzie); to jest treść, która zostanie pokazane lub ukryte za pomocą kliknięcia przycisku.
Aby sterować (pokaż / ukryj) składanej treści, dodaj data-toggle="collapse" atrybutu do <a> lub <button> elementu. Następnie dodać data-target="#id" atrybutu połączyć przycisk z treści składanego (<div id="demo">) .
Uwaga: W przypadku <a> elementów, można użyć href atrybut zamiast data-target atrybutu:
Przykład
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Spróbuj sam " Domyślnie składane treść jest ukryta. Można jednak dodać .in klasę pokazać zawartość domyślnie:
Składany panel
Poniższy przykład pokazuje, składany panel:
Przykład
<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> Spróbuj sam " Składany Lista grup
- Jeden
- Dwa
- Trzy
Poniżej przedstawiono składany panel z grupy listy wewnątrz:
Przykład
<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> Spróbuj sam " Akordeon
Poniższy przykład pokazuje prosty akordeonie poprzez rozszerzenie komponentu panelu.
Uwaga: Użyj data-parent atrybut, aby upewnić się, że wszystkie elementy składane w ramach określonego rodzica zostanie zamknięta, gdy jedna z pozycji składany jest pokazana.
Przykład
<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> Spróbuj sam " Kompletna Bootstrap Collapse referencyjny
Pełną odniesienia wszystkich zwiń opcje, metod i zdarzeń, przejdź do naszej Bootstrap JS Collapse Reference .