Bootstrap Zwiń
Podstawowy składany
Elementy zwijane są przydatne, 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>
Przykład wyjaśniony
Klasa .collapsewskazuje zwijalny element (w naszym przykładzie <div>); to jest treść, która zostanie pokazana lub ukryta za pomocą jednego kliknięcia.
Aby kontrolować (pokazywać/ukrywać) zawartość zwijaną, dodaj data-toggle="collapse"atrybut do elementu <a> lub <button>. Następnie dodaj data-target="#id"atrybut, aby połączyć przycisk z zawartością zwijaną (<div id="demo">).
Uwaga: W przypadku elementów <a> możesz użyć hrefatrybutu zamiast data-target
atrybutu:
Przykład
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Domyślnie zwijana zawartość jest ukryta. Możesz jednak dodać .inklasę, aby domyślnie wyświetlać zawartość:
Przykład
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Składany panel
Poniższy przykład przedstawia zwijany 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>
Grupa list zwijanych
- One
- Two
- Three
Poniżej przedstawiono zwijany panel z grupą list w środku:
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>
Akordeon
Poniższy przykład przedstawia prosty akordeon poprzez rozszerzenie komponentu panelu.
Uwaga: Użyj data-parentatrybutu, aby upewnić się, że wszystkie zwijane elementy pod określonym elementem nadrzędnym zostaną zamknięte po wyświetleniu jednego z zwijanych elementów.
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>
Kompletny dokument dotyczący zwijania Bootstrapa
Aby uzyskać pełne informacje na temat wszystkich opcji, metod i zdarzeń zwijania, przejdź do naszego podręcznika Bootstrap JS Collapse Reference .