이 기사는 주로 JavaScript 플러그인 - 접기에 대해 배웁니다.
1. 전환 효과
전환 효과에 대해
간단한 전환 효과의 경우 전환 만 소개합니다 .JS 및 기타 JS 파일을 함께 소개하십시오. 컴파일 된 (또는 압축) bootstrap.js 파일을 사용하는 경우 별도로 소개 할 필요가 없습니다.
안에있는 것
Transition.js는 TransitionEnd 이벤트의 기본 도우미이며 CSS 전환 효과의 시뮬레이션이기도합니다. 다른 플러그인에서 현재 브라우저가 CSS 전이 효과를 지원하는지 여부를 감지하는 데 사용됩니다.
2. 접어
기본 스타일과 유연한 지원을 제공합니다.
플러그인 종속성
붕괴 플러그인은 전환 효과 플러그인에 따라 다릅니다.
사례
접이식 플러그인을 사용하여 패널 구성 요소를 확장하여 간단한 아크론 구성 요소를 구축합니다.
효과를 먼저 살펴 보겠습니다.
다음으로 코드의 구현을 살펴 보겠습니다.
<div style = "margin-top : 140px;"> <div id = "아코디언"> <div> <div> <h4> a data-toggle = "collapse"data-toggle = "collapse"data-parent = "#아코디언"href = "#collapseon"> divse> <collapseon "> <" "" "divseon"> div> Cliche Reprehenderit, Enim Eiusmod High Life Accusamus Terry Richardson Ad Squid. 3 Wolf Moon 공무원, 비 Cupidat Skateboard Dolor 브런치. 푸드 트럭 quinoa nesciunt laborum eiusmod. 브런치 3 Wolf Moon Temp, Sunt Aliqua는 새를 넣습니다. nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨 신의 nesciunt sapiente ea proident. 광고 비건 제외 정육점 부사장 Lomo. 레깅스 Occaecat 크래프트 맥주 농장에서 테이블, 원시 데님 미학적 신디사이저 Nesciunt 아마도 당신은 아마도 그들을 애도하는 노동력 지속 가능한 VH에 대해 들어 본 적이 없을 것입니다. </div> </div> </div> <div> <h4> <data-toggle = "collapse"data-toggle = "collapse"data-parent = "#아코디언"href = "#caprapsetwo"> clospible Group 항목#2 </a> </h4> </div> <div> </h4> </div> <div> Richardson Ad Squid. 3 Wolf Moon Officialaute, 비 Cupidatat 스케이트 보드 Dolor 브런치. 푸드 트럭 quinoa nesciunt laborum eiusmod. 브런치 3 Wolf Moon Temp, Sunt Aliqua는 새를 넣습니다. nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨 신의 nesciunt sapiente ea proident. 광고 비건 제외 정육점 부사장 Lomo. 레깅스 Occaecat 크래프트 맥주 농장에서 테이블, 원시 데님 미학적 신디사이저 Nesciunt 아마도 당신은 아마도 그들을 애도하는 노동력 지속 가능한 VH에 대해 들어 본 적이 없을 것입니다. </div> </div> </div> <div> <h4> <data-toggle = "Collapse"Data-Toggle = "Collapse"Data-Parent = "#Acction"href = "#carrapsethree"> 접을 수있는 그룹 항목#3 </a> </h4> </div> <div id = "<div> <div> enimice reprehend, enimice reprehend, Accusamus Terry Richardson Ad Squid. 3 Wolf Moon 공식 Aute, 비 Cupidatat 스케이트 보드 Dolor 브런치. 푸드 트럭 quinoa nesciunt laborum eiusmod. 브런치 3 Wolf Moon Temp, Sunt Aliqua는 새를 넣습니다. nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨 신의 nesciunt sapiente ea proident. 광고 비건 제외 정육점 부사장 Lomo. 레깅스 Occuaecat 크래프트 맥주 농장-테이블, 원시 데님 미학적 신디사이저 Nesciunt 아마도 당신은 아마도 그들을 애도하는 노동력 지속 가능한 VH에 대해 들어 본 적이 없을 것입니다. </div> </div> </div> </div> </div> </div>
1 단계 : 먼저, 패널 그룹의 가장 바깥 층에는 아래의 여러 그룹이 포함됩니다.
2 단계 : 몇 가지 간단한 그룹을 살펴보십시오
<div> <h4> <A Data-Toggle = "Collapse"Data-Toggle = "Collapse"Data-Parent = "#Accounion"href = "#CollapSeone"> Collapsible Group Item#1 </h4> </div> <div id = "Collapseon"> <div> </div> </div>
패널의 구조는 코드를 통해 명확하게 볼 수 있습니다.
패널 헤더 및 PANDL-BODY 및 패널 헤더에는 제목과 링크가 포함될 수 있습니다. 링크를 통해 패널 바디와 연결하십시오.
3 단계 : 패널 그룹에 id = = "아코디언"이 있음을 알 수 있으며 아래 각 제목 아래 링크에 데이터 부모 = "#Accordion"이 있음을 알 수 있습니다.
제거하면 다른 링크를 클릭 한 후 원래 패널이 다시 줄어들지 않는다.
다른 방식으로 접는 효과를 보여줄 수 있습니다.
<div style = "margin-top : 140px;"> <버튼 유형 = "버튼"data-toggle = "collapse"data-target = "#demo"> Simple Collapse </button> <div id = "demo"> Anim Pariatur Cliche Reprehender, enim eiusmod High Life Appusamus Terry Richardson Ad Squid. 3 Wolf Moon 공식 Aute, 비 Cupidat 스케이트 보드 돌고리 브런치. 푸드 트럭 quinoa nesciunt laborum eiusmod. 브런치 3 Wolf Moon Temp, Sunt Aliqua는 새를 넣습니다. nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨 신의 nesciunt sapiente ea proident. 광고 비건 제외 정육점 부사장 Lomo. 레깅스 Occaecat 크래프트 맥주 농장에서 테이블, 원시 데님 미학적 신디사이저 Nesciunt 당신은 아마 그들에 대해 들어 본 적이 없을 것입니다.
용법
폴드 플러그인은 여러 간단한 클래스를 통해 스타일을 제어합니다
.Collapse hide 컨텐츠
. 쇼 콘텐츠의 콜라스
.collapsing. 전환이 시작될 때 추가되고 마감되면 제거되면 폴드가 추가 된 후 전환 효과를 사용할 수 있고 제거되면 종료됩니다.
데이터 속성을 통해
Data-Toggle = "Collapse"를 추가하고 페이지 요소에 데이터 타겟을 추가하면 접을 수있는 페이지 요소를 제어 할 수 있습니다. 데이터 표적 속성은 CSS 선택기를 제어 객체로 받아들입니다. 붕괴 된 페이지 요소에 붕괴 클래스를 추가하십시오. 붕괴 된 페이지 요소의 기본 상태를 확장하려면 클래스를 추가하십시오.
접이식 페이지 요소 세트에 컨트롤러를 추가하려면 Data Parent = "#selector"를 추가하십시오. 위의 예를 참조하십시오.
JavaScript를 통해
<button type = "button"onclick = "open ()"> Open </button> <버튼 유형 = "button"onclick = "hide ()"> fold </button> <div id = "demo"> anim pariatur cliche reprehenderit, enim eiusmod 높은 수명 Terry Richardson ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad ad add. 3 Wolf Moon 공식 Aute, 비 Cupidat 스케이트 보드 돌고리 브런치. 푸드 트럭 quinoa nesciunt laborum eiusmod. 브런치 3 Wolf Moon Temp, Sunt Aliqua는 새를 넣습니다. nihil anim keffiyeh helvetica, 크래프트 맥주 웨스 앤더슨 신의 nesciunt sapiente ea proident. 광고 비건 제외 정육점 부사장 Lomo. 레깅스 Occuaecat 크래프트 맥주 농장-테이블, 원시 데님 미학적 신디사이저 Nesciunt 아마도 당신은 아마 그들에 대해 들어 본 적이 없을 것입니다.
<script type = "text/javaScript"> $ (function () {$ ( "#demo"). Collapse ({toggle : false})}) 함수 open () {$ ( "#demo"). Collapse ( "show"); } function hide () {$ ( "#demo"). Collapse ( "hide"); } </스크립트>위의 효과를 살펴보십시오
방법
페이지 요소에 접을 수있는 기능을 제공하십시오. 선택적 객체를 인수로 받아들입니다.
$ ( "#demo"). Collapse ({토글 : false})
이러한 방식으로, 초기화되면 요소가 확장됩니다.
1. 붕괴 ( '토글')는 접을 수있는 페이지 요소를 표시하거나 숨 깁니다.
2. Collapse ( 'show')는 접을 수있는 페이지 요소를 표시합니다.
3. Collapse ( 'Hide')는 접을 수있는 페이지 요소를 숨 깁니다.
이벤트
부트 스트랩의 붕괴 된 플러그인은들을 수있는 일련의 이벤트를 노출시킵니다.
이것은 숨겨진 사건을 요소에 묶습니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.