Плагин коллапса позволяет легко сложить область страницы. Независимо от того, используете ли вы его для создания свернутой навигации или панели контента, это позволяет много вариантов контента.
Если вы хотите ссылаться на функциональность плагина индивидуально, вам необходимо ссылаться на Collapsse.js или, как упомянуто в главе Bootstrap Plugin , вы можете ссылаться на Bootstrap.js или сжатые версии Bootstrap.min.js.
1. Использование
В следующей таблице перечислены плагин с коллапсом для обработки тяжелого масштабирования:
Вы можете использовать плагин коллапса двумя способами:
Через атрибут данных: добавьте DATA-toggle = "COLLAPSE" и направлено на то, что Data Target в элемент для автоматического назначения элементов управления складываемым элементам. Свойство Target Data принимает селектор CSS и применяет к нему эффект обрушения. Обязательно добавьте класс. Приберите в складной элемент. Если вы хотите, чтобы он был включен по умолчанию, добавьте дополнительный класс .in.
Чтобы добавить свернутое управление группировкой, подобную панели, в складное управление, добавьте свойство данных Data Parent = "#selector".
Через JavaScript : метод коллапса может быть активирован с помощью JavaScript, как показано ниже:
$ ('. COLLAPSE'). COLLAPSE ()
2. Примеры
Контент может быть свернут, нажав.
// Базовый пример
<Кнопка Data-toggle = "collapse" data-target = "#content"> bootstrap </button> <div id = "content"> <div> Bootstrap-это инструментарий с открытым исходным кодом для фронтальной разработки, запущенной Twitter. Он был разработан дизайнером Twitter Марком Отто и Джейкобом Торнтоном и является фреймворком CSS/HTML. В настоящее время последняя версия Bootstrap - 3.0. </div> </div>
// складывание аккордеона
<div id = "accormion"> <div> <div> <h4> <a href = "#collapseone" data-toggle = "collapse" data-parent = "#accordion">, чтобы отобразить меня, затем нажмите, чтобы сложить, часть 1 </a> </h4> </div> <div id = "collapseone"> <div> здесь-первая часть. </div> </div> </div> <div> <h4> <a href = "#collapsetwo" data-toggle = "collapsse" data-parent = "#accordion">, чтобы отобразить, затем нажмите, чтобы сложить, часть 2 </a> </h4> </div> <div id = "collapsetwo"> <div>. </div> </div> </div> <div> <div> <h4> <a href = "#collapsethree" data-toggle = "collapsse" data-parent = "#accordion"> нажмите, чтобы отобразить, затем нажмите, чтобы сложить, часть 3 </a> </h4> </div> <div id = "collpsetree"> <div>-третья часть. </div> </div> </div> </div>
// эффект аккордеона
$ ('#collapseone,#collapsetwo,#collapsethree, #collapsefour'). Collapsse ({parent: '#accordion', Toggle: false,});// звонить вручную
$ ('button'). On ('click', function () {$ ('#collapseone'). Collapsse ({toggle: true,});});// Метод коллапса также предоставляет три параметра: скрыть, показывать и переключать.
$ ('#collapseOne'). Collapsse ('hide'); $ ('#collapsetwo'). Collapsse ('show'); $ ('кнопка'). On ('click', function () {$ ('#collapseone'). Collapse ('toggle');});В подключаемом модуле есть четыре типа событий.
// События, другие сходства
$ ('#collapseOne'). On ('show.bs.collapse', function () {alert ('бесплатно, когда метод шоу называется');});Я надеюсь, что эта статья будет полезной и вдохновляющей, чтобы узнать о плагине Bootstrap Coolpse.