개별 또는 편집

플러그인은 개별적으로(일부는 필수 종속성이 있지만) 포함하거나 한 번에 모두 포함할 수 있습니다. bootstrap.js 와 bootstrap.min.js 는 모두 단일 파일에 모든 플러그인을 포함합니다.

데이터 속성

JavaScript를 한 줄도 작성하지 않고 마크업 API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있습니다. 이것은 Bootstrap의 일급 API이며 플러그인을 사용할 때 가장 먼저 고려해야 할 사항입니다.

즉, 일부 상황에서는 이 기능을 끄는 것이 바람직할 수 있습니다. 따라서 우리는 `'data-api'`로 네임스페이스가 지정된 본문의 모든 이벤트를 바인딩 해제하여 데이터 속성 API를 비활성화하는 기능도 제공합니다. 이것은 다음과 같습니다.

$ ( '본문' ). 끄기 ( '.data-api' )

또는 특정 플러그인을 대상으로 하려면 플러그인의 이름을 다음과 같이 data-api 네임스페이스와 함께 네임스페이스로 포함하기만 하면 됩니다.

$ ( '본문' ). 끄기 ( '.alert.data-api' )

프로그래밍 방식 API

또한 JavaScript API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있어야 한다고 생각합니다. 모든 공개 API는 연결 가능한 단일 메서드이며 작업을 수행한 컬렉션을 반환합니다.

$ ( ".btn.danger" ). 버튼 ( "전환" ). addClass ( "뚱뚱한" )

모든 메소드는 선택적 옵션 객체, 특정 메소드를 대상으로 하는 문자열 또는 아무것도 허용하지 않아야 합니다(기본 동작으로 플러그인을 시작함):

$ ( "#myModal" ). modal () // 기본값으로 초기화                       
$ ( "#myModal" ). modal ({ keyboard : false }) // 키보드 없이 초기화     
$ ( "#myModal" ). modal ( 'show' ) // show를 즉시 초기화하고 호출합니다 .                

각 플러그인은 또한 `Constructor` 속성에 원시 생성자를 노출합니다 $.fn.popover.Constructor. 특정 플러그인 인스턴스를 얻으려면 요소에서 직접 검색하십시오: $('[rel=popover]').data('popover').

충돌 없음

다른 UI 프레임워크와 함께 부트스트랩 플러그인을 사용해야 하는 경우가 있습니다. 이러한 상황에서 네임스페이스 충돌이 가끔 발생할 수 있습니다. .noConflict이 경우 값을 되돌리려는 플러그인을 호출할 수 있습니다 .

var 부트스트랩 버튼 = $ . fn . 버튼 . noConflict () // $.fn.button을 이전에 할당된 값으로 반환 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn 부트스트랩 기능 제공

이벤트

부트스트랩은 대부분의 플러그인 고유 작업에 대한 사용자 정의 이벤트를 제공합니다. 일반적으로 이들은 부정사와 과거 분사 형태로 제공됩니다. 여기서 부정사(예: show)는 이벤트가 시작될 때 실행되고 과거 분사 형태(예: shown)는 작업이 완료될 때 실행됩니다.

모든 부정사 이벤트는 preventDefault 기능을 제공합니다. 이는 작업이 시작되기 전에 실행을 중지하는 기능을 제공합니다.

$ ( '#myModal' ). on ( '보여주기' , 기능 ( e ) {   
    (! 데이터 ) 가 e 를 반환 하면 . preventDefault () // 모달 표시를 중지합니다.   
})

전환 정보

간단한 전환 효과를 위해 다른 JS 파일과 함께 bootstrap-transition.js 를 한 번 포함하십시오. 컴파일된(또는 축소된) bootstrap.js 를 사용하는 경우 이를 포함할 필요가 없습니다. 이미 있습니다.

사용 사례

전환 플러그인의 몇 가지 예:

• 모달에서 슬라이딩 또는 페이드
• 페이드 아웃 탭
• 페이드 아웃 경고
• 슬라이딩 캐러셀 창

예

모달은 최소한의 필수 기능과 스마트 기본값이 포함된 능률적이지만 유연한 대화 상자 프롬프트입니다.

정적 예

바닥글에 머리글, 본문 및 일련의 작업이 있는 렌더링된 모달입니다.

<div 클래스 = "모달 숨기기 페이드" > 
  <div 클래스 = "모달 헤더" > 
    <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "모달" aria-hidden = "true" > × </버튼>    
    <h3> 모달 헤더 </h3>
  </div>
  <div 클래스 = "모달 바디" > 
    <p> 하나의 멋진 몸… </p>
  </div>
  <div 클래스 = "모달 바닥글" > 
    <a href = "#" class = "btn" > 닫기 </a>  
    <a href = "#" class = "btn btn-primary" > 변경 사항 저장 </a>  
  </div>
</div>

라이브 데모

아래 버튼을 클릭하여 JavaScript를 통해 모달을 전환하세요. 페이지 상단에서 아래로 미끄러지며 페이드 인됩니다.

<!-- 모달을 트리거하는 버튼 -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > 데모 모달 실행 </a>    
 
<!-- 모달 -->
<div id = "myModal" 클래스 = "모달 숨기기 페이드" tabindex = "-1" 역할 = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >      
  <div 클래스 = "모달 헤더" > 
    <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "모달" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > 모달 헤더 </h3> 
  </div>
  <div 클래스 = "모달 바디" > 
    <p> 하나의 멋진 몸… </p>
  </div>
  <div 클래스 = "모달 바닥글" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > 닫기 </button>   
    <button class = "btn btn-primary" > 변경 사항 저장 </button> 
  </div>
</div>

용법

데이터 속성을 통해

JavaScript를 작성하지 않고 모달을 활성화하십시오. 버튼과 같은 컨트롤러 요소를 또는 data-toggle="modal"와 함께 설정 하여 토글할 특정 모달을 대상으로 합니다.data-target="#foo"href="#foo"

<버튼 유형 = "버튼" data-toggle = "모달" data-target = "#myModal" > 모달 시작 </button>   

자바스크립트를 통해

myModal한 줄의 JavaScript 로 id를 사용하여 모달을 호출합니다 .

$ ( '#myModal' ). 모달 ( 옵션 )

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

행동 양식

.modal(옵션)

콘텐츠를 모달로 활성화합니다. 선택적 옵션을 허용합니다 object.

$ ( '#myModal' ). 모달 ({
  키보드 : 거짓 
})

.modal('토글')

수동으로 모달을 토글합니다.

$ ( '#myModal' ). 모달 ( '토글' )

.modal('표시')

수동으로 모달을 엽니다.

$ ( '#myModal' ). 모달 ( '표시' )

.modal('숨기기')

수동으로 모달을 숨깁니다.

$ ( '#myModal' ). 모달 ( '숨기기' )

이벤트

부트스트랩의 모달 클래스는 모달 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

$ ( '#myModal' ). on ( '숨겨진' , 함수 () {   
  // 뭔가를 ...
})

예

탐색 모음, 탭 및 알약을 포함하여 이 간단한 플러그인으로 거의 모든 항목에 드롭다운 메뉴를 추가합니다.

탐색 모음 내

탭 내

용법

데이터 속성을 통해

링크 또는 버튼에 추가 data-toggle="dropdown"하여 드롭다운을 전환합니다.

<div 클래스 = "드롭다운" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > 드롭다운 트리거 </a>   
  <ul 클래스 = "드롭다운 메뉴" 역할 = "메뉴" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL을 그대로 유지하려면 data-target대신 속성을 사용하세요 href="#".

<div 클래스 = "드롭다운" > 
  <a class = "dropdown-toggle" id = "dLabel" 역할 = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    쓰러지 다
    <b 클래스 = "캐럿" ></b> 
  </a>
  <ul 클래스 = "드롭다운 메뉴" 역할 = "메뉴" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

자바스크립트를 통해

JavaScript를 통해 드롭다운을 호출합니다.

$ ( '.dropdown-toggle' ). 드롭다운 ()

옵션

없음

행동 양식

$().dropdown('토글')

지정된 탐색 모음 또는 탭 탐색에 대한 메뉴 전환을 위한 프로그래밍 방식 API입니다.

탐색 모음의 예

ScrollSpy 플러그인은 스크롤 위치를 기반으로 탐색 대상을 자동으로 업데이트하기 위한 것입니다. 탐색 표시줄 아래 영역을 스크롤하여 활성 클래스 변경을 확인합니다. 드롭다운 하위 항목도 강조 표시됩니다.

용법

데이터 속성을 통해

scrollspy 동작을 상단 표시줄 탐색에 쉽게 추가하려면 data-spy="scroll"감시하려는 요소(대부분은 본문이 됨)에 추가하고 data-target=".navbar"사용할 탐색을 선택하기만 하면 됩니다. 구성 요소 와 함께 scrollspy를 사용하고 싶을 것 .nav입니다.

<본문 데이터 스파이 = "스크롤" 데이터 대상 = ".navbar" > ... </body>  

자바스크립트를 통해

JavaScript를 통해 scrollspy를 호출합니다.

$ ( '#내비게이터' ). 스크롤스파이 ()

행동 양식

.scrollspy('새로고침')

DOM에서 요소를 추가하거나 제거하는 것과 함께 scrollspy를 사용할 때 다음과 같이 새로 고침 메서드를 호출해야 합니다.

$ ( '[data-spy="scroll"]' ). 각각 ( 함수 () {  
  var $spy = $ ( this ). scrollspy ( '새로 고침' )
});

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-offset="".

이벤트

예시 탭

드롭다운 메뉴를 통해서도 로컬 콘텐츠 창을 통해 전환할 수 있는 빠르고 동적인 탭 기능을 추가합니다.

용법

JavaScript를 통해 탭 가능 탭 활성화(각 탭을 개별적으로 활성화해야 함):

$ ( '#myTab a' ). 클릭 ( 기능 ( e ) {  
  전자 . 방지기본값 ();
  $ ( 이 ). 탭 ( '표시' );
})

다음과 같은 여러 방법으로 개별 탭을 활성화할 수 있습니다.

$ ( '#myTab a[href="#profile"]' ). 탭 ( '표시' ); // 이름으로 탭 선택 
$ ( '#myTab a:first' ). 탭 ( '표시' ); // 첫 번째 탭 선택 
$ ( '#myTab a:last' ). 탭 ( '표시' ); // 마지막 탭 선택 
$ ( '#myTab li:eq(2) a' ). 탭 ( '표시' ); // 세 번째 탭 선택(0-인덱스) 

마크업

data-toggle="tab"또는 data-toggle="pill"요소 를 지정하여 JavaScript를 작성하지 않고도 탭 또는 알약 탐색을 활성화할 수 있습니다 . nav탭에 및 nav-tabs클래스를 추가하면 ul부트스트랩 탭 스타일이 적용됩니다.

<ul 클래스 = "내비게이션 탭" > 
  <li><a href = "#home" data-toggle = "tab"> 홈 </a></li >  
  <li><a href = "#profile" data-toggle = "tab" > 프로필 </a></li>  
  <li><a href = "#messages" data-toggle = "tab"> 메시지 </a></li >  
  <li><a href = "#settings" data-toggle = "tab" > 설정 </a></li>  
</ul>

행동 양식

$().탭

탭 요소와 콘텐츠 컨테이너를 활성화합니다. 탭 에는 DOM 의 data-target또는 대상 컨테이너 노드가 있어야 합니다.href

<ul 클래스 = "내비게이션 탭" id = "myTab" >  
  <li class = "active" > <a href = "#home"> 홈 </a></li>  
  <li > <a href = "#profile"> 프로필 </a></li> 
  <li > <a href = "#messages"> 메시지 </a></li> 
  <li > <a href = "#settings"> 설정 </a></li> 
</ul>
 
<div 클래스 = "탭 콘텐츠" > 
  <div 클래스 = "탭 창 활성" id = "홈" > ... </div>  
  <div 클래스 = "탭 창" id = "프로필" > ... </div>  
  <div 클래스 = "탭 창" id = "메시지" > ... </div>  
  <div 클래스 = "탭 창" id = "설정" > ... </div>  
</div>
 
<스크립트>
  $ ( 함수 () {  
    $ ( '#myTab a:last' ). 탭 ( '표시' );
  })
</스크립트>

이벤트

$ ( 'a[data-toggle="tab"]' ). on ( '보여진' , 함수 ( e ) {   
  전자 . target // 활성화된 탭
  전자 . relatedTarget // 이전 탭
})

예

Jason Frame이 작성한 뛰어난 jQuery.tipsy 플러그인에서 영감을 얻었습니다. 툴팁은 이미지에 의존하지 않고 애니메이션에 CSS3를 사용하고 로컬 타이틀 저장에 데이터 속성을 사용하는 업데이트된 버전입니다.

성능상의 이유로 툴팁 및 팝오버 데이터 API는 옵트인되어 있으므로 직접 초기화해야 합니다 .

툴팁을 보려면 아래 링크 위로 마우스를 가져갑니다.

네 방향

입력 그룹의 도구 설명

부트스트랩 입력 그룹과 함께 툴팁과 팝오버를 사용할 때 container원치 않는 부작용을 피하기 위해 (아래에 설명된) 옵션을 설정해야 합니다.

용법

JavaScript를 통해 도구 설명을 트리거합니다.

$ ( '#예제' ). 툴팁 ( 옵션 )

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 ��름을 에 추가합니다 data-animation="".

마크업

<a href = "#" data-toggle = "tooltip" title = "첫 번째 도구 설명" > 마우스를 가져 가세요 </a>   

행동 양식

$().tooltip(옵션)

요소 컬렉션에 도구 설명 처리기를 연결합니다.

.tooltip('표시')

요소의 툴팁을 표시합니다.

$ ( '#요소' ). 툴팁 ( '표시' )

.tooltip('숨기기')

요소의 툴팁을 숨깁니다.

$ ( '#요소' ). 툴팁 ( '숨기기' )

.tooltip('전환')

요소의 툴팁을 토글합니다.

$ ( '#요소' ). 툴팁 ( '전환' )

.tooltip('파괴')

요소의 툴팁을 숨기고 파괴합니다.

$ ( '#요소' ). 툴팁 ( '파괴' )

예

2차 정보를 담기 위해 모든 요소에 iPad와 같은 콘텐츠의 작은 오버레이를 추가합니다. 버튼 위로 마우스를 가져가면 팝오버가 실행됩니다. 도구 설명 이 포함되어야 합니다.

정적 팝오버

네 가지 옵션을 사용할 수 있습니다: 위쪽, 오른쪽, 아래쪽 및 왼쪽 정렬.

팝오버로 표시되는 마크업은 data속성 내의 JavaScript 및 콘텐츠에서 생성되지 않습니다.

라이브 데모

네 방향

용법

JavaScript를 통해 팝오버 활성화:

$ ( '#예제' ). 팝오버 ( 옵션 )

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-animation="".

마크업

성능상의 이유로 Tooltip 및 Popover data-apis는 옵트인되어 있습니다. 사용하려면 선택기 옵션을 지정하기만 하면 됩니다.

행동 양식

$().popover(옵션)

요소 컬렉션에 대한 팝오버를 초기화합니다.

.popover('표시')

요소 팝오버를 표시합니다.

$ ( '#요소' ). 팝오버 ( '표시' )

.popover('숨기기')

요소 팝오버를 숨깁니다.

$ ( '#요소' ). 팝오버 ( '숨기기' )

.popover('토글')

요소 팝오버를 토글합니다.

$ ( '#요소' ). 팝오버 ( '토글' )

.popover('파괴')

요소의 팝오버를 숨기고 파괴합니다.

$ ( '#요소' ). 팝오버 ( '파괴' )

경고 예시

이 플러그인을 사용하여 모든 경고 메시지에 해제 기능을 추가하십시오.

용법

JavaScript를 통해 경고 해제 활성화:

$ ( ".alert" ). 경고 ()

마크업

닫기 버튼에 추가 data-dismiss="alert"하기만 하면 경고 닫기 기능이 자동으로 제공됩니다.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

행동 양식

$().경고()

닫기 기능으로 모든 경고를 래핑합니다. 알림이 닫힐 때 알림이 표시되도록 하려면 알림에 .fade및 .in클래스가 이미 적용되어 있는지 확인하세요.

.alert('닫기')

경고를 닫습니다.

$ ( ".alert" ). 경고 ( '닫기' )

이벤트

부트스트랩의 경고 클래스는 경고 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

$ ( '#my-alert' ). 바인드 ( '닫힌' , 함수 () {   
  // 뭔가를 ...
})

사용 예

버튼으로 더 많은 작업을 수행하십시오. 버튼 상태를 제어하거나 도구 모음과 같은 더 많은 구성 요소에 대한 버튼 그룹을 만듭니다.

상태 저장

data-loading-text="Loading..."버튼의 로딩 상태를 사용하기 위해 추가 합니다.

<버튼 유형 = "버튼" 클래스 = "btn btn-primary" data-loading-text = "로드 중..." > 로드 상태 </button>   

단일 토글

data-toggle="button"단일 버튼에서 토글을 활성화하려면 추가하십시오 .

<버튼 유형 = "버튼" 클래스 = "btn btn-primary" data-toggle = "버튼" > 단일 토글 </button>   

체크박스

data-toggle="buttons-checkbox"btn-group에 체크박스 스타일 토글을 추가 합니다.

<div 클래스 = "btn-group" 데이터 토글 = "버튼 체크박스" >  
  <버튼 유형 = "버튼" 클래스 = "btn btn-primary" > 왼쪽 </button>  
  <버튼 유형 = "버튼" 클래스 = "btn btn-primary" > 중간 </button>  
  <버튼 유형 = "버튼" 클래스 = "btn btn-primary" > 오른쪽 </button>  
</div>

라디오

data-toggle="buttons-radio"btn-group에 라디오 스타일 토글을 추가 합니다.

<div 클래스 = "btn-group" 데이터 토글 = "버튼 라디오" >  
  <버튼 유형 = "버튼" 클래스 = "btn btn-primary" > 왼쪽 </button>  
  <버튼 유형 = "버튼" 클래스 = "btn btn-primary" > 중간 </button>  
  <버튼 유형 = "버튼" 클래스 = "btn btn-primary" > 오른쪽 </button>  
</div>

용법

JavaScript를 통해 버튼 활성화:

$ ( '.nav-tabs' ). 버튼 ()

마크업

데이터 속성은 버튼 플러그인에 필수적입니다. 다양한 마크업 유형은 아래 예제 코드를 확인하세요.

옵션

없음

행동 양식

$().button('토글')

푸시 상태를 전환합니다. 버튼에 활성화된 모양을 제공합니다.

<버튼 유형 = "버튼" 클래스 = "btn" 데이터 토글 = "버튼" > … </버튼>    

$().button('로드 중')

버튼 상태를 로딩으로 설정 - 버튼을 비활성화하고 텍스트를 로딩 텍스트로 바꿉니다. 로딩 텍스트는 data 속성을 사용하여 버튼 요소에 정의되어야 합니다 data-loading-text.

<버튼 유형 = "버튼" 클래스 = "btn" data-loading-text = "로드 중..." > ... </button>    

$().button('재설정')

버튼 상태 재설정 - 텍스트를 원본 텍스트로 바꿉니다.

$().버튼(문자열)

버튼 상태 재설정 - 텍스트를 데이터 정의 텍스트 상태로 바꿉니다.

<버튼 유형 = "버튼" 클래스 = "btn" data-complete-text = "완료!" > ... </버튼>    
<스크립트>
  $ ( '.btn' ). 버튼 ( '완료' )
</스크립트>

에 대한

아코디언 및 탐색과 같은 접을 수 있는 구성 요소에 대한 기본 스타일과 유연한 지원을 받으세요.

* Transitions 플러그인이 필요합니다.

아코디언 예

축소 플러그인을 사용하여 간단한 아코디언 스타일 위젯을 만들었습니다.

<div 클래스 = "아코디언" id = "아코디언2" >  
  <div 클래스 = "아코디언 그룹" > 
    <div 클래스 = "아코디언 제목" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        접을 수 있는 그룹 항목 #1
      </a>
    </div>
    <div id = "collapseOne" 클래스 = "아코디언 바디 축소" >  
      <div 클래스 = "아코디언 내부" > 
        애님 사랑 클리셰...
      </div>
    </div>
  </div>
  <div 클래스 = "아코디언 그룹" > 
    <div 클래스 = "아코디언 제목" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        접을 수 있는 그룹 항목 #2
      </a>
    </div>
    <div id = "collapseTwo" 클래스 = "아코디언 바디 축소" >  
      <div 클래스 = "아코디언 내부" > 
        애님 사랑 클리셰...
      </div>
    </div>
  </div>
</div>
...

아코디언 마크업 없이 플러그인을 사용할 수도 있습니다. 버튼이 다른 요소의 확장 및 축소를 토글하도록 합니다.

<버튼 유형 = "버튼" 클래스 = "btn btn-danger" 데이터 토글 = "접기" 데이터 대상 = "#데모" >    
  단순한 접을 수 있는
</버튼>
 
<div id = "데모" 클래스 = "접기" > … </div>  

용법

데이터 속성을 통해

data-toggle="collapse"접을 수 있는 요소에 대한 제어를 자동으로 할당하려면 및 data-targetto 요소를 추가하기만 하면 됩니다. 속성 은 data-target축소를 적용할 CSS 선택기를 허용합니다. collapse접을 수 있는 요소 에 클래스를 추가해야 합니다 . 기본적으로 열리려면 추가 클래스를 추가하십시오 in.

접을 수 있는 컨트롤에 아코디언과 같은 그룹 관리를 추가하려면 data 속성을 추가합니다 data-parent="#selector". 실제 작동을 보려면 데모를 참조하십시오.

자바스크립트를 통해

다음을 사용하여 수동으로 활성화:

$ ( ".collapse" ). 붕괴 ()

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-parent="".

행동 양식

.collapse(옵션)

콘텐츠를 접을 수 있는 요소로 활성화합니다. 선택적 옵션을 허용합니다 object.

$ ( '#myCollapsible' ). 접기 ({
  토글 : 거짓 
})

.collapse('전환')

축소 가능한 요소를 표시 또는 숨김으로 전환합니다.

.collapse('표시')

접을 수 있는 요소를 표시합니다.

.collapse('숨기기')

접을 수 있는 요소를 숨깁니다.

이벤트

부트스트랩의 접기 클래스는 접기 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

$ ( '#myCollapsible' ). on ( '숨겨진' , 함수 () {   
  // 뭔가를 ...
})

캐러셀의 예

아래 슬라이드쇼는 회전 목마와 같은 요소를 순환하기 위한 일반 플러그인 및 구성 요소를 보여줍니다.

첫 번째 썸네일 레이블

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" 클래스 = "캐러셀 슬라이드" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" 클래스 = "활성" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 캐러셀 항목 -->
  <div 클래스 = "캐러셀 내부" > 
    <div 클래스 = "활성 항목" > ... </div> 
    <div 클래스 = "항목" > ... </div> 
    <div 클래스 = "항목" > ... </div> 
  </div>
  <!-- 캐러셀 탐색 -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

용법

데이터 속성을 통해

데이터 속성을 사용하여 캐러셀의 위치를 ​​쉽게 제어할 수 있습니다. 현재 위치를 기준으로 슬라이드 위치를 변경하는 또는 data-slide키워드를 허용합니다 . 또는 를 사용 하여 슬라이드 위치를 로 시작하는 특정 인덱스로 점프 하는 캐러셀에 원시 슬라이드 인덱스를 전달합니다 .prevnextdata-slide-todata-slide-to="2"0

자바스크립트를 통해

다음을 사용하여 수동으로 캐러셀을 호출합니다.

$ ( '.carousel' ). 회전 목마 ()

옵션

옵션은 데이터 속성 또는 JavaScriptz를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-interval="".

행동 양식

.carousel(옵션)

선택적 옵션으로 캐러셀을 초기화하고 object항목 순환을 시작합니다.

$ ( '.carousel' ). 캐러셀 ({
  간격 : 2000 
})

.carousel('주기')

캐러셀 항목을 왼쪽에서 오른쪽으로 순환합니다.

.carousel('일시 중지')

캐러셀이 항목을 순환하는 것을 중지합니다.

.carousel(숫자)

캐러셀을 특정 프레임으로 순환합니다(0 기반, 배열과 유사).

.carousel('이전')

이전 항목으로 순환합니다.

.carousel('다음')

다음 항목으로 순환합니다.

이벤트

부트스트랩의 캐러셀 클래스는 캐러셀 기능에 연결하기 위한 두 가지 이벤트를 노출합니다.

예시

모든 형식의 텍스트 입력으로 우아한 자동 완성을 빠르게 생성하기 위한 기본적이고 쉽게 확장되는 플러그인입니다.

<입력 유형 = "텍스트" 데이터 제공 = "자동 완성" >  

autocomplete="off"부트스트랩 자동 완성 드롭다운 위에 기본 브라우저 메뉴가 표시되지 않도록 설정 하는 것이 좋습니다.

용법

데이터 속성을 통해

위의 예와 같이 자동 완성 기능이 있는 요소를 등록하려면 데이터 속성을 추가하십시오.

자바스크립트를 통해

다음을 사용하여 수동으로 자동 완성을 호출합니다.

$ ( '.typeahead' ). 자동 완성 ()

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-source="".

행동 양식

.typeahead(옵션)

자동 완성으로 입력을 초기화합니다.

예시

왼쪽의 하위 탐색은 affix 플러그인의 라이브 데모입니다.

용법

데이터 속성을 통해

모든 요소에 접사 동작을 쉽게 추가하려면 data-spy="affix"감시하려는 요소에 추가하기만 하면 됩니다. 그런 다음 오프셋을 사용하여 요소 고정을 켜고 끌 시기를 정의합니다.

<div 데이터 스파이 = "첨부" 데이터 오프셋 상단 = "200" > ... </div>  

자바스크립트를 통해

JavaScript를 통해 접미사 플러그인을 호출합니다.

$ ( '#내비게이터' ). () 를 붙이다

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-offset-top="200".