우리의 Modal 플러그인은 전통적인 modal js 플러그인을 매우 슬림하게 변형한 것으로 여기 twitter에서 우리가 필요로 하는 기본적인 기능만 포함하도록 특별한 주의를 기울입니다.

다운로드

부트스트랩 모달 사용

$ ( '#my-modal' ). 모달 ( 옵션 )

옵션

이름	유형	기본	설명
배경	부울, 문자열	거짓	모달 배경 요소를 포함합니다. 배경을 "static"클릭할 때 모달이 닫히지 않게 하려면 배경을 로 설정하십시오.
건반	부울	거짓	이스케이프 키를 누르면 모달을 닫습니다.
보여 주다	부울	거짓	클래스 초기화 시 모달을 엽니다.

마크업

자바스크립트를 한 줄도 작성하지 않고도 페이지에서 모달을 쉽게 활성화할 수 있습니다. 요소에 모달 요소 ID에 해당 하는 data-controls-modal속성을 지정하기만 하면 클릭하면 모달이 실행됩니다. 모달 옵션을 추가하려면 데이터 속성으로도 포함하면 됩니다.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > 모달 시작 </a>    

알림 모달이 안팎으로 움직이게 하려면 요소에 .fade클래스를 추가하기만 하면 .modal됩니다(이 동작을 보려면 데모 참조).

행동 양식

.modal(옵션)

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

$ ( '#my-modal' ). 모달 ({
  키보드 : 사실 
})

.modal('토글')

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

$ ( '#my-modal' ). 모달 ( '토글' )

.modal('표시')

수동으로 모달을 엽니다.

$ ( '#my-modal' ). 모달 ( '표시' )

.modal('숨기기')

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

$ ( '#my-modal' ). 모달 ( '숨기기' )

.modal(참)

요소 모달 클래스 인스턴스를 반환합니다.

$ ( '#my-modal' ). 모달 ( 참 )

알림 또는 로 검색할 수 있습니다 $().data('modal').

이벤트

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

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

$ ( '#my-modal' ). 바인드 ( '숨겨진' , 함수 () {   
  // 뭔가를 ...
})

데모

모달 실행

이 플러그인은 부트스트랩 상단 표시줄 또는 탭 탐색에 드롭다운 상호 작용을 추가하기 위한 것입니다.

다운로드

bootstrap-dropdown.js 사용

$ ( '#상단바' ). 드롭다운 ()

마크업

탐색 요소에 드롭다운 기능을 빠르게 추가하려면 data-dropdown속성을 사용하세요. 모든 유효한 부트스트랩 드롭다운이 자동으로 활성화됩니다.

<ul 클래스 = "탭" > 
  <li class = "active" ><a href = "#" > 홈 </a></li>  
  <li class = "dropdown" 데이터-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > 드롭다운 </a>  
    <ul class = "드롭다운 메뉴" > 
      <li > <a href = "#"> 보조 링크 </a></li> 
      <li><a href = "#" > 여기에 다른 것이 있습니다 </a></li> 
      <li 클래스 = "분할기" ></li> 
      <li > <a href = "#"> 다른 링크 </a></li> 
    </ul>
  </li>
</ul>

알림 UI에 여러 드롭다운이 있는 경우 또는 data-dropdown와 같은 더 중요한 컨테이너 요소에 속성을 추가하는 것을 고려하십시오 ..tabs.topbar

행동 양식

$().드롭다운()

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

데모

이 플러그인은 부트스트랩 상단 표시줄에 scrollspy(자동 업데이트 탐색) 상호 작용을 추가하기 위한 것입니다.

다운로드

bootstrap-scrollspy.js 사용

$ ( '#상단바' ). 스크롤스파이 ()

마크업

탐색에 scrollspy 동작을 쉽게 추가하려면 data-scrollspy속성을 .topbar.

<div 클래스 = "topbar" 데이터-scrollspy = "scrollspy" > ... </div>   

행동 양식

$().scrollSpy()

자동은 사용자가 스크롤 위치에 따라 탐색 버튼을 활성화합니다.

$ ( '본체 > .topbar' ). 스크롤스파이 ()

알림 Topbar 앵커 태그에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어, a <a href="#home">home</a>는 dom과 같은 항목과 일치해야 합니다 <div id="home"></div>.

.scrollSpy('새로고침')

scrollspy는 성능을 위해 탐색 버튼과 섹션 좌표를 캐시합니다. 이 캐시를 업데이트해야 하는 경우(동적 콘텐츠가 있는 경우) 이 새로 고침 메서드를 호출하면 됩니다. 데이터 속성을 사용하여 scrollspy를 정의했다면 본문에서 새로 고침을 호출하기만 하면 됩니다.

$ ( '본문' ). scrollSpy ( '새로 고침' )

데모

이 페이지에서 상단 표시줄 탐색을 확인하십시오.

이 플러그인은 버튼 상태를 관리하기 위한 추가 기능을 제공합니다.

다운로드

bootstrap-buttons.js 사용

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

행동 양식

$().button('전환')

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

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

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

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

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

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

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

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

$().버튼(문자열)

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

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

데모

데모 로드 중 토글 데모

이 플러그인은 빠르고 동적인 탭과 알약 기능을 추가합니다.

다운로드

bootstrap-tabs.js 사용

$ ( '.tabs' ). 탭 ()

마크업

자바스크립트를 작성하지 않고 단순히 data-tabs또는 data-pills속성을 제공하여 탭 또는 알약 탐색을 활성화할 수 있습니다.

 <ul 클래스 = "탭" 데이터 탭 = "탭" > ... </ul>   

행동 양식

$().tabs 또는 $().pills

지정된 컨테이너에 대한 탭 및 알약 기능을 활성화합니다. 탭 링크는 문서의 ID를 참조해야 합니다.

<ul 클래스 = "탭" > 
  <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>
 
<스크립트>
  $ ( 함수 () {  
    $ ( '.tabs' ). 탭 ()
  })
</스크립트>

이벤트

이벤트	설명
변화	이 이벤트는 탭 변경 시 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭을 각각 대상으로 지정합니다.

$ ( '#.탭' ). 바인드 ( '변경' , 함수 ( e ) {   
  전자 . target // 활성화된 탭
  전자 . relatedTarget // 이전 탭
})

데모

• 집
• 프로필
• 메시지
• 설정
• 쓰러지 다
  • @지방
  • @mdo

Jason Frame이 작성한 우수한 jQuery.tipsy 플러그인을 기반으로 합니다. twipsy는 이미지에 의존하지 않고 애니메이션에 CSS3를 사용하고 타이틀 저장에 데이터 속성을 사용하는 업데이트된 버전입니다!

다운로드

bootstrap-twipsy.js 사용

$ ( '#예제' ). 트위시 ( 옵션 )

옵션

이름	유형	기본	설명
생명 있는	부울	진실	툴팁에 CSS 페이드 전환 적용
지연	숫자	0	툴팁을 표시하기 전에 지연(ms)
지연	숫자	0	툴팁을 숨기기 전 지연(ms)
대체	끈	''	툴팁 제목이 없을 때 사용할 텍스트
놓기	끈	'위에'	툴팁을 배치하는 방법 - 위 | 아래 | 왼쪽 | 오른쪽
HTML	부울	거짓	툴팁 내에서 html 콘텐츠 허용
라이브	부울	거짓	개별 이벤트 핸들러 대신 이벤트 위임 사용
오프셋	숫자	0	대상 요소에서 툴팁의 픽셀 오프셋
제목	문자열, 함수	'제목'	제목 텍스트를 검색하기 위한 속성 또는 메서드
방아쇠	끈	'호버'	툴팁이 트리거되는 방법 - hover | 초점 | 수동
주형	끈	[기본 마크업]	twipsy를 렌더링하는 데 사용되는 html 템플릿입니다.

알림 개별 twipsy 인스턴스 옵션은 데이터 속성을 사용하여 대안적으로 지정할 수 있습니다.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Some title text' > 텍스트 </a>    

행동 양식

$().twipsy(옵션)

요소 컬렉션에 twipsy 처리기를 연결합니다.

.twipsy('표시')

트윕시 요소를 표시합니다.

$ ( '#요소' ). 트위시 ( '쇼' )

.twipsy('숨기기')

요소를 숨깁니다.

$ ( '#요소' ). 트윅시 ( '숨기기' )

.twipsy(사실)

요소 twipsy 클래스 인스턴스를 반환합니다.

$ ( '#요소' ). 트위시 ( 사실 )

알림 또는 로 검색할 수 있습니다 $().data('twipsy').

데모

팝오버 플러그인은 애플리케이션에 팝오버를 추가하기 위한 간단한 인터페이스를 제공합니다. bootstrap-twipsy.js 플러그인을 확장 하므로 프로젝트에 팝오버를 포함할 때 해당 파일도 가져와야 합니다!

참고 bootstrap-popover.js 전에 bootstrap- twipsy.js 파일을 포함해야 합니다 .

다운로드

bootstrap-popover.js 사용

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

옵션

이름	유형	기본	설명
생명 있는	부울	진실	툴팁에 CSS 페이드 전환 적용
지연	숫자	0	툴팁을 표시하기 전에 지연(ms)
지연	숫자	0	툴팁을 숨기기 전 지연(ms)
대체	끈	''	툴팁 제목이 없을 때 사용할 텍스트
놓기	끈	'오른쪽'	툴팁을 배치하는 방법 - 위 | 아래 | 왼쪽 | 오른쪽
HTML	부울	거짓	툴팁 내에서 html 콘텐츠 허용
라이브	부울	거짓	개별 이벤트 핸들러 대신 이벤트 위임 사용
오프셋	숫자	0	대상 요소에서 툴팁의 픽셀 오프셋
제목	문자열, 함수	'제목'	제목 텍스트를 검색하기 위한 속성 또는 메서드
콘텐츠	문자열, 함수	'데이터 콘텐츠'	콘텐츠 텍스트를 검색하기 위한 문자열 또는 메서드입니다. 아무것도 제공되지 않으면 콘텐츠는 data-content 속성에서 제공됩니다.
방아쇠	끈	'호버'	툴팁이 트리거되는 방법 - hover | 초점 | 수동
주형	끈	[기본 마크업]	팝오버를 렌더링하는 데 사용되는 html 템플릿입니다.

알림 개별 팝오버 인스턴스 옵션은 데이터 속성을 사용하여 대안적으로 지정할 수 있습니다.

<a 데이터 배치 = "아래" href = "#" 클래스 = "btn 위험" rel = "팝오버" > 텍스트 </a>    

행동 양식

$().팝오버(옵션)

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

.popover('표시')

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

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

.popover('숨기기')

요소 팝오버를 숨깁니다.

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

데모

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

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

다운로드

bootstrap-alerts.js 사용

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

마크업

data-alert경고 메시지에 속성을 추가하기만 하면 자동으로 닫기 기능을 제공할 수 있습니다.

옵션

이름	유형	기본	설명
선택자	끈	'.닫다'	경고를 닫기 위해 대상으로 지정할 선택기입니다.

행동 양식

$().경고()

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

.alert('닫기')

경고를 닫습니다.

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

데모