부트스트랩용 자바스크립트

이름	유형	기본	설명
배경	부울	진실	모달 배경 요소를 포함합니다. 또는 `static`클릭 시 모달을 닫지 않는 배경을 지정하십시오.
건반	부울	진실	이스케이프 키를 누르면 모달을 닫습니다.
보여 주다	부울	진실	초기화될 때 모달을 표시합니다.

마크업

자바스크립트를 한 줄도 작성하지 않고도 페이지에서 모달을 쉽게 활성화할 수 있습니다. 모달 요소 ID에 해당하는 or data-toggle="modal"가 있는 컨트롤러 요소에 설정하기만 하면 클릭하면 모달이 실행됩니다.data-target="#foo"href="#foo"

또한 모달 인스턴스에 옵션을 추가하려면 컨트롤 요소 또는 모달 마크업 자체에 추가 데이터 속성으로 옵션을 포함하기만 하면 됩니다.

<a class = "btn" data-toggle = "modal" href = "#myModal" > 모달 실행 </a>

<div 클래스 = "모달 숨기기" id = "myModal" >  
  <div 클래스 = "모달 헤더" > 
    <버튼 유형 = "버튼" 클래스 = "닫기" 데이터 해제 = "모달" > × </버튼>   
    <h3> 모달 헤더 </h3>
  </div>
  <div 클래스 = "모달 바디" > 
    <p> 하나의 멋진 바디... </p>
  </div>
  <div 클래스 = "모달 바닥글" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > 닫기 </a>   
    <a href = "#" class = "btn btn-primary" > 변경 사항 저장 </a>  
  </div>
</div>

머리! 모달이 안팎으로 움직이게 .fade하려면 요소에 클래스를 추가하고 .modal(실제 동작을 보려면 데모 참조) bootstrap-transition.js를 포함하세요.

행동 양식

.modal(옵션)

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

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

.modal('토글')

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

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

.modal('표시')

수동으로 모달을 엽니다.

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

.modal('숨기기')

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

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

이벤트

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

이벤트	설명
보여 주다	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시	이 이벤트는 모달이 사용자에게 표시될 때 시작됩니다(css 전환이 완료될 때까지 기다림).
숨다	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
숨겨진	이 이벤트는 모달이 사용자에게 숨겨졌을 때 시작됩니다(css 전환이 완료될 때까지 기다림).

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

드롭다운 정보

파일 다운로드

예

드롭다운을 테스트하려면 아래의 탐색 표시줄과 알약에서 드롭다운 탐색 링크를 클릭하십시오.

bootstrap-dropdown.js 사용

자바스크립트를 통해 드롭다운을 호출합니다.

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

마크업

요소에 드롭다운 기능을 빠르게 추가하려면 추가하기만 하면 data-toggle="dropdown"유효한 부트스트랩 드롭다운이 자동으로 활성화됩니다.

머리! data-target="#fat"또는 를 사용하여 선택적으로 특정 드롭다운을 대상으로 지정할 수 있습니다 href="#fat".

<ul 클래스 = "내비게이션 알약" > 
  <li class = "active" ><a href = "#" > 일반 링크 </a></li>  
  <li 클래스 = "드롭다운" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      쓰러지 다
      <b 클래스 = "캐럿" ></b> 
    </a>
    <ul class = "드롭다운 메뉴" > 
      <li > <a href = "#"> 작업 </a></li> 
      <li > <a href = "#"> 다른 작업 </a></li> 
      <li><a href = "#" > 여기에 다른 것이 있습니다 </a></li> 
      <li 클래스 = "분할기" ></li> 
      <li > <a href = "#"> 분리된 링크 </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul 클래스 = "내비게이션 알약" > 
  <li 클래스 = "드롭다운" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      쓰러지 다
      <b 클래스 = "캐럿" ></b> 
    </a>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </li>
</ul>

행동 양식

$().드롭다운()

주어진 탐색 모음 또는 탭 탐색에 대한 메뉴를 활성화하기 위한 프로그래밍 방식 API입니다.

ScrollSpy 플러그인은 스크롤 위치를 기반으로 탐색 대상을 자동으로 업데이트하기 위한 것입니다.

파일 다운로드

scrollspy가 있는 예제 탐색 모음

아래 영역을 스크롤하여 탐색 업데이트를 시청하세요. 드롭다운 하위 항목도 강조 표시됩니다. 시도 해봐!

@지방

광고레깅스 키타르, 브런치 이드 아트파티 돌로라보레. Pitchfork yr enim lo-fi가 품절되기 전입니다. Tumblr 농장에서 탁자까지 자전거 권리 무엇이든. Anim keffiyeh 칼레스 카디건. 벨릿 세이탄 맥스위니의 포토부스 3 울프문 이레르. Cosby 스웨터 lomo jean shorts, williamsburg hoodie minim qui 당신은 아마 그들과 카디건 트러스트 펀드 culpa biodiesel wes anderson 미학에 대해 들어 본 적이 없을 것입니다. Nihil 문신을 한 accusamus, cred 아이러니 바이오디젤 keffiyeh 장인 ullamco 결과.

@mdo

Veniam marfa 콧수염 스케이트보드, adipisising fugiat velit 갈퀴 수염. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. 문신을 한 코스비 스웨터 푸드트럭, mcsweeney's quis non freegan 비닐. Lo-fi 웨스 앤더슨 +1 사토리얼. Carles 비 미적 운동 qui gentrify. 브루클린 아디피사이싱 크래프트 비어 바이스 키타르 디저런트.

하나

Occaecat 코모도 알리쿠아 델렉투스. Fap 크래프트 비어 데저런트 스케이트보드 ea. 로모 자전거 권리 adipisicing banh mi, velit ea sunt 넥스트 레벨 로카보어 싱글 오리진 커피, 마그나 베니암. 하이 라이프 이드 바이닐, 에코 파크 콘세켓 퀴스 알리큅 반미 갈퀴. Vero VHS 에스트 아디피싱. Consectetur nisi DIY 미니 메신저 백. Cred ex in, 지속 가능한 delectus consectetur 패니 팩 아이폰.

둘

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

키타 트위 블로그, 쿨파 메신저백 마르파 웬디 델렉투스 푸드트럭. 사피엔테 신디사이저 Locavore sed helvetica 진부한 아이러니, Thundercats는 아마도 들어 본 적이 없을 것입니다. Labore elit placeat 매진되기 전에, terry richardson proident brunch nesciunt quis cosby 스웨터 pariatur keffiyeh ut helvetica artisan. 가디건 수제 맥주 세이탄 레디메이드 벨릿. VHS 샴브레이 라보리스 템퍼 베니아. 애님 몰릿 미니님 코모도 울람코 썬더캣츠.

bootstrap-scrollspy.js 사용

javascript를 통해 scrollspy를 호출하십시오.

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

마크업

scrollspy 동작을 상단 표시줄 탐색에 쉽게 추가하려면 data-spy="scroll"감시하려는 요소에 추가하기만 하면 됩니다(대부분의 경우 이것은 본문).

<body data-spy = "스크롤" > ... </body>

머리! Navbar 링크에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어, a <a href="#home">home</a>는 dom과 같은 항목과 일치해야 합니다 <div id="home"></div>.

행동 양식

.scrollspy('새로고침')

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

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

옵션

이름	유형	기본	설명
오프셋	숫자	10	스크롤 위치를 계산할 때 위에서 오프셋할 픽셀입니다.

이벤트

이벤트	설명
활성화	이 이벤트는 scrollspy에 의해 새 항목이 활성화될 때마다 발생합니다.

이 플러그인은 로컬 콘텐츠를 통해 전환하기 위한 빠르고 동적인 탭 및 알약 기능을 추가합니다.

파일 다운로드

예시 탭

드롭다운 메뉴를 통해서도 숨겨진 창 사이를 전환하려면 아래 탭을 클릭하십시오.

생 데님은 아마도 Austin의 청바지에 대해 들어 본 적이 없을 것입니다. Nesciunt tofu stumptown aliqua, 레트로 신디사이저 마스터 클렌저. 콧수염 진부한 템포, 윌리엄스버그 칼레스 비건 헬베티카. Reprehenderit 정육점 레트로 케피예 드림캐쳐 신디사이저. Cosby 스웨터 eu banh mi, qui irure 테리 리차드슨 ex squid. 알리큅 플레이스에트 샐비아 실룸 아이폰. Seitan aliquip quis 카디건 아메리칸 어패럴, 정육점 voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

bootstrap-tab.js 사용

자바스크립트를 통해 탭 가능 탭 활성화(각 탭을 개별적으로 활성화해야 함):

$ ( '#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"요소 를 지정하여 자바스크립트를 작성하지 않고도 탭 또는 알약 탐색을 활성화할 수 있습니다 . 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' ). 탭 ( '표시' );
  })
</스크립트>

이벤트

이벤트	설명
보여 주다	이 이벤트는 탭 표시 시 발생하지만 새 탭이 표시되기 전에 발생합니다. `event.target`및 를 사용 `event.relatedTarget`하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
표시	이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. `event.target`및 를 사용 `event.relatedTarget`하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.

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

툴팁 정보

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

파일 다운로드

툴팁 사용 예

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

bootstrap-tooltip.js 사용

자바스크립트를 통해 툴팁을 트리거합니다.

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

옵션

이름	유형	기본	설명
생기	부울	진실	툴팁에 CSS 페이드 전환 적용
놓기	문자열\|함수	'맨 위'	툴팁을 배치하는 방법 - 상단 \| 바닥 \| 왼쪽 \| 오른쪽
선택자	끈	거짓	선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다.
제목	문자열 \| 기능	''	`title` 태그가 없는 경우 기본 제목 값
방아쇠	끈	'호버'	툴팁이 트리거되는 방법 - hover \| 초점 \| 수동
지연	번호 \| 물체	0	툴팁 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다. 개체 구조는 다음과 같습니다.`delay: { show: 500, hide: 100 }`

머리! 개별 도구 설명에 대한 옵션은 데이터 속성을 사용하여 대신 지정할 수 있습니다.

마크업

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

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

행동 양식

$().tooltip(옵션)

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

.tooltip('표시')

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

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

.tooltip('숨기기')

요소의 툴팁을 숨깁니다.

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

.tooltip('전환')

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

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

팝오버 정보

2차 정보를 담기 위해 모든 요소에 iPad와 같은 콘텐츠의 작은 오버레이를 추가합니다.

* 툴팁 이 포함되어야 함

파일 다운로드

호버 팝오버의 예

버튼 위로 마우스를 가져가면 팝오버가 실행됩니다.

팝오버를 위해 마우스를 가져갑니다.

bootstrap-popover.js 사용

자바스크립트를 통해 팝오버 활성화:

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

옵션

이름	유형	기본	설명
생기	부울	진실	툴팁에 CSS 페이드 전환 적용
놓기	문자열\|함수	'오른쪽'	팝오버 위치를 지정하는 방법 - 상단 \| 바닥 \| 왼쪽 \| 오른쪽
선택자	끈	거짓	선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다.
방아쇠	끈	'호버'	툴팁이 트리거되는 방법 - hover \| 초점 \| 수동
제목	문자열 \| 기능	''	`title` 속성이 없는 경우 기본 제목 값
콘텐츠	문자열 \| 기능	''	`data-content` 속성이 없는 경우 기본 콘텐츠 값
지연	번호 \| 물체	0	팝오버 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다. 개체 구조는 다음과 같습니다.`delay: { show: 500, hide: 100 }`

머리! 개별 팝오버에 대한 옵션은 대안적으로 데이터 속성을 사용하여 지정할 수 있습니다.

마크업

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

행동 양식

$().팝오버(옵션)

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

.popover('표시')

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

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

.popover('숨기기')

요소 팝오버를 숨깁니다.

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

.popover('토글')

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

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

알림 정보

경고 플러그인은 경고에 가까운 기능을 추가하기 위한 작은 클래스입니다.

다운로드

경고 예시

경고 플러그인은 일반 경고 메시지에서 작동하고 메시지를 차단합니다.

성스러운 과카몰리! 스스로 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.

오 스냅! 오류가 발생했습니다!

이것저것 바꿔보고 다시 시도해보세요. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

이 조치를 취하십시오 아니면 이렇게 하세요

bootstrap-alert.js 사용

자바스크립트를 통해 경고 해제 활성화:

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

마크업

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

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

행동 양식

$().경고()

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

.alert('닫기')

경고를 닫습니다.

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

이벤트

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

이벤트	설명
닫다	`close`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
닫은	이 이벤트는 경고가 닫힐 때 시작됩니다(css 전환이 완료될 때까지 기다림).

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

에 대한

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

파일 다운로드

사용 예

상태 및 토글에 버튼 플러그인을 사용합니다.

상태 저장
단일 토글
체크박스
라디오

bootstrap-button.js 사용

자바스크립트를 통해 버튼 활성화:

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

마크업

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

<!-- 단일 버튼에서 토글을 활성화하려면 data-toggle="button" 추가 -->
<button class = "btn" data-toggle = "button" > 단일 토글 </button>  
 
<!-- btn-group에서 체크박스 스타일 토글을 위한 data-toggle="buttons-checkbox" 추가 -->
<div 클래스 = "btn-group" 데이터 토글 = "버튼 체크박스" >  
  <버튼 클래스 = "btn" > 왼쪽 </button> 
  <버튼 클래스 = "btn" > 중간 </button> 
  <버튼 클래스 = "btn" > 오른쪽 </button> 
</div>
 
<!-- btn-group에서 라디오 스타일 토글을 위한 data-toggle="buttons-radio" 추가 -->
<div 클래스 = "btn-group" 데이터 토글 = "버튼 라디오" >  
  <버튼 클래스 = "btn" > 왼쪽 </button> 
  <버튼 클래스 = "btn" > 중간 </button> 
  <버튼 클래스 = "btn" > 오른쪽 </button> 
</div>

행동 양식

$().button('전환')

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

머리! data-toggle속성 을 사용하여 버튼의 자동 토글을 활성화할 수 있습니다 .

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

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

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

<button class = "btn" data-loading-text = "로드 중..." > ... </button>

머리! Firefox는 페이지 로드 시 비활성화 상태를 유지합니다 . 이에 대한 해결 방법은 를 사용하는 것 autocomplete="off"입니다.

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

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

$().버튼(문자열)

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

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

에 대한

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

파일 다운로드

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

아코디언 예

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

접을 수 있는 그룹 항목 #1

애님 사랑스러운 진부한 표현, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolf moon officia aute, non cupidatt 스케이트보드 돌로 브런치. 푸드트럭 quinoa nesciunt labum eiusmod. 브런치 3 울프 문 템포, 선트 알리쿠아 새를 올려 놓은 오징어 싱글 오리진 커피 nulla squeezendashoreditch et. Nihil anim keffiyeh helvetica, 수제 맥주 laboure wes anderson cred nesciunt sapiente ea proident. 광고 비건 예외 정육점 부사장 lomo. 레깅스 occaecat 크래프트 맥주 농장에서 식탁까지, 생 데님 미학적 신디사이저 nesciunt accusamus laboure 지속 가능한 VHS에 대해 들어 본 적이 없을 것입니다.

접을 수 있는 그룹 항목 #2

접을 수 있는 그룹 항목 #3

bootstrap-collapse.js 사용

자바스크립트를 통해 활성화:

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

옵션

이름	유형	기본	설명
부모의	선택자	거짓	선택기인 경우 이 축소 가능한 항목이 표시될 때 지정된 부모 아래의 모든 축소 가능한 요소가 닫힙니다. (기존의 아코디언 동작과 유사)
비녀장	부울	진실	호출 시 접을 수 있는 요소를 토글합니다.

마크업

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

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

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

행동 양식

.collapse(옵션)

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

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

.collapse('전환')

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

.collapse('표시')

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

.collapse('숨기기')

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

이벤트

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

이벤트	설명
보여 주다	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시	이 이벤트는 축소 요소가 사용자에게 표시될 때 시작됩니다(css 전환이 완료될 때까지 기다림).
숨다	`hide`이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
숨겨진	이 이벤트는 접기 요소가 사용자에게 숨겨지면 시작됩니다(css 전환이 완료될 때까지 기다림).

$ ( '#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.

‹ ›

머리! 이 캐러셀을 구현할 때 제공한 이미지를 제거하고 자신의 이미지로 교체하세요.

bootstrap-carousel.js 사용

자바스크립트를 통한 호출:

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

옵션

이름	유형	기본	설명
간격	숫자	5000	항목을 자동으로 순환하는 사이의 지연 시간입니다. false인 경우 캐러셀이 자동으로 순환하지 않습니다.
정지시키다	끈	"호버"	mouseenter에서 회전 목마의 순환을 일시 중지하고 mouseleave에서 회전 목마의 순환을 다시 시작합니다.

마크업

데이터 속성은 이전 및 다음 제어에 사용됩니다. 아래에서 예제 마크업을 확인하세요.

<div id = "myCarousel" 클래스 = "캐러셀 슬라이드" >  
  <!-- 캐러셀 항목 -->
  <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>

행동 양식

.carousel(옵션)

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

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

.carousel('주기')

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

.carousel('일시 중지')

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

.carousel(숫자)

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

.carousel('이전')

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

.carousel('다음')

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

이벤트

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

이벤트	설명
미끄러지 다	`slide`이 이벤트는 인스턴스 메서드가 호출 될 때 즉시 발생합니다 .
미끄러지다	이 이벤트는 캐러셀이 슬라이드 전환을 완료하면 시작됩니다.

에 대한

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

파일 다운로드

예시

자동 완성 결과를 표시하려면 아래 필드에 입력을 시작하세요.

bootstrap-typeahead.js 사용

자바스크립트를 통해 자동 완성 호출:

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

옵션

이름	유형	기본	설명
원천	정렬	[ ]	쿼리할 데이터 소스입니다.
아이템	숫자	8	드롭다운에 표시할 최대 항목 수입니다.
매처	기능	대소문자를 구분하지 않음	쿼리가 항목과 일치하는지 확인하는 데 사용되는 방법입니다. `item`쿼리를 테스트할 단일 인수를 허용 합니다. 를 사용하여 현재 쿼리에 액세스합니다 `this.query`. `true`쿼리가 일치하는 경우 부울을 반환합니다 .
다소	기능	정확히 일치, 대소문자 구분, 대소문자 구분하지 않음	자동 완성 결과를 정렬하는 데 사용되는 방법입니다. 단일 인수 `items`를 허용하고 자동 완성 인스턴스의 범위를 가집니다. 를 사용하여 현재 쿼리를 참조합니다 `this.query`.
형광펜	기능	모든 기본 일치 강조 표시	자동 완성 결과를 강조 표시하는 데 사용되는 방법입니다. 단일 인수 `item`를 허용하고 자동 완성 인스턴스의 범위를 가집니다. html을 반환해야 합니다.

마크업

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

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

행동 양식

.typeahead(옵션)

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

jQuery 플러그인 시작하기 위한 12가지 부트스트랩 플러그인

팝오버 *

전환 *

모달 bootstrap- modal.js

모달 정보

정적 예

모달 헤더

라이브 데모

모달 제목

모달의 텍스트

모달의 팝오버

모달의 툴팁

선택적 스크롤 막대를 표시하기 위해 텍스트 오버플로

부트스트랩 모달 사용

옵션

마크업

행동 양식

.modal(옵션)

.modal('토글')

.modal('표시')

.modal('숨기기')

이벤트

드롭다운 bootstrap-dropdown.js

드롭다운 정보

예

bootstrap-dropdown.js 사용

마크업

행동 양식

$().드롭다운()

ScrollSpy 부트스트랩-scrollspy.js

scrollspy가 있는 예제 탐색 모음

@지방

@mdo

하나

둘

three

bootstrap-scrollspy.js 사용

마크업

행동 양식

.scrollspy('새로고침')

옵션

이벤트

전환 가능한 탭 bootstrap-tab.js

예시 탭

bootstrap-tab.js 사용

마크업

행동 양식

$().탭

이벤트

도구 설명 bootstrap-tooltip.js

툴팁 정보

툴팁 사용 예

bootstrap-tooltip.js 사용

옵션

마크업

행동 양식

$().tooltip(옵션)

.tooltip('표시')

.tooltip('숨기기')

.tooltip('전환')

팝오버 bootstrap- popover.js

팝오버 정보

호버 팝오버의 예

bootstrap-popover.js 사용

옵션

마크업

행동 양식

$().팝오버(옵션)

.popover('표시')

.popover('숨기기')

.popover('토글')

경고 메시지 bootstrap-alert.js

알림 정보

경고 예시

오 스냅! 오류가 발생했습니다!

bootstrap-alert.js 사용

마크업

행동 양식

$().경고()

.alert('닫기')