Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
В Bootstrap плагин свертывание позволяет переключать контент на ваших страницах с помощью нескольких классов благодаря некоторым полезным JavaScript.
Нажмите на ссылку ниже, чтобы показать и скрыть другой элемент через изменения класса:
.collapse скрывает содержание.collapsing применяется во время переходов.collapse.in показывает содержаниеВы можете использовать ссылку с href атрибут, или кнопка с атрибутом data-target. В обоих случаях data-toggle="collapse" необходима.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>Унаследовать collapse по умолчанию, чтобы создать аккордеон.
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>Не забудьте добавить aria-expanded элементу управления. Этот атрибут однозначно определяет ток состояние сборного элемента на экране читателей и подобных вспомогательных технологий. Если складной элемент закрыт по умолчанию, он должен иметь значение aria-expanded="false". Если вы установите складной элемент, который будет открыт по умолчанию, используя in класс, набор aria-expanded="true", а не на контроль. Плагин будет автоматически переключаться на этот атрибут, если не разборный элемент был открыт или закрыт.
Кроме того, если элемент ориентирован на один складной элемент, т. е. data-target атрибут, указывающий на id селектор – можно добавить дополнительные aria-controls атрибут в элемент, содержащий id складной элемент. Современные читатели экраном и подобных вспомогательных технологий используйте этот атрибут, чтобы предоставить пользователям дополнительные клавиши, чтобы перейти непосредственно к самой складной элемент.
Плагин распада использует несколько классов для обработки тяжелую работу:
.collapse скрывает содержимое.collapse.in показывает содержимое.collapsing добавляется при переходе начинается, и удаляется, когда это заканчиваетсяЭти классы можно найти в _animation.scss.
Просто добавьте data-toggle="collapse" и data-target для элемента, чтобы автоматически назначить управление складной элемент. На data-target атрибут принимает CSS селектор применять коллапс. Будьте уверены, чтобы добавить класс collapse складной элемент. Если вы хотите по умолчанию открыть, добавить дополнительный класс in.
Чтобы добавить гармошкой управления группа складной-контроль, добавьте атрибут Data data-parent="#selector". Ознакомьтесь с демо, чтобы увидеть это в действии.
Включение вручную:
$('.collapse').collapse()Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-parent="".
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| parent | selector | false | Если имеется селектор, потом все разборные элементы в указанной родительской будет закрыт, когда этот складной элемент отображается. (аналог традиционного поведения аккордеон - это зависит от panel класс) |
| toggle | boolean | true | Переключает складной элемент на вызов |
.collapse(options)Активирует ваш Контент как разборный элемент. Принимает необязательный варианты object.
$('#myCollapsible').collapse({
toggle: false
}).collapse('toggle')Переключает складной элемент показаны или скрыты.
.collapse('show')Показывает складной элемент.
.collapse('hide')Скрывает складной элемент.
Bootstrap класс крах предоставляет несколько событий для навешивания на функциональность крах.
| Тип События | Описание |
|---|---|
| show.bs.collapse | Это событие возникает сразу же, когда show способ экземпляра называется. |
| shown.bs.collapse | Это событие запускается, когда элемент развал был сделан видимым для пользователя (будет ждать CSS переходы для завершения). |
| hide.bs.collapse |
Это событие сразу же уволили, когда hide метод был вызван.
|
| hidden.bs.collapse | Это событие запускается, когда элемент развал был скрыт от пользователя (будет ждать CSS переходы для завершения). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// сделать что-то...
})