Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 플러그인 소개

먼저 레이아웃 구성 요소 장절에서 논의된 구성 요소는 시작에 불과합니다. Bootstrap는 여러 구성 요소를 제공합니다. 12 jQuery 플러그인을 확장하여 사이트에 더 많은 상호작용을 추가할 수 있는 기능을 제공합니다. 고급 JavaScript 개발자가 아니더라도 Bootstrap의 JavaScript 플러그인을 배울 수 있습니다. Bootstrap 데이터 API를 사용하면 대부분의 플러그인이 코드 작성 없이 트리거될 수 있습니다.

Bootstrap를 참조하는 방법은 두 가지가 있습니다:

단독 참조를 사용하여 Bootstrap의 개별 *.js 일부 플러그인과 CSS 구성 요소는 다른 플러그인에 의존합니다. 플러그인을 단독으로 참조할 때는 이러한 플러그인 간의 의존 관계를 명확히 해야 합니다.
파일을 컴파일(동시에) 참조하세요.를 사용하여 bootstrap.js 또는 압축된 버전 bootstrap.min.js다음은 동시에 두 파일을 참조하지 마세요. bootstrap.js 와 bootstrap.min.js 모든 플러그인이 포함되어 있습니다.

모든 플러그인은 jQuery에 의존합니다. 따라서 플러그인 파일을 사용하기 전에 jQuery를 참조해야 합니다. 다음 페이지를 방문하세요 bower.json Bootstrap가 현재 지원하는 jQuery 버전을 확인하세요.

data 속성

data 속성 API만으로도 모든 Bootstrap 플러그인을 사용할 수 있습니다. JavaScript 코드를 작성하지 않아도 됩니다. 이는 Bootstrap에서 최상의 API로, 여러분의 최선 방법이어야 합니다.
그러나 일부 경우에 이 기능을 꺼야 할 수도 있습니다. 따라서 우리는 data 속성 API를 해제하여 이 기능을 끄는 방법을 제공했습니다. data-api 이벤트를 이름 공간에 이름 지정하고 문서에 바인딩하는 것입니다. 다음과 같이 합니다:
```
$(document).off('.data}}-api')
```
특정 플러그인을 닫으려면 data-api 이름 공간에 플러그인 이름을 추가하여 이름 공간을 설정할 수 있습니다. 예를 들어:
```
$(document).off('.alert.data-api')
```

프로그래밍 방식의 API

우리는 모든 Bootstrap 플러그인에 대한 순수 JavaScript 방식의 API를 제공합니다. 모든 공개된 API는 단일 호출 또는 체이닝 호출 방식을 지원하며, 작업을 수행하는 요소 집합을 반환합니다（주의: jQuery의 호출 형식과 일치합니다）. 예를 들어:

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

모든 메서드는 선택적 옵션 객체를 매개변수로 받을 수 있으며, 특정 메서드를 대표하는 문자열을 받을 수 있으며, 또는 매개변수 없이 호출할 수 있습니다（이 경우, 플러그인을 기본 동작으로 초기화합니다），예를 들어:

//　초기화하여 기본 동작을 설정합니다
$("#myModal").modal()　　　　
　//　초기화하여 키보드 사용을 지원하지 않습니다　　　　　　　　　　　　　　　
$("#myModal").modal({ keyboard: false })　　
//　초기화하고 즉시 show를 호출합니다
$("#myModal").modal('show')

각 플러그인은 Constructor property도 원래의 생성자를 노출합니다:$.fn.popover.Constructor如果您 want to get an example of a specific plugin, you can directly access it through the page element:

　$('[rel=popover]').data('popover').

이름 공간 충돌을 피합니다

일부 시점에서 Bootstrap 플러그인은 다른 UI 프레임워크와 함께 사용될 수 있습니다. 이 경우, 이름 공간 충돌이 발생할 수 있습니다. 이러한 상황이 발생하면, 플러그인의 .noConflict 메서드는 원래 값을 복원합니다

//　$.fn.button이 부여된 값을 반환합니다
var bootstrapButton = $.fn.button.noConflict()　
//　Bootstrap 기능을 $().bootstrapBtn에 부여합니다　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn = bootstrapButton

이벤트

Bootstrap는 대부분의 플러그인의 독특한 동작에 대해 사용자 정의 이벤트를 제공합니다. 일반적으로 이러한 이벤트는 두 가지 형식이 있습니다:

부정적 표현식：이벤트 시작 시 발생됩니다. 예를 들어 ex: show부정적 표현식 이벤트가 제공됩니다 preventDefault 기능. 이는 이벤트가 시작하기 전에 작업의 실행을 중단할 수 있게 합니다。
```
$('#myModal').on('show.bs.modal', function (e) {
//　모달의 표시를 방지합니다
　　if (!data) return e.preventDefault()　
}
```
과거 형태：이 행동이 완료된 후 트리거됩니다. 예를 들어 ex: shown。

Bootstrap 전환 효과 플러그인 Bootstrap 웹페이지 생성