Основная Складывающийся
Collapsibles полезны, когда вы хотите, чтобы скрыть и показать большое количество контента:
пример
<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 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> Попробуй сам " Складывающийся Список групп
- Один
- Два
- Три
Ниже показана складная панель со списком группы внутри:
пример
<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> Попробуй сам " аккордеон
В следующем примере показан простой аккордеон, расширив компонент панели.
Примечание: Используйте 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 Свернуть Ссылка
Для полного ведения всех вариантов коллапса, методов и событий, перейдите на наш Bootstrap JS Collapse Reference .