Bootstrap Свернуть
Свернуть в Bootstrap
Складные удобно использовать, когда вы хотите, чтобы скрыть и показать большой объем содержимого:
Пример
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Пример объяснено
.collapse класс указывает на складной элемент (<div> в нашем примере);
Это содержимое, которое будет отображаться или скрыто одним нажатием кнопки.
Для управления (отображения/скрытия) складного содержимого добавьте data-toggle="collapse" атрибут в элемент <a> или <Button>.
Затем добавьте data-target="#id" атрибут для соединения кнопки с разборным содержимым (< div ID = "Demo" >).
Примечание: Для элементов <a> можно использовать href атрибут, а не data-target атрибут:
Пример
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
По умолчанию складное содержимое скрыто. Однако можно добавить .in класс для отображения содержимого по умолчанию:
Пример
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Складная панель
В следующем примере показана Складная панель:
Пример
<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>
Складная группа списков
- One
- Two
- Three
Ниже показана Складная панель с группой List внутри:
Пример
<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>
Аккордеон
В следующем примере демонстрируется простой аккордеон, расширяющий компонент Panel.
Примечание: Используйте этот data-parent атрибут, чтобы убедиться, что все складные элементы под заданным родителем будут закрыты при отображении одного из складных элементов.
Пример
<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>
Полная справка свертывания начальной загрузки
Для полной справка на все варианты коллапса, методы и события, перейдите на наш справка bootstrap JS свернуть.
