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

이제 12개의 사용자 정의 jQuery 플러그인 으로 Bootstrap의 구성 요소에 생명을 불어넣습니다 .

모달

능률적이지만 유연하며 최소한의 필수 기능과 스마트 기본값만 있는 기존 자바스크립트 모달 플러그인을 사용합니다.

드롭다운

이 간단한 플러그인으로 부트스트랩의 거의 모든 항목에 드롭다운 메뉴를 추가하세요. Bootstrap은 탐색 모음, 탭 및 알약에서 전체 드롭다운 메뉴 지원을 제공합니다.

스크롤스파이

scrollspy를 사용하여 탐색 모음의 링크를 자동으로 업데이트하여 스크롤 위치를 기반으로 현재 활성 링크를 표시합니다.

전환 가능한 탭

이 플러그인을 사용하여 탭과 알약이 로컬 콘텐츠의 탭 가능한 창을 통해 전환할 수 있도록 하여 탭과 알약을 더 유용하게 만들 수 있습니다.

툴팁

jQuery Tipsy 플러그인을 새롭게 재해석한 툴팁은 이미지에 의존하지 않으며 애니메이션에는 CSS3를 사용하고 로컬 타이틀 저장에는 데이터 속성을 사용합니다.

팝오버 *

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

* 도구 설명 이 포함되어야 합니다.

경고 메시지

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

버튼

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

무너지다

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

회전 목마

컨텐츠의 대화형 슬라이드쇼를 제공하려는 컨텐츠의 회전목마를 만드십시오.

자동 완성

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

전환 *

간단한 전환 효과의 경우 bootstrap-transition.js를 한 번 포함하여 모달에 삽입하거나 경고를 페이드 아웃합니다.

* 플러그인의 애니메이션에 필요

머리! 모든 자바스크립트 플러그인에는 최신 버전의 jQuery가 필요합니다.

모달 정보

능률적이지만 유연하며 최소한의 필수 기능과 스마트 기본값만 있는 기존 자바스크립트 모달 플러그인을 사용합니다.

파일 다운로드

정적 예

아래는 정적으로 렌더링된 모달입니다.

라이브 데모

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

데모 모달 실행

부트스트랩 모달 사용

자바 스크립트를 통해 모달을 호출하십시오.

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

옵션

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

마크업

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > 모달 실행 </a>
  1. <div 클래스 = "모달 숨기기" id = "myModal" >
  2. <div 클래스 = "모달 헤더" >
  3. <버튼 유형 = "버튼" 클래스 = "닫기" 데이터 해제 = "모달" > × </버튼>
  4. <h3> 모달 헤더 </h3>
  5. </div>
  6. <div 클래스 = "모달 바디" >
  7. <p> 하나의 멋진 바디... </p>
  8. </div>
  9. <div 클래스 = "모달 바닥글" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > 닫기 </a>
  11. <a href = "#" class = "btn btn-primary" > 변경 사항 저장 </a>
  12. </div>
  13. </div>
머리! 모달이 안팎으로 움직이게 .fade하려면 요소에 클래스를 추가하고 .modal(실제 동작을 보려면 데모 참조) bootstrap-transition.js를 포함하세요.

행동 양식

.modal(옵션)

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

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

.modal('토글')

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

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

.modal('표시')

수동으로 모달을 엽니다.

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

.modal('숨기기')

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

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

이벤트

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

이벤트 설명
보여 주다 show이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시 이 이벤트는 모달이 사용자에게 표시될 때 시작됩니다(css 전환이 완료될 때까지 기다림).
숨다 hide이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
숨겨진 이 이벤트는 모달이 사용자에게 숨겨졌을 때 시작됩니다(css 전환이 완료될 때까지 기다림).
  1. $ ( '#myModal' ). on ( '숨겨진' , 함수 () {
  2. // 뭔가를 ...
  3. })

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를 호출하십시오.

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

마크업

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

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

행동 양식

.scrollspy('새로고침')

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

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

옵션

이름 유형 기본 설명
오프셋 숫자 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.


bootstrap-tab.js 사용

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

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

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

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

마크업

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

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

행동 양식

$().탭

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

  1. <ul 클래스 = "내비게이션 탭" id = "myTab" >
  2. <li class = "active" > <a href = "#home"> </a></li>
  3. <li > <a href = "#profile"> 프로필 </a></li>
  4. <li > <a href = "#messages"> 메시지 </a></li>
  5. <li > <a href = "#settings"> 설정 </a></li>
  6. </ul>
  7.  
  8. <div 클래스 = "탭 콘텐츠" >
  9. <div 클래스 = "탭 창 활성" id = "홈" > ... </div>
  10. <div 클래스 = "탭 창" id = "프로필" > ... </div>
  11. <div 클래스 = "탭 창" id = "메시지" > ... </div>
  12. <div 클래스 = "탭 창" id = "설정" > ... </div>
  13. </div>
  14.  
  15. <스크립트>
  16. $ ( 함수 () {
  17. $ ( '#myTab a:last' ). ( '표시' );
  18. })
  19. </스크립트>

이벤트

이벤트 설명
보여 주다 이 이벤트는 탭 표시 시 발생하지만 새 탭이 표시되기 전에 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
표시 이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
  1. $ ( 'a[data-toggle="tab"]' ). on ( '보여진' , 함수 ( e ) {
  2. 전자 . target // 활성화된 탭
  3. 전자 . relatedTarget // 이전 탭
  4. })

툴팁 정보

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

파일 다운로드

툴팁 사용 예

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

타이트한 바지 다음 레벨 keffiyeh 아마도 들어 본 적이 없을 것입니다. 포토 부스 비어드 로우 데님 레터프레스 비건 메신저 백 스텀프타운. Farm-to-table seitan, mcsweeney's fixie 지속 가능한 quinoa 8비트 미국 의류 에는 terry richardson 비닐 샴브레이가 있습니다. 비어드 스텀프타운, 카디건 반미로모 썬더캣츠. 두부 바이오디젤 윌리엄스버그 마르파, 포로코 맥위니의 정화 비건 샴브레이. 정말 아이러니한 장인 은 키타르가 무엇이든 간에 , scenester 농장에서 테이블까지의 뱅크시 Austin 트위터가 freegan cred raw 데님 싱글 오리진 커피 바이럴을 처리합니다.


bootstrap-tooltip.js 사용

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

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

옵션

이름 유형 기본 설명
생기 부울 진실 툴팁에 CSS 페이드 전환 적용
놓기 문자열|함수 '맨 위' 툴팁을 배치하는 방법 - 상단 | 바닥 | 왼쪽 | 오른쪽
선택자 거짓 선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다.
제목 문자열 | 기능 '' `title` 태그가 없는 경우 기본 제목 값
방아쇠 '호버' 툴팁이 트리거되는 방법 - hover | 초점 | 수동
지연 번호 | 물체 0

툴팁 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다.

숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다.

개체 구조는 다음과 같습니다.delay: { show: 500, hide: 100 }

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

마크업

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

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

행동 양식

$().tooltip(옵션)

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

.tooltip('표시')

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

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

.tooltip('숨기기')

요소의 툴팁을 숨깁니다.

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

.tooltip('전환')

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

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

팝오버 정보

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

* 툴팁 이 포함되어야

파일 다운로드

호버 팝오버의 예

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


bootstrap-popover.js 사용

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

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

옵션

이름 유형 기본 설명
생기 부울 진실 툴팁에 CSS 페이드 전환 적용
놓기 문자열|함수 '오른쪽' 팝오버 위치를 지정하는 방법 - 상단 | 바닥 | 왼쪽 | 오른쪽
선택자 거짓 선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다.
방아쇠 '호버' 툴팁이 트리거되는 방법 - hover | 초점 | 수동
제목 문자열 | 기능 '' `title` 속성이 없는 경우 기본 제목 값
콘텐츠 문자열 | 기능 '' `data-content` 속성이 없는 경우 기본 콘텐츠 값
지연 번호 | 물체 0

팝오버 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다.

숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다.

개체 구조는 다음과 같습니다.delay: { show: 500, hide: 100 }

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

마크업

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

행동 양식

$().팝오버(옵션)

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

.popover('표시')

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

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

.popover('숨기기')

요소 팝오버를 숨깁니다.

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

.popover('토글')

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

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

알림 정보

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

다운로드

경고 예시

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

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

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

이것저것 바꿔보고 다시 시도해보세요. 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 사용

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

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

마크업

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

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

행동 양식

$().경고()

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

.alert('닫기')

경고를 닫습니다.

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

이벤트

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

이벤트 설명
닫다 close이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
닫은 이 이벤트는 경고가 닫힐 때 시작됩니다(css 전환이 완료될 때까지 기다림).
  1. $ ( '#my-alert' ). 바인드 ( '닫힌' , 함수 () {
  2. // 뭔가를 ...
  3. })

에 대한

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

파일 다운로드

사용 예

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

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

bootstrap-button.js 사용

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

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

마크업

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

  1. <!-- 단일 버튼에서 토글을 활성화하려면 data-toggle="button" 추가 -->
  2. <button class = "btn" data-toggle = "button" > 단일 토글 </button>
  3.  
  4. <!-- btn-group에서 체크박스 스타일 토글을 위한 data-toggle="buttons-checkbox" 추가 -->
  5. <div 클래스 = "btn-group" 데이터 토글 = "버튼 체크박스" >
  6. <버튼 클래스 = "btn" > 왼쪽 </button>
  7. <버튼 클래스 = "btn" > 중간 </button>
  8. <버튼 클래스 = "btn" > 오른쪽 </button>
  9. </div>
  10.  
  11. <!-- btn-group에서 라디오 스타일 토글을 위한 data-toggle="buttons-radio" 추가 -->
  12. <div 클래스 = "btn-group" 데이터 토글 = "버튼 라디오" >
  13. <버튼 클래스 = "btn" > 왼쪽 </button>
  14. <버튼 클래스 = "btn" > 중간 </button>
  15. <버튼 클래스 = "btn" > 오른쪽 </button>
  16. </div>

행동 양식

$().button('전환')

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

머리! data-toggle속성 을 사용하여 버튼의 자동 토글을 활성화할 수 있습니다 .
  1. <버튼 클래스 = "btn" 데이터 토글 = "버튼" > </버튼>

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

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

  1. <button class = "btn" data-loading-text = "로드 중..." > ... </button>
머리! Firefox는 페이지 로드 시 비활성화 상태를 유지합니다 . 이에 대한 해결 방법은 를 사용하는 것 autocomplete="off"입니다.

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

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

$().버튼(문자열)

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

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

에 대한

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

파일 다운로드

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

아코디언 예

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

애님 사랑스러운 진부한 표현, 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에 대해 들어 본 적이 없을 것입니다.
애님 사랑스러운 진부한 표현, 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에 대해 들어 본 적이 없을 것입니다.
애님 사랑스러운 진부한 표현, 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에 대해 들어 본 적이 없을 것입니다.

bootstrap-collapse.js 사용

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

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

옵션

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

마크업

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

  1. <버튼 클래스 = "btn btn-danger" 데이터 토글 = "접기" 데이터 대상 = "#데모" >
  2. 단순한 접을 수 있는
  3. </버튼>
  4.  
  5. <div id = "데모" 클래스 = "접기" > </div>
머리! 접을 수 있는 컨트롤에 아코디언과 같은 그룹 관리를 추가하려면 data 속성을 추가합니다 data-parent="#selector". 실제 작동을 보려면 데모를 참조하십시오.

행동 양식

.collapse(옵션)

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

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

.collapse('전환')

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

.collapse('표시')

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

.collapse('숨기기')

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

이벤트

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

이벤트 설명
보여 주다 show이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시 이 이벤트는 축소 요소가 사용자에게 표시될 때 시작됩니다(css 전환이 완료될 때까지 기다림).
숨다 hide이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
숨겨진 이 이벤트는 접기 요소가 사용자에게 숨겨지면 시작됩니다(css 전환이 완료될 때까지 기다림).
  1. $ ( '#myCollapsible' ). on ( '숨겨진' , 함수 () {
  2. // 뭔가를 ...
  3. })

에 대한

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

파일 다운로드

예시

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


bootstrap-typeahead.js 사용

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

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

옵션

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

마크업

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

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

행동 양식

.typeahead(옵션)

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