트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다. 다음 으로이 기사를 통해 Bootstrap Folding (Collapse) 플러그인 사용의 예를 소개하겠습니다. 봅시다!
붕괴 플러그인을 사용하면 페이지 영역을 쉽게 접을 수 있습니다. 붕괴 된 탐색 또는 컨텐츠 패널을 만들기 위해 사용하든 많은 컨텐츠 옵션이 가능합니다.
플러그인의 기능을 별도로 참조하려면 Collapse.js를 참조해야합니다. 동시에 Bootstrap 버전의 전환 플러그인을 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
붕괴 플러그인을 사용할 수 있습니다.
다음과 같이 접이식 그룹 또는 접이식 패널을 만듭니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 접이식 패널 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "Accordion"> <div> <h4> <h4> <a data-toggle = "collapse"data-parent = "#Accorsion"href = "#collapseone"> 확장하려면 나를 클릭하십시오. 1 부 </a> </h4> </div> <div id = "Collapseone"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨의 신용 sapiente ea proident. Ad Vegan Excepeur 정육점 부사장 Lomo. Part 2 </a> </h4> </div> <div id = "Caprapsetwo"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨의 신용 sapiente ea proident. Ad Vegan Extoreur 정육점 부사장 Lomo. Part 3 </a> </h4> </div> <div id = "CARBAPSETHEE"> <Div> NIHIL ANIM KEFFIYEH HELVETIA, 크래프트 맥주 웨스 앤더슨의 신용 SAPIENTE EA PROIDEN. Ad Vegan Extoreur 정육점 부사장 Lomo. </div> </div> </div> </div> </body> </html>
결과는 다음과 같습니다.
Data-Toggle = "Collapse"는 확장하거나 붕괴하려는 구성 요소에 대한 링크에 추가됩니다.
HREF 또는 데이터 표적 속성은 상위 구성 요소에 추가되며 그 값은 자식 구성 요소의 ID입니다.
데이터 부모 속성은 붕괴 된 패널의 ID를 확장 또는 붕괴 할 구성 요소의 링크에 추가합니다.
아래와 같이 아코디언 태그없이 간단한 접을 수있는 구성 요소를 만듭니다 .
<! docType html> <html> <head> <title> bootstrap 인스턴스- 간단한 접이식 구성 요소 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <body> <버튼 유형 = "button"data-toggle = "data-toggle" "Collapse"data-target = "#demo"> 간단한 접이식 구성 요소 </buttone> <div id = demo "> nihil keffiyeh helvetica, craft beer and onerson priciente eAciente neciente eAciente. Ad Vegan Extoreur 정육점 부사장 Lomo. </div> </body> </html>
결과는 다음과 같습니다.
인스턴스에서 볼 수 있듯이 접이식 패널과 달리 접이식 구성 요소를 만들었으므로 속성 데이터 부모를 추가하지 않았습니다.
용법
다음 표에는 무거운 스케일링을 처리하기위한 붕괴 플러그인이 나와 있습니다.
두 가지 방법으로 붕괴 플러그인을 사용할 수 있습니다.
데이터 속성을 통해 : Data-Toggle = "Collapse"를 추가하고 Data-Target을 요소에 추가하여 접을 수있는 요소에 컨트롤을 자동으로 할당합니다. 데이터 표적 속성은 CSS 선택기를 수용하고 붕괴 효과를 적용합니다. 접을 수있는 요소에 클래스 .collapse를 추가하십시오. 기본적으로 켜져 있으려면 추가 클래스를 추가하십시오.
접이식 컨트롤에 접힌 패널과 같은 그룹화 관리를 추가하려면 데이터 속성 Data Parent = "#selector"를 추가하십시오.
JavaScript를 통해 : 붕괴 방법은 다음과 같이 JavaScript를 통해 활성화 될 수 있습니다.
$ ( '. Collapse'). Collapse ()
옵션
데이터 속성 또는 JavaScript를 통해 전달되는 몇 가지 옵션이 있습니다. 다음 표는 다음 옵션을 나열합니다.
방법
붕괴 플러그인의 유용한 방법은 다음과 같습니다.
예
다음 예제는 방법의 사용법을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 붕괴 플러그인 메소드 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "Accordion"> <div> <h4> <h4> <a data-toggle = "collapse"data-parent = "#Accorsion"href = "#collapseone"> 확장하려면 나를 클릭하십시오. 1 부-헤드 방법 </a> </h4> </div> <div id = "Collapseone"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 노동당 Anderson 신용 nesciunt sapiente ea proident. Ad Vegan Excepeur 정육점 부사장 Lomo. 파트 2- 쇼 메소드 </a> </h4> </div> <div id = "CALLAPSETWO"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 노동 wes 앤더슨의 신용 sapiente ea proident. Ad Vegan Extineur 정육점 부사장 Lomo. </div> </div> <div> <div> <h4> <A Data-Toggle = "Collapse"Data-Parent = "#Accorion"href = "#CollapSethree"> 저를 클릭하여 다시 클릭하여 다시 chaolapse를 다시 클릭하십시오. 파트 3-토글 방법 </a> </h4> </div> <div id = "carrapsethree"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 노동 wes 앤더슨의 신용 sapiente ea proident. Ad Vegan Extineur 정육점 부사장 Lomo. 파트 4-- 오브 옵션 메소드 </a> </h4> </div> <div id = "Collapsefour"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 노동 wes 앤더슨의 신용 sapiente ea proident. Ad Vegan Extineur Butcher vice lomo. </div> </div> </div> <script type = "text/javaScript"> $ (function () {$ ( '##collapsefour'). Collapse ({toggle : false}}); $ (function () {$ ( '#collapsetwo'); $ ( '##collapesTree'). Collapse ( 'Toggle')}); $ (function () {$ ( '#collapseone'). Collapse ( 'hide')}); </script> </body> </html>결과는 다음과 같습니다.
이벤트
다음 표는 붕괴 플러그인에 사용될 이벤트를 나열합니다. 이러한 이벤트는 기능의 후크로 사용될 수 있습니다.
예
다음 예는 이벤트 사용을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 붕괴 플러그인 이벤트 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "Accounion"> <div> <h4> <h4> <a data-toggle = "chaints"data-parent = "#Accorsion"href = "#collapseexample"> 나를 클릭하여 나를 클릭하여 다시 클릭하십시오. -쇼우 이벤트 </a> </h4> </div> <div id = "Collapseexample"> <div> nihil anim keffiyeh helvetica, 크래프트 맥주 노동자 앤더슨 신의 nesciunt sapiente ea proident. Ad Vegan Exceer Butcher Vice Lomo.
결과는 다음과 같습니다.
위의 내용은 편집기가 소개 한 부트 스트랩 접이식 (Collapse) 플러그인 사용 예제에 대한 자세한 설명입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!