4.1 ?개요

모든 부트스트랩의 플러그인ㄷ르은 별도의 자바스크립트 코드 없이 마크업 API 를 통해 사용할 수 있습니다.?

data-toggel="collapse" 처럼 태그처럼 사용되는 이 부분을 마크업 API 라고 합니다. ?부트스트랩에서 자바스크립트를?

사용할 때는 마크업 API 를 사용하거나 별도의 자바스크립트 코드를 사용하여 해당 자바스크립트를 활성화해 줘야 합니다.

이렇게 자바스크립트를 활성화할 때는 가장 먼저 마크업 API 를 사용해야 하며, 마크업 API 를 사용할 수없을 경우에 한해서 별도의?

자바스크립트 코드를 사용해야 합니다.

그리고 상황에 따라서는 마크업으로 지정되 API 즉 데이터 API 의 사용을 끌 수도 있다는 것입니다. 데이터 API 를 끈느?

방업은 다음과 같습니다.

$(doucment).off('.data-api');

위와 같이 처리하면 모든 마크업 API 는 작동하지 않습니다. 하지만 특정한 플러그인만을 작동하지 않게 하기 위해서는 해당 플러그인의

이름을 포함해서 처리하면 됩니다.

아래의 ?예는 경고를 내는 마크업 API의동작을 멈출 때 사용 됩니다.

$(document).off('.alert.data-api')

부트스르랩에서 사용하는 API는 jQuery 를 사용하듯이 사용하면 됩니다. 부트스트랩에서 정의된 클래스 선택자 또는 컴포넌트들을 이용하여

jQuery 문으로 만들어서 사용하면 됩니다. 모든 API들은 개별적으로 사용할 수 있으며, 모든 API들은 서로 연결하여 사용할 수도 있습니다.

아래의 코드는 jQuery 를 배우면 가장 먼저 접하는 예제 중 하나입니다.

$('.btn.danger').button('toggle').addClass('fat')

위의 자바스크립트는 ".btn.danger(버튼 속성 danger) 를 토글(버튼을 누르고 뗀 상태) 할 경우, fat 이라는 클래스 선택자를 .btn.danger에

추가한다" 라는 의미입니다.

?모든 메소드 는 옵션 객체나 특별한 메소드를 대상으로 하는 문자열을 넣을 수도 있고, 또는 아무것(기본 동작)도 넣지 않을 수도 있습니다.

?

$('#myModal').modal() //기본 동작으로 실행

$('#myModal').modal({keyboard : false}); //키보드 없이 실행

$('#myModal').modal('show'); //바로 실행하기

웹사이트를 제작하다 보면 부트스트랩만 가지고는 원하는 효과를 전부 만들 순 없습니다. 그런데 다른 UI 프레임워크 또는 다른 자바스크립트를

추가적으로 사용하면 자바스크립트끼리 충돌하여 작동하지 않는 경우가 있습니다. 이 경우에는 .noConflict 를 추가하여 충돌을 방지해 줄?

수 있습니다.

?

var bootstrapButton =$fn.button.noConfilict() // 변수에 $fn.buttno 을 넣습니다.

$.fn.bootstrapBtn =bootstrapButton // $().boostrapBtn 은 $().button 을 대신합니다.

?

부트스트랩에서 사용되는 이벤트 처리는 일반적인 자바스크립트의 이벤트 처리와 동일합니다. 특히 jQuery 기반으로 작동하기 때문에

사용 방법이 jQuery를 사용하는 것과 같습니다. 이 후에 설명할 효과들에서 어떻게 이벤트를 처리하는지 살펴보도록 하겠습니다.

?

부트스트랩은 jQuery 이외의 다른 자바스크립 라이브러(Prototype 또는 jQuery UI 와 같은)는 공식적으로 지원하지 않습니다.?

따라서 Prototype 또는 jQuery UI는 호화성 문제 때문에 사용하지 않는 것이 좋습니다.

?

4.2 모달

모달은 이전에 팝업 윈도우를 사용했던 부분을 대체하는 가장 효율적일고 강력한 효과중 하나입니다. 특히 사진 갤러리,?

로그인 윈도우 등 웹사이트 본문에서 별도의 윈도우가 필요한 경우 모달을 적용해 주면 편리합니다.

필요한 경우 모달을 적용해 주면 편리합니다.

가장 기본적인 모달 구조는 다음과 같습니다.

modal.html

?

?

affix-java.html
affix.html

alert-event.html

alert-fade.html
alert-method.html
alert-method1.html

alert.html
button-method.html
button.html

carousel-caption.html

캐러셀 슬라이드 효과 ? ? ? ? ?carousel-custom.html

carousel-event.html

carousel-glyphicon.html

carousel-method.html

캐러셀 슬라이드 효과 ? ??carousel.html

collapse-button.html

collapse-event.html

클릭하면 펼쳐지고, 다시 클릭하면 접힙니다.?collapse-method.html

collapse.html

dropdown-event.html

dropdown-method.html

dropdown.html

modal-event.html

modal-method.html

modal.html

modal1.html

modal2.html

modal3.html

popover-event.html

popover-method.html

popover.html

scrollspy-event.html

scrollspy-method.html

scrollspy.html

scrollspy1.html

scrollspy2.html

toggletab-fade.html

toggletab-java-event.html

toggletab-java.html

toggletab.html

tooltip-event.html

tooltip-method.html

tooltip.html

tooltip1.html

?

?

?

?

?