자바스크립트

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

개별 또는 편집

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

데이터 속성

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

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

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

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

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

프로그래밍 방식 API

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

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

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

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

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

충돌 없음

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

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

이벤트

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

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

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

전환 정보

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

사용 사례

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

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

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

정적 예

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

  1. <div 클래스 = "모달 숨기기 페이드" >
  2. <div 클래스 = "모달 헤더" >
  3. <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "모달" aria-hidden = "true" > × </버튼>
  4. <h3> 모달 헤더 </h3>
  5. </div>
  6. <div 클래스 = "모달 바디" >
  7. <p> 하나의 멋진 몸… </p>
  8. </div>
  9. <div 클래스 = "모달 바닥글" >
  10. <a href = "#" class = "btn" > 닫기 </a>
  11. <a href = "#" class = "btn btn-primary" > 변경 사항 저장 </a>
  12. </div>
  13. </div>

라이브 데모

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

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

용법

데이터 속성을 통해

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

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

자바스크립트를 통해

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

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

옵션

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

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

load원격 URL이 제공되면 콘텐츠가 jQuery의 메서드 를 통해 로드 되고 .modal-body. 데이터 API를 사용하는 경우 href태그를 사용하여 원격 소스를 지정할 수도 있습니다. 이에 대한 예는 다음과 같습니다.

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

행동 양식

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

@지방

광고 레깅스 키타르, 브런치 아이디 아트파티 돌로라보레. 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 샴브레이 라보리스 템퍼 베니아. 애님 몰릿 미니님 코모도 울람코 썬더캣츠.


용법

데이터 속성을 통해

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

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

자바스크립트를 통해

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

  1. $ ( '#내비게이터' ). 스크롤스파이 ()
머리! 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. });

옵션

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

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

이벤트

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

예시 탭

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

생 데님은 아마도 Austin의 청바지에 대해 들어 본 적이 없을 것입니다. 네시운트 두부 스텀프타운 알리쿠아, 레트로 신디사이저 마스터 클렌저. 콧수염 진부한 템포, 윌리엄스버그 칼레스 비건 헬베티카. 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.


용법

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

  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"요소 를 지정하여 JavaScript를 작성하지 않고도 탭 또는 알약 탐색을 활성화할 수 있습니다 . 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를 사용하고 로컬 타이틀 저장에 데이터 속성을 사용하는 업데이트된 버전입니다.

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

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

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

네 방향

입력 그룹의 도�� 설명

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


용법

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

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

옵션

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

이름 유형 기본 설명
생기 부울 진실 툴팁에 CSS 페이드 전환 적용
HTML 부울 거짓 툴팁에 html을 삽입합니다. false인 경우 jquery의 text메서드를 사용하여 콘텐츠를 DOM에 삽입합니다. XSS 공격이 걱정된다면 텍스트를 사용하세요.
놓기 문자열 | 기능 '맨 위' 툴팁을 배치하는 방법 - 상단 | 바닥 | 왼쪽 | 오른쪽
선택자 거짓 선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다.
제목 문자열 | 기능 '' `title` 태그가 없는 경우 기본 제목 값
방아쇠 '포커스' 툴팁이 실행되는 방법 - 클릭 | 호버 | 초점 | 수동. 여러 개의 트리거, 공백으로 구분된 트리거 유형을 전달하는 경우에 유의하십시오.
지연 번호 | 물체 0

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

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

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

컨테이너 문자열 | 거짓 거짓

특정 요소에 툴팁을 추가합니다.container: 'body'

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

마크업

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

행동 양식

$().tooltip(옵션)

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

.tooltip('표시')

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

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

.tooltip('숨기기')

요소의 툴팁을 숨깁니다.

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

.tooltip('전환')

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

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

.tooltip('파괴')

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

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

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

정적 팝오버

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

팝오버 탑

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

팝오버 오른쪽

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

팝오버 하단

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

팝오버 왼쪽

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

라이브 데모

네 방향


용법

JavaScript를 통해 팝오버 활성화:

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

옵션

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

이름 유형 기본 설명
생기 부울 진실 툴팁에 CSS 페이드 전환 적용
HTML 부울 거짓 팝오버에 html을 삽입합니다. false인 경우 jquery의 text메서드를 사용하여 콘텐츠를 DOM에 삽입합니다. XSS 공격이 걱정된다면 텍스트를 사용하세요.
놓기 문자열 | 기능 '오른쪽' 팝오버 위치를 지정하는 방법 - 상단 | 바닥 | 왼쪽 | 오른쪽
선택자 거짓 선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다.
방아쇠 '딸깍 하는 소리' 팝오버가 트리거되는 방법 - 클릭 | 호버 | 초점 | 수동
제목 문자열 | 기능 '' `title` 속성이 없는 경우 기본 제목 값
콘텐츠 문자열 | 기능 '' `data-content` 속성이 없는 경우 기본 콘텐츠 값
지연 번호 | 물체 0

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

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

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

컨테이너 문자열 | 거짓 거짓

특정 요소에 팝오버를 추가합니다.container: 'body'

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

마크업

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

행동 양식

$().popover(옵션)

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

.popover('표시')

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

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

.popover('숨기기')

요소 팝오버를 숨깁니다.

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

.popover('토글')

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

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

.popover('파괴')

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

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

경고 예시

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

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

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

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

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


용법

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

  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. })

사용 예

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

상태 저장

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

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

단일 토글

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

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

체크박스

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

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

라디오

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

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

용법

JavaScript를 통해 버튼 활성화:

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

마크업

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

옵션

없음

행동 양식

$().button('토글')

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

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

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

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

  1. <버튼 유형 = "버튼" 클래스 = "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에 대해 들어 본 적이 없을 것입니다.
  1. <div 클래스 = "아코디언" id = "아코디언2" >
  2. <div 클래스 = "아코디언 그룹" >
  3. <div 클래스 = "아코디언 제목" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. 접을 수 있는 그룹 항목 #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" 클래스 = "아코디언 바디 축소" >
  9. <div 클래스 = "아코디언 내부" >
  10. 애님 사랑 클리셰...
  11. </div>
  12. </div>
  13. </div>
  14. <div 클래스 = "아코디언 그룹" >
  15. <div 클래스 = "아코디언 제목" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. 접을 수 있는 그룹 항목 #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" 클래스 = "아코디언 바디 축소" >
  21. <div 클래스 = "아코디언 내부" >
  22. 애님 사랑 클리셰...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

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

용법

데이터 속성을 통해

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

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

자바스크립트를 통해

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

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

옵션

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

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

행동 양식

.collapse(옵션)

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

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

.collapse('전환')

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

.collapse('표시')

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

.collapse('숨기기')

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

이벤트

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

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

예시

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

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

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


용법

데이터 속성을 통해

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

자바스크립트를 통해

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

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

옵션

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

이름 유형 기본 설명
원천 배열, 함수 [ ] 쿼리할 데이터 원본입니다. 문자열 또는 함수의 배열일 수 있습니다. query함수 에는 입력 필드의 값과 process콜백 의 두 인수가 전달 됩니다. process함수는 데이터 소스를 직접 또는 콜백의 단일 인수 를 통해 비동기적으로 반환하여 동기적으로 사용할 수 있습니다 .
아이템 숫자 8 드롭다운에 표시할 최대 항목 수입니다.
최소 길이 숫자 1 자동 완성 제안을 실행하기 전에 필요한 최소 문자 길이
매처 기능 대소문자를 구분하지 않음 쿼리가 항목과 일치하는지 확인하는 데 사용되는 방법입니다. item쿼리를 테스트할 단일 인수를 허용 합니다. 를 사용하여 현재 쿼리에 액세스합니다 this.query. true쿼리가 일치하는 경우 부울을 반환합니다 .
다소 기능 정확히 일치,
대소문자 구분,
대소문자 구분하지 않음
자동 완성 결과를 정렬하는 데 사용되는 방법입니다. 단일 인수 items를 허용하고 자동 완성 인스턴스의 범위를 가집니다. 를 사용하여 현재 쿼리를 참조합니다 this.query.
업데이터 기능 선택한 항목을 반환 선택한 항목을 반환하는 데 사용되는 메서드입니다. 단일 인수를 허용 item하고 자동 완성 인스턴스의 범위를 갖습니다.
형광펜 기능 모든 기본 일치 강조 표시 자동 완성 결과를 강조 표시하는 데 사용되는 방법입니다. 단일 인수 item를 허용하고 자동 완성 인스턴스의 범위를 가집니다. html을 반환해야 합니다.

행동 양식

.typeahead(옵션)

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

예시

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


용법

데이터 속성을 통해

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

  1. <div 데이터 스파이 = "첨부" 데이터 오프셋 상단 = "200" > ... </div>
머리! 고정된 요소의 위치와 바로 상위 요소의 동작을 관리해야 합니다. 위치는 , 및 에 의해 affix제어 affix-top됩니다 affix-bottom. 접미사가 페이지의 정상적인 흐름에서 콘텐츠를 제거하므로 접미사가 시작될 때 잠재적으로 접힌 상위 항목을 확인하는 것을 잊지 마십시오.

자바스크립트를 통해

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

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

옵션

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

이름 유형 기본 설명
오프셋 번호 | 기능 | 물체 10 스크롤 위치를 계산할 때 화면에서 오프셋할 픽셀입니다. 단일 숫자가 제공되는 경우 오프셋은 위쪽 및 왼쪽 방향 모두에 적용됩니다. 단일 방향 또는 여러 개의 고유한 오프셋을 수신하려면 object 를 제공하면 offset: { x: 10 }됩니다. 오프셋을 동적으로 제공해야 하는 경우 함수를 사용합니다(일부 반응형 디자인에 유용).