Bootstrap은 웹 응용 프로그램 및 웹 사이트의 빠른 개발을위한 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다.
사례
다음은이 플러그인 및 관련 구성 요소로 만든 회전 목마 케이스입니다.
<div id = "carousel-example-generic"data-ride = "carousel"> <!-표시기-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic"data-slide to = "1" Data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <!-슬라이드 용 래퍼-> <div> <div> <img src = "..."> <div> ... </div> </div> ... </div> <!-컨트롤 --> <a href = "#carousel- examplice-general" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic"data-slide = "next"> <span> </span> </a> </div>
Internet Explorer 8 & 9는 전환 애니메이션 효과를 지원하지 않습니다.
부트 스트랩은 CSS3을 기반으로 애니메이션 효과를 구현하지만 Internet Explorer 8 & 9는 이러한 필요한 CSS 속성을 지원하지 않습니다. 따라서 두 브라우저를 모두 사용할 때 전환 애니메이션 효과가 손실됩니다. 또한 대체 기능의 jQuery 기반 구현을 사용하려고하지 않습니다.
선택적 옵션
모든 .item에서는 각 슬라이드에 .carousel- 캡션을 추가 할 수 있습니다. 자동으로 배열되고 형식화되는 HTML 코드를 추가 할 수도 있습니다.
900x500
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
접근성 문제
회전식 구성 요소는 접근성 표준과 호환되지 않습니다. 호환성이 필요한 경우 슬라이드를 제시하기위한 다른 옵션을 고려하십시오.
용법
데이터 속성을 통해
데이터 속성은 회전식의 위치를 쉽게 제어 할 수 있습니다. 데이터 슬라이드는 재생 위치를 제어하는 이전 또는 다음 키워드를 수락 할 수 있습니다. 또한 0으로 시작하는 슬라이드 첨자는 데이터 슬라이드로 전달 될 수도 있습니다.
Data-Ride = "Carousel"속성은 페이지가로드 된 후 시작된 회전식 구성 요소를 표시하는 데 사용됩니다.
JavaScript를 통해
회전식 구성 요소를 수동으로 시작합니다.
코드 사본은 다음과 같습니다.
$ ( '. carousel'). carousel ()
옵션
데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다. 데이터 속성의 경우 Data-InterVal = ""와 같은 데이터 다음에 옵션 이름을 넣어야합니다.
이름 유형 기본값 값 은 간격 번호 5000 슬라이드 회전의 대기 시간을 설명합니다. False 인 경우 회전 목마가 루프를 자동으로 시작하지 않습니다. 끈 "호버" 마우스가 슬라이드 영역에 머무르고 회전 목마를 일시 정지시키고 마우스는 회전 목마를 떠납니다 . 회전 목마가 계속 루프하는지 여부 부울 진짜 .
방법
.carousel (옵션)
회전식 구성 요소를 초기화하고 선택적 객체 유형 옵션 매개 변수를 수락 한 다음 슬라이드 루프를 시작하십시오.
$ ( '. carousel'). carousel ({interval : 2000}). 회전식 ( '사이클')각 프레임을 왼쪽에서 오른쪽으로 순환합니다.
.carousel ( 'pause')
회전 목마를 중지하십시오.
.carousel (번호)
회전 목마를 지정된 프레임에 배치합니다 (프레임 첨자는 배열과 유사한 0으로 시작합니다).
.carousel ( 'prev')
이전 프레임으로 돌아갑니다.
.carousel ( 'Next')
다음 프레임으로 이동하십시오.
이벤트
Bootstrap의 회전식 구성 요소는 청취를위한 두 가지 이벤트를 노출시킵니다.
| 이벤트 유형 | 설명하다 |
|---|---|
| 슬라이드 .bs.carousel | 이 이벤트는 slide 메소드가 호출 된 직후에 시작됩니다. |
| Slid.bs.carousel | 모든 슬라이드 쇼가 재생 될 때 트리거됩니다. |
$ ( '#mycarousel'). on ( 'slide.bs.carousel', function () {// 뭔가…})위의 것은 편집기가 소개 한 JS 플러그인을 기반으로 한 부트 스트랩 회전식 효과 케이스에 대한 자세한 설명입니다. 나는 그것이 당신을 도울 수 있기를 바랍니다!