Bootstrap, из Twitter, является самой популярной фронтальной структурой в настоящее время. Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее. Далее, благодаря этой статье, я представлю вам пример использования плагина Bootstrap Folding (коллапс). Давайте посмотрим!
Плагин коллапса позволяет легко сложить область страницы. Независимо от того, используете ли вы его для создания свернутой навигации или панели контента, это позволяет много вариантов контента.
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Collapsse.js. В то же время вам также необходимо ссылаться на плагин перехода в версии начальной загрузки. Или, как упомянуто в главе обзора плагинов Bootstrap, вы можете обратиться к Bootstrap.js или сжатым версиям Bootstrap.min.js.
Вы можете использовать плагин коллапса:
Создайте складную группировку или складную панель следующим образом:
<! Doctype html> <html> <head> <tite> экземпляр Bootstrap - складная панель </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheatship"> <script src = "/scripts/jquery.min.s.> </script> <script> <script> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "accordion"> <div> <h4> <a data-toggle = "collapse" data-parent = "#accorcodion" href = "#collapseone"> Нажмите, чтобы расширить, нажмите на меня, чтобы справиться снова. Часть 1 </a> </h4> </div> <div id = "collapseOne"> <viv> nihil anim keffiyeh helvetica, крафтовое пиво труд Wes Anderson cred nesciunt sapiente ea proive. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> <div> <h4> <a data-toggle = "collapsse" data-parent = "#accordion" href = "#collapsetwo"> нажмите, чтобы расширить, нажмите меня, чтобы снова обрушиться. Часть 2 </a> </h4> </div> <div id = "collapsetwo"> <viv> nihil anim keffiyeh helvetica, Craft Beer Labour Wes Anderson Credn Nesciunt Sapiente EA Proive. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> <div> <h4> <a data-toggle = "collapsse" data-parent = "#accordion" href = "#collapsethree"> нажмите, чтобы развернуть, нажмите на то, чтобы снова коллап. Часть 3 </a> </h4> </div> <div id = "collapsethree"> <div> nihil anim keffiyeh helvetica, крафтовое пиво труд Wes Anderson cred Nesciunt sapiente ea proive. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> </div> </div> </body> </html>
Результаты следующие:
Data-toggle = "коллапс" добавляется в ссылку на компонент, который вы хотите расширить или обрушиться.
Свойство HREF или Data Target добавляется в родительский компонент, а его значение-идентификатор дочернего компонента.
Свойство родителя данных добавляет идентификатор свернутой панели в ссылку компонента, которая должна быть расширена или свернута.
Создайте простой складной компонент без аккордеонной теги, как показано ниже:
<! Doctype html> <html> <head> <title> экземпляр Bootstrap- простой складной компонент </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.js.js" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <button Type = "button" data-toggle = "collapse" data-target = "#demo"> простой складной компонент </button> <div Id = "demo"> nihil hipecteheheheheheheheheheeheeheemeehelehe lemo elevetice, Creft wes andern nemon nepinte emointe. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </body> </html>
Результаты следующие:
Как вы можете видеть в экземпляре, мы создали складной компонент, в отличие от сложенной панели, мы не добавили родитель данных.
Использование
В следующей таблице перечислены плагин с коллапсом для обработки тяжелого масштабирования:
Вы можете использовать плагин коллапса двумя способами:
Через атрибут данных: добавьте DATA-toggle = "COLLAPSE" и направлено на то, что Data Target в элемент для автоматического назначения элементов управления складываемым элементам. Свойство Target Data принимает селектор CSS и применяет к нему эффект обрушения. Обязательно добавьте класс. Приберите в складной элемент. Если вы хотите, чтобы он был включен по умолчанию, добавьте дополнительный класс .in.
Чтобы добавить свернутое управление группировкой, подобную панели, в складное управление, добавьте свойство данных Data Parent = "#selector".
Через JavaScript: метод коллапса может быть активирован с помощью JavaScript, как показано ниже:
$ ('. COLLAPSE'). COLLAPSE ()Параметры
Есть некоторые варианты, которые передаются через свойства данных или JavaScript. В следующей таблице перечислены эти параметры:
метод
Вот несколько полезных методов в плагинах коллапса:
Пример
Следующий пример демонстрирует использование метода:
<! Doctype html> <html> <head> <title> экземпляр Bootstrap - метод плагина COLLAPS src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "accordion"> <div> <h4> <a data-toggle = "collapse" data-parent = "#accorcodion" href = "#collapseone"> Нажмите, чтобы расширить, нажмите на меня, чтобы справиться снова. Часть 1-метод hide </a> </h4> </div> <div id = "collapseone"> <viv> nihil anim keffiyeh helvetica, крафтовое пиво труд Wes Anderson cred nesciunt sapiente ea proaint. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> <div> <h4> <a data-toggle = "collapsse" data-parent = "#accordion" href = "#collapsetwo"> нажмите, чтобы расширить, нажмите меня, чтобы снова обрушиться. Часть 2 -Метод -шоу </a> </h4> </div> <div id = "collapsetwo"> <div> nihil anim keffiyeh helvetica, крафтовое пиво труд Wes Anderson Crement nesciunt sapiente ea proaint. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapsethree"> нажмите, чтобы расширить, нажмите на меня снова. Часть 3-Метод Toggle </a> </h4> </div> <div id = "collapsethree"> <div> nihil anim keffiyeh helvetica, крафтовое пиво труд Wes Anderson cred nesciunt sapiente ea proaint. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> <div> <h4> <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapsefour"> нажмите, чтобы развернуть, нажмите меня, чтобы снова обрушиться. Часть 4-Метод опций </a> </h4> </div> <div id = "collapsefour"> <viv> nihil anim keffiyeh helvetica, крафтовое пиво лейбористов Wes Anderson Crement nesciunt sapiente ea provice. Ad Vegan Excepteur Butcher Vice Lomo. </Div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#collapsefour'). Коллапс ({togge: false})}); $ ('#collapsethree'). Collapsse ('toggle')}); $ (function () {$ ('#collapseone'). Collapse ('hide')}); </script> </body> </html>Результаты следующие:
событие
В следующей таблице перечислены события, которые будут использоваться в плагине коллапса. Эти события могут использоваться в качестве крючков в функциях.
Пример
Следующий пример демонстрирует использование событий:
<! Doctype html> <html> <head> <title> экземпляр Bootstrap Event - Collapse Plugin Event </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.js. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "accordion"> <div> <h4> <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample"> Нажмите, чтобы расширить меня, нажмите на меня, чтобы справиться снова. -Shown Event </a> </h4> </div> <div id = "collapseexample"> <viv> nihil anim keffiyeh helvetica, крафтовое пиво Wes Anderson cred Nesciunt sapiente ea provision. Ad Vegan Excectteur Butcher Vice Lomo. </Div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#collapseexample'). On ('show.bs.collapse', function () {alert ('Привет, это предупреждение подразумевается, когда вы расширяете'); </body> </html>Результаты следующие:
Выше приведено подробное объяснение примера использования плагина Bootstrap Folding (коллапс), представленного редактором. Я надеюсь, что это будет полезно для всех!