ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap 4 JS Collapse


Свернуть классы CSS

Для учебника о складные, прочитайте наш Bootstrap свернуть учебник.

Класс Описание
.collapse Скрывает содержимое
.collapse show Отображение складского содержимого по умолчанию
.collapsing Добавлено, когда начинается переход, и удаляется по завершении

Через Data-* атрибуты

Просто добавьте элемент "to", data-toggle="collapse" data-target чтобы автоматически назначить элемент управления складным элементом. Атрибут Data-Target принимает селектор CSS для применения свертывания. Обязательно добавьте коллапс класса в складной элемент. Если вы хотите, чтобы по умолчанию открыть, добавить дополнительный класс "Show".

Пример

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Some text..
</div>

Совет: Чтобы добавить управление групповыми аккордеонами в складной элемент управления, добавьте данные атрибута данных-Parent = "#selector".


Через JavaScript

Включить вручную с помощью:

$('.collapse').collapse()

Свернуть параметры

Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как в Data-Parent = "".

Имя Тип По умолчанию Описание
parent selector false Все складные элементы под заданным родителем будут закрыты при отображении этого складного элемента. (аналогично традиционному аккордеонному поведению)
toggle boolean true Переключение складного элемента при вызове

Свернуть методы

В следующей таблице перечислены все доступные методы свертывания.

Метод Описание
.collapse(options) Активирует складной элемент с опцией. Приведенные выше параметры для допустимых значений
.collapse("toggle") Переключение складного элемента
.collapse("show") Показывает складной элемент
.collapse("hide") Скрывает складной элемент
.collapse("dispose") Уничтожает складной элемент

Свернуть события

В следующей таблице перечислены все доступные события свертывания.

Событие Описание
show.bs.collapse Происходит при отображении складного элемента
shown.bs.collapse Происходит при полном отображении складного элемента (после завершения CSS-переходов)
hide.bs.collapse Происходит при скрытии складного элемента
hidden.bs.collapse Происходит, когда складной элемент полностью скрыт (после завершения CSS-переходов)