부트 스트랩은 매일 붕괴 플러그인을 배워야합니다

붕괴 플러그인을 사용하면 페이지 영역을 쉽게 접을 수 있습니다. 붕괴 된 탐색 또는 컨텐츠 패널을 만들기 위해 사용하든 많은 컨텐츠 옵션이 가능합니다.

플러그인의 기능을 개별적으로 참조하려면 Collapse.js를 참조하거나 Bootstrap 플러그인 개요 장에서 언급 한 것처럼 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조 할 수 있습니다.

1. 사용법

다음 표에는 무거운 스케일링을 처리하기위한 붕괴 플러그인이 나와 있습니다.

두 가지 방법으로 붕괴 플러그인을 사용할 수 있습니다.

데이터 속성을 통해 : Data-Toggle = "Collapse"를 추가하고 Data-Target을 요소에 추가하여 접을 수있는 요소에 컨트롤을 자동으로 할당합니다. 데이터 표적 속성은 CSS 선택기를 수용하고 붕괴 효과를 적용합니다. 접을 수있는 요소에 클래스 .collapse를 추가하십시오. 기본적으로 켜져 있으려면 추가 클래스를 추가하십시오.

접이식 컨트롤에 접힌 패널과 같은 그룹화 관리를 추가하려면 데이터 속성 Data Parent = "#selector"를 추가하십시오.

JavaScript를 통해 : 붕괴 방법은 다음과 같이 JavaScript를 통해 활성화 될 수 있습니다.

$ ( '. Collapse'). Collapse ()

2. 예

클릭하면 내용이 붕괴 될 수 있습니다.

// 기본 예

 <버튼 데이터-토글 = "붕괴"data-target = "#content"> bootstrap </button> <div id = "content"> <div> 부트 스트랩은 트위터에서 시작한 프론트 엔드 개발을위한 오픈 소스 툴킷입니다. 트위터 디자이너 Mark Otto와 Jacob Thornton이 개발했으며 CSS/HTML 프레임 워크입니다. 현재 Bootstrap의 최신 버전은 3.0입니다. </div> </div>

// 아코디언 접이식

 <div id = "아코디언"> <div> <div> <h4> <a href = "#collapseone"data-toggle = "콜랩스"data-parent = "#Accorsion"> 그런 다음 표시하려면 나를 클릭 한 다음 1 부 </h4> </div> <div id = "Collapseon"> <div> 여기입니다. </div> </div> </div> <div> <h4> <a href = "#collapsetwo"data-toggle = "collapse"data-parent = "#Actsion"> 그런 다음 표시를 클릭 한 다음 내려다 보려면 두 번째 부분입니다. </div> </div> </div> <div> <div> <h4> <a href = "#collapsethree"data-toggle = "collapse"data-parent = "#아코디언"> 그런 다음 표시하려면 나를 클릭하십시오. </div> </div> </div> </div>

// 아코디언 효과

 $ ( '#collapseone,#collapsetwo,#collapsethree, #collapsefour'). Collapse ({parent : '#accordion', 토글 : false,});

// 수동으로 전화하십시오

 $ ( 'button'). on ( 'click', function () {$ ( '#collapseone'). Collapse ({토글 : true,});});

// 붕괴 방법은 또한 세 가지 매개 변수를 제공합니다 : 숨기기, 표시 및 토글.

 $ ( '#collapseone'). collapse ( 'hide'); $ ( '#collapsetwo'). collapse ( 'show'); $ ( 'button'). on ( 'click', function () {$ ( '##collapseone'). collapse ( 'toggle');});

붕괴 플러그인에는 네 가지 유형의 이벤트가 있습니다.

// 이벤트, 기타 유사성

 $ ( '##collapseone'). on ( 'show.bs.collapse', function () {alert ( 'show 메소드가 호출 될 때 무료 자유');});

이 기사가 부트 스트랩 붕괴 플러그인에 대해 배우는 데 도움이되고 영감을주기를 바랍니다.