자바스크립트

개별 또는 편집

플러그인은 개별적으로(Bootstrap의 개별 *.js파일 사용) 또는 한 번에 모두 포함( bootstrap.js또는 축소 사용 bootstrap.min.js)할 수 있습니다.

컴파일된 JavaScript 사용

둘 다 bootstrap.js및 bootstrap.min.js단일 파일에 모든 플러그인을 포함합니다. 하나만 포함하십시오.

플러그인 종속성

일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인해야 합니다. 또한 모든 플러그인은 jQuery에 의존합니다(즉 , 플러그인 파일 보다 먼저 jQuery가 포함되어야 함). 지원되는 jQuery 버전을 확인하려면 당사에 문의하십시오 .bower.json

데이터 속성

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

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

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

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

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

데이터 속성을 통해 요소당 하나의 플러그인만

동일한 요소에서 여러 플러그인의 데이터 속성을 사용하지 마십시오. 예를 들어, 버튼에는 툴팁이 있고 모달을 토글할 수 없습니다. 이를 수행하려면 래핑 요소를 사용하십시오.

프로그래밍 방식 API

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

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

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

기본 설정

Constructor.DEFAULTS플러그인의 개체 를 수정하여 플러그인의 기본 설정을 변경할 수 있습니다 .

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

충돌 없음

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

이벤트

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

3.0.0부터 모든 부트스트랩 이벤트는 네임스페이스가 지정됩니다.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

살균제

도구 설명 및 팝오버는 내장된 새니타이저를 사용하여 HTML을 허용하는 옵션을 삭제합니다.

기본값 whiteList은 다음과 같습니다.

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

이 기본값에 새 값을 추가 whiteList하려면 다음을 수행할 수 있습니다.

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

전용 라이브러리(예: DOMPurify )를 사용하는 것을 선호하기 때문에 새니타이저를 우회하려면 다음을 수행해야 합니다.

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

없는 브라우저`document.implementation.createHTMLDocument`

Internet Explorer 8과 같이 를 지원하지 않는 브라우저의 경우 document.implementation.createHTMLDocument내장된 삭제 기능이 HTML을 있는 그대로 반환합니다.

이 경우 살균을 수행 하려면 DOMPurifysanitizeFn 와 같은 외부 라이브러리를 지정하여 사용 하십시오 .

버전 번호

각 부트스트랩의 jQuery 플러그인 버전은 VERSION플러그인 생성자의 속성을 통해 액세스할 수 있습니다. 예를 들어 도구 설명 플러그인의 경우:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

JavaScript가 비활성화된 경우 특별한 대체 없음

Bootstrap의 플러그인은 JavaScript가 비활성화되어 있을 때 특별히 정상적으로 대체되지 않습니다. 이 경우 사용자 경험에 관심이 있는 경우 를 사용하여 사용자 <noscript>에게 상황(및 JavaScript를 다시 활성화하는 방법)을 설명하고 고유한 사용자 정의 대체를 추가하십시오.

타사 라이브러리

Bootstrap은 Prototype 또는 jQuery UI와 같은 타사 JavaScript 라이브러리를 공식적으로 지원하지 않습니다 . 네임스페이스 이벤트 에도 불구 .noConflict하고 직접 수정해야 하는 호환성 문제가 있을 수 있습니다.

전환 정보

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

안에 뭐가 들어있어

transitionEndTransition.js는 이벤트 및 CSS 전환 에뮬레이터에 대한 기본 도우미입니다 . CSS 전환 지원을 확인하고 정지 전환을 포착하기 위해 다른 플러그인에서 사용됩니다.

전환 비활성화

전환은 다음 JavaScript 스니펫을 사용하여 전역적으로 비활성화할 수 있습니다. 이 스니펫은 로드된 후에 transition.js(또는 bootstrap.js경우 bootstrap.min.js에 따라) 로드되어야 합니다.

$.support.transition = false

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

다중 개방형 모달이 지원되지 않음

다른 모달이 아직 표시되어 있는 동안에는 모달을 열지 않도록 하세요. 한 번에 둘 이상의 모달을 표시하려면 사용자 정의 코드가 필요합니다.

HTML5가 의미 체계를 정의하는 방식으로 인해 autofocusHTML 속성은 부트스트랩 모달에 영향을 주지 않습니다. 동일한 효과를 얻으려면 일부 사용자 정의 JavaScript를 사용하십시오.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

예

정적 예

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

라이브 데모

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

옵션 크기

모달에는 두 가지 선택적 크기가 있으며 수정자 클래스를 통해 .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

애니메이션 제거

보기에 페이드 인하지 않고 단순히 나타나는 모달의 경우 .fade모달 마크업에서 클래스를 제거합니다.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

그리드 시스템 사용

모달 내에서 부트스트랩 그리드 시스템을 활용하려면 .rows를 내포 .modal-body한 다음 일반 그리드 시스템 클래스를 사용하십시오.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

내용이 약간 다를 뿐 동일한 모달을 트리거하는 버튼이 많이 있습니까? event.relatedTarget및 HTML data-*속성 ( jQuery를 통해 가능)을 사용 하여 클릭한 버튼에 따라 모달의 내용을 변경합니다. 에 대한 자세한 내용은 Modal Events 문서를 참조하십시오 relatedTarget.

...더 많은 버튼...

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

용법

모달 플러그인은 데이터 속성 또는 JavaScript를 통해 요청 시 숨겨진 콘텐츠를 토글합니다. 또한 기본 스크롤 동작을 재정의 .modal-open하는 에 추가 하고 모달 외부를 클릭할 때 표시된 모달을 해제하기 위한 클릭 영역을 제공하도록 생성합니다.<body>.modal-backdrop

데이터 속성을 통해

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

자바스크립트를 통해

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

$('#myModal').modal(options)

옵션

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

이름	유형	기본	설명
배경	부울 또는 문자열`'static'`	진실	모달 배경 요소를 포함합니다. 또는 `static`클릭 시 모달을 닫지 않는 배경을 지정하십시오.
건반	부울	진실	이스케이프 키를 누르면 모달을 닫습니다.
보여 주다	부울	진실	초기화될 때 모달을 표시합니다.
원격	길	거짓	이 옵션은 v3.3.0부터 더 이상 사용되지 않으며 v4에서 제거되었습니다. 대신 클라이언트 측 템플릿 또는 데이터 바인딩 프레임워크를 사용하거나 jQuery.load를 직접 호출하는 것이 좋습니다. 원격 URL이 제공되면 jQuery의 메서드를 통해 콘텐츠가 한 번 로드 되고 div `load`에 주입됩니다 . `.modal-content`data-api를 사용하는 경우 `href`속성을 사용하여 원격 소스를 지정할 수도 있습니다. 이에 대한 예는 다음과 같습니다. `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

행동 양식

`.modal(options)`

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

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

수동으로 모달을 토글합니다. 모달이 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.modal또는 hidden.bs.modal이벤트가 발생하기 전에) 호출자에게 반환합니다.

$('#myModal').modal('toggle')

`.modal('show')`

수동으로 모달을 엽니다. 모달이 실제로 표시 되기 전에(즉, shown.bs.modal이벤트가 발생하기 전에) 호출자에게 반환합니다.

$('#myModal').modal('show')

`.modal('hide')`

수동으로 모달을 숨깁니다. 모달이 실제로 숨겨 지기 전에(즉, hidden.bs.modal이벤트가 발생하기 전에) 호출자에게 반환합니다.

$('#myModal').modal('hide')

`.modal('handleUpdate')`

스크롤바가 나타날 경우에 대비하여 모달의 위치를 재조정하여 모달이 왼쪽으로 점프하도록 합니다.

열려 있는 동안 모달의 높이가 변경될 때만 필요합니다.

$('#myModal').modal('handleUpdate')

이벤트

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

모든 모달 이벤트는 모달 자체에서 발생합니다(즉, <div class="modal">).

이벤트 유형	설명
show.bs.modal	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 . 클릭으로 인한 경우 클릭된 요소는 `relatedTarget`이벤트의 속성으로 사용할 수 있습니다.
표시됨.bs.modal	이 이벤트는 모달이 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 기다림). 클릭으로 인한 경우 클릭된 요소는 `relatedTarget`이벤트의 속성으로 사용할 수 있습니다.
hide.bs.modal	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.modal	이 이벤트는 모달이 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
load.bs.modal	이 이벤트는 모달이 `remote`옵션을 사용하여 콘텐츠를 로드할 때 시작됩니다.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

예

탐색 모음, 탭 및 알약을 포함하여 이 간단한 플러그인으로 거의 모든 항목에 드롭다운 메뉴를 추가합니다.

알약 내

용법

데이터 속성 또는 JavaScript를 통해 드롭다운 플러그인 .open은 상위 목록 항목의 클래스를 토글하여 숨겨진 콘텐츠(드롭다운 메뉴)를 토글합니다.

모바일 장치에서 드롭다운을 열면 .dropdown-backdrop메뉴 외부를 탭할 때 드롭다운 메뉴를 닫기 위한 탭 영역이 추가되며, 이는 적절한 iOS 지원을 위한 요구 사항입니다. 즉, 열린 드롭다운 메뉴에서 다른 드롭다운 메뉴로 전환하려면 모바일에서 추가 탭이 필요합니다.

참고: data-toggle="dropdown"속성은 응용 프로그램 수준에서 드롭다운 메뉴를 닫는 데 사용되므로 항상 사용하는 것이 좋습니다.

데이터 속성을 통해

링크 또는 버튼에 추가 data-toggle="dropdown"하여 드롭다운을 전환합니다.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

링크 버튼이 있는 URL을 그대로 유지하려면 data-target대신 속성을 사용하세요 href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

자바스크립트를 통해

JavaScript를 통해 드롭다운을 호출합니다.

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`여전히 필요

JavaScript를 통해 드롭다운을 호출하든 대신 data-api를 사용하든 상관없이 data-toggle="dropdown"항상 드롭다운의 트리거 요소에 있어야 합니다.

옵션

없음

행동 양식

`$().dropdown('toggle')`

주어진 탐색 모음 또는 탭 탐색의 드롭다운 메뉴를 토글합니다.

이벤트

모든 드롭다운 이벤트는 .dropdown-menu의 상위 요소에서 시작됩니다.

모든 드롭다운 이벤트에는 relatedTarget값이 토글 앵커 요소인 속성이 있습니다.

이벤트 유형	설명
show.bs.dropdown	이 이벤트는 show instance 메소드가 호출될 때 즉시 발생합니다.
표시됨.bs.dropdown	이 이벤트는 드롭다운이 사용자에게 표시될 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
hide.bs.dropdown	이 이벤트는 hide instance 메서드가 호출되면 즉시 시작됩니다.
hidden.bs.dropdown	이 이벤트는 드롭다운이 사용자에게 숨겨지면 시작됩니다(CSS 전환이 완료될 때까지 기다림).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

탐색 모음의 예

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는 현재 활성 링크의 적절한 강조 표시를 위해 Bootstrap 탐색 구성 요소 를 사용해야 합니다.

확인 가능한 ID 대상이 필요합니다.

Navbar 링크에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어, a <a href="#home">home</a>는 DOM과 같은 항목과 일치해야 합니다 <div id="home"></div>.

타겟 이 아닌 `:visible`요소는 무시됨

:visiblejQuery에 따르지 않는 대상 요소는 무시되고 해당 탐색 항목은 강조 표시되지 않습니다.

상대 위치 지정 필요

구현 방법에 관계없이 scrollspy position: relative;는 감시 중인 요소에서 을 사용해야 합니다. 대부분의 경우 이것은 <body>. 가 아닌 다른 요소를 스크롤 스파이할 때는 <body>반드시 height세트 를 가지고 overflow-y: scroll;적용해야 합니다.

데이터 속성을 통해

scrollspy 동작을 상단 표시줄 탐색에 쉽게 추가하려면 data-spy="scroll"감시하려는 요소에 추가합니다(대부분의 경우 <body>). 그런 다음 data-targetBootstrap 구성 요소의 상위 요소에 대한 ID 또는 클래스가 있는 속성을 추가합니다 .nav.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

자바스크립트를 통해

CSS를 추가한 후 position: relative;JavaScript를 통해 scrollspy를 호출합니다.

$('body').scrollspy({ target: '#navbar-example' })

행동 양식

`.scrollspy('refresh')`

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

옵션

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

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

이벤트

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

예시 탭

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

생 데님은 아마도 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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

탭 탐색 확장

이 플러그인은 탭 탐색 구성 요소 를 확장하여 탭 영역을 추가합니다.

용법

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

마크업

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

페이드 효과

탭을 페이드 인하려면 .fade각각 에 추가하십시오 .tab-pane. .in첫 번째 탭 창에서도 초기 콘텐츠를 볼 수 있어야 합니다 .

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

행동 양식

`$().tab`

탭 요소와 콘텐츠 컨테이너를 활성화합니다. 탭 에는 DOM 의 data-target또는 대상 컨테이너 노드가 있어야 합니다. href위의 예에서 탭은 속성 이 있는 <a>s입니다 .data-toggle="tab"

`.tab('show')`

지정된 탭을 선택하고 관련 콘텐츠를 표시합니다. 이전에 선택한 다른 탭은 선택 취소되고 관련 콘텐츠가 숨겨집니다. 탭 창이 실제로 표시 되기 전(즉, shown.bs.tab이벤트가 발생하기 전) 호출자에게 돌아갑니다.

$('#someTab').tab('show')

이벤트

새 탭을 표시할 때 이벤트는 다음 순서로 실행됩니다.

hide.bs.tab(현재 활성 탭에서)
show.bs.tab(표시할 탭에서)
hidden.bs.tabhide.bs.tab(이전 활성 탭에서 이벤트 와 동일한 탭 )
shown.bs.tabshow.bs.tab(새로 활성화된 방금 표시된 탭에서 이벤트 와 동일한 탭 )

활성화된 탭이 없으면 hide.bs.tab및 hidden.bs.tab이벤트가 실행되지 않습니다.

이벤트 유형	설명
show.bs.tab	이 이벤트는 탭 표시 시 발생하지만 새 탭이 표시되기 전에 발생합니다. `event.target`및 를 사용 `event.relatedTarget`하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
표시됨.bs.tab	이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. `event.target`및 를 사용 `event.relatedTarget`하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
숨김.bs.tab	이 이벤트는 새 탭이 표시될 때 발생합니다(따라서 이전 활성 탭이 숨겨짐). `event.target`및 를 사용 `event.relatedTarget`하여 각각 현재 활성 탭과 곧 활성화될 새 탭을 대상으로 지정합니다.
hidden.bs.tab	이 이벤트는 새 탭이 표시된 후에 시작됩니다(따라서 이전 활성 탭이 숨겨짐). `event.target`및 를 사용 `event.relatedTarget`하여 각각 이전 활성 탭과 새 활성 탭을 대상으로 지정합니다.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

길이가 0인 제목이 있는 도구 설명은 표시되지 않습니다.

예

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

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

네 방향

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

옵트인 기능

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

페이지의 모든 툴팁을 초기화하는 한 가지 방법은 data-toggle속성별로 선택하는 것입니다.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

용법

툴팁 플러그인은 요청 시 콘텐츠와 마크업을 생성하고 기본적으로 트리거 요소 뒤에 툴팁을 배치합니다.

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

$('#example').tooltip(options)

마크업

툴팁에 필요한 마크업은 data속성 일 뿐이며 툴팁 title을 갖고자 하는 HTML 요소에 있습니다. top툴팁의 생성된 마크업은 위치가 필요하지만(기본적으로 플러그인에 의해 설정됨) 다소 간단합니다 .

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

옵션

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

이름	유형	기본	설명
생기	부울	진실	툴팁에 CSS 페이드 전환 적용
컨테이너	문자열 \| 거짓	거짓	특정 요소에 도구 설명을 추가합니다. 예: `container: 'body'`. 이 옵션은 문서의 흐름에서 트리거 요소 근처에 도구 설명을 배치할 수 있다는 점에서 특히 유용합니다. 이렇게 하면 창 크기 조정 중에 도구 설명이 트리거 요소에서 멀어지는 것을 방지할 수 있습니다.
지연	번호 \| 물체	0	툴팁 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다. 개체 구조는 다음과 같습니다.`delay: { "show": 500, "hide": 100 }`
HTML	부울	거짓	툴팁에 HTML을 삽입합니다. false인 경우 jQuery의 `text`메서드를 사용하여 DOM에 콘텐츠를 삽입합니다. XSS 공격이 걱정된다면 텍스트를 사용하세요.
놓기	문자열 \| 기능	'맨 위'	툴팁을 배치하는 방법 - 상단 \| 바닥 \| 왼쪽 \| 오른쪽 \| 자동. "auto"가 지정되면 툴팁의 방향이 동적으로 변경됩니다. 예를 들어 배치가 "자동 왼쪽"인 경우 툴팁은 가능한 경우 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시됩니다. 배치를 결정하는 데 함수가 사용되면 도구 설명 DOM 노드를 첫 번째 인수로 사용하고 트리거 요소 DOM 노드를 두 번째 인수로 사용하여 호출됩니다. 컨텍스트 는 `this`도구 설명 인스턴스로 설정됩니다.
선택자	끈	거짓	선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다. 실제로 이것은 동적으로 추가된 DOM 요소( `jQuery.on`지원)에 툴팁을 적용하는 데에도 사용됩니다. 이것 과 유익한 예를 참조하십시오 .
주형	끈	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	도구 설명을 만들 때 사용할 기본 HTML입니다. 툴팁 `title`이 에 주입됩니다 `.tooltip-inner`. `.tooltip-arrow`툴팁의 화살표가 됩니다. 가장 바깥쪽 래퍼 요소에는 클래스가 있어야 합니다 `.tooltip`.
제목	문자열 \| 기능	''	`title`속성이 없는 경우 기본 제목 값 입니다. 함수가 제공되면 `this`도구 설명이 첨부된 요소로 설정된 참조와 함께 호출됩니다.
방아쇠	끈	'포커스'	툴팁이 실행되는 방법 - 클릭 \| 호버 \| 초점 \| 수동. 여러 트리거를 전달할 수 있습니다. 공백으로 구분하십시오. `manual`다른 트리거와 결합할 수 없습니다.
뷰포트	문자열 \| 개체 \| 기능	{ 선택기: '본문', 패딩: 0 }	이 요소의 범위 내에서 도구 설명을 유지합니다. 예: `viewport: '#viewport'`또는`{ "selector": "#viewport", "padding": 0 }` 함수가 제공되면 트리거 요소 DOM 노드를 유일한 인수로 사용하여 호출됩니다. 컨텍스트 는 `this`도구 설명 인스턴스로 설정됩니다.
살균하다	부울	진실	살균을 활성화하거나 비활성화합니다. 활성화 `'template'`되면 옵션 `'content'`이 `'title'`삭제됩니다.
화이트리스트	물체	기본값	허용된 속성 및 태그가 포함된 개체
살균	널 \| 기능	없는	여기에서 자신만의 살균 기능을 제공할 수 있습니다. 이는 삭제를 수행하기 위해 전용 라이브러리를 사용하려는 경우에 유용할 수 있습니다.

행동 양식

`$().tooltip(options)`

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

`.tooltip('show')`

요소의 툴팁을 표시합니다. 툴팁이 실제로 표시 되기 전에(즉, shown.bs.tooltip이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 툴팁의 "수동" 트리거로 간주됩니다. 길이가 0인 제목이 있는 도구 설명은 표시되지 않습니다.

$('#element').tooltip('show')

`.tooltip('hide')`

요소의 툴팁을 숨깁니다. 툴팁이 실제로 숨겨 지기 전에(즉, hidden.bs.tooltip이벤트가 발생하기 전에) 호출자에게 반환됩니다. 이것은 툴팁의 "수동" 트리거로 간주됩니다.

$('#element').tooltip('hide')

`.tooltip('toggle')`

요소의 툴팁을 토글합니다. 툴팁이 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.tooltip또는 hidden.bs.tooltip이벤트가 발생하기 전에) 호출자에게 반환됩니다. 이것은 툴팁의 "수동" 트리거로 간주됩니다.

$('#element').tooltip('toggle')

`.tooltip('destroy')`

요소의 툴팁을 숨기고 파괴합니다. 위임을 사용하는 도구 설명( 옵션 을 사용 하여selector 생성됨 )은 하위 트리거 요소에서 개별적으로 제거할 수 없습니다.

$('#element').tooltip('destroy')

이벤트

이벤트 유형	설명
show.bs.tooltip	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시됨.bs.tooltip	이 이벤트는 도구 설명이 사용자에게 표시될 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
hide.bs.tooltip	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.tooltip	이 이벤트는 툴팁이 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
insert.bs.tooltip	이 이벤트는 `show.bs.tooltip`툴팁 템플릿이 DOM에 추가되었을 때 이벤트 후에 시작됩니다.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

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

제목과 내용이 모두 길이가 0인 팝오버는 표시되지 않습니다.

옵트인 기능

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

페이지의 모든 팝오버를 초기화하는 한 가지 방법은 data-toggle속성별로 선택하는 것입니다.

$(function () {
  $('[data-toggle="popover"]').popover()
})

예

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

라이브 데모

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

네 방향

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

다음 클릭 시 닫기

focus트리거를 사용 하여 사용자가 다음에 클릭할 때 팝오버를 닫습니다.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

용법

JavaScript를 통해 팝오버 활성화:

$('#example').popover(options)

옵션

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

이름	유형	기본	설명
생기	부울	진실	팝오버에 CSS 페이드 전환 적용
컨테이너	문자열 \| 거짓	거짓	특정 요소에 팝오버를 추가합니다. 예: `container: 'body'`. 이 옵션은 문서 흐름에서 팝오버를 트리거 요소 근처에 배치할 수 있다는 점에서 특히 유용합니다. 이렇게 하면 창 크기 조정 중에 팝오버가 트리거 요소에서 떠다니는 것을 방지할 수 있습니다.
콘텐츠	문자열 \| 기능	''	`data-content`속성이 없는 경우 기본 콘텐츠 값 입니다. 함수가 주어지면 `this`팝오버가 연결된 요소로 설정된 참조로 호출됩니다.
지연	번호 \| 물체	0	팝오버 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다. 개체 구조는 다음과 같습니다.`delay: { "show": 500, "hide": 100 }`
HTML	부울	거짓	팝오버에 HTML을 삽입합니다. false인 경우 jQuery의 `text`메서드를 사용하여 DOM에 콘텐츠를 삽입합니다. XSS 공격이 걱정된다면 텍스트를 사용하세요.
놓기	문자열 \| 기능	'오른쪽'	팝오버 위치 지정 방법 - 상단 \| 바닥 \| 왼쪽 \| 오른쪽 \| 자동. "auto"가 지정되면 팝오버의 방향을 동적으로 변경합니다. 예를 들어 배치가 "자동 왼쪽"인 경우 팝오버는 가능한 경우 왼쪽에 표시되고, 그렇지 않으면 오른쪽에 표시됩니다. 위치를 결정하는 데 함수가 사용되면 첫 번째 인수로 팝오버 DOM 노드를 사용하고 두 번째 인수로 트리거 요소 DOM 노드를 사용하여 호출됩니다. 컨텍스트 는 `this`팝오버 인스턴스로 설정됩니다.
선택자	끈	거짓	선택기가 제공되면 팝오버 개체가 지정된 대상에 위임됩니다. 실제로 이것은 동적 HTML 콘텐츠에 팝오버를 추가하는 데 사용됩니다. 이것 과 유익한 예를 참조하십시오 .
주형	끈	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`	팝오버를 생성할 때 사용할 기본 HTML입니다. 팝오버 `title`는 에 주입됩니다 `.popover-title`. 팝오버 `content`는 에 주입됩니다 `.popover-content`. `.arrow`팝오버의 화살이 될 것입니다. 가장 바깥쪽 래퍼 요소에는 클래스가 있어야 합니다 `.popover`.
제목	문자열 \| 기능	''	`title`속성이 없는 경우 기본 제목 값 입니다. 함수가 주어지면 `this`팝오버가 연결된 요소로 설정된 참조로 호출됩니다.
방아쇠	끈	'딸깍 하는 소리'	팝오버가 실행되는 방법 - 클릭 \| 호버 \| 초점 \| 수동. 여러 트리거를 전달할 수 있습니다. 공백으로 구분하십시오. `manual`다른 트리거와 결합할 수 없습니다.
뷰포트	문자열 \| 개체 \| 기능	{ 선택기: '본문', 패딩: 0 }	이 요소의 범위 내에서 팝오버를 유지합니다. 예: `viewport: '#viewport'`또는`{ "selector": "#viewport", "padding": 0 }` 함수가 제공되면 트리거 요소 DOM 노드를 유일한 인수로 사용하여 호출됩니다. 컨텍스트 는 `this`팝오버 인스턴스로 설정됩니다.
살균하다	부울	진실	살균을 활성화하거나 비활성화합니다. 활성화 `'template'`되면 옵션 `'content'`이 `'title'`삭제됩니다.
화이트리스트	물체	기본값	허용된 속성 및 태그가 포함된 개체
살균	널 \| 기능	없는	여기에서 자신만의 살균 기능을 제공할 수 있습니다. 이는 삭제를 수행하기 위해 전용 라이브러리를 사용하려는 경우에 유용할 수 있습니다.

행동 양식

`$().popover(options)`

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

`.popover('show')`

요소의 팝오버를 표시합니다. 팝오버가 실제로 표시 되기 전에(즉, shown.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다. 제목과 내용이 모두 길이가 0인 팝오버는 표시되지 않습니다.

$('#element').popover('show')

`.popover('hide')`

요소의 팝오버를 숨깁니다. 팝오버가 실제로 숨겨 지기 전에(즉, hidden.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다.

$('#element').popover('hide')

`.popover('toggle')`

요소의 팝오버를 토글합니다. 팝오버가 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.popover또는 hidden.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다.

$('#element').popover('toggle')

`.popover('destroy')`

요소의 팝오버를 숨기고 파괴합니다. 위임을 사용하는 팝오버( 옵션 을 사용 하여selector 생성됨 )는 하위 트리거 요소에서 개별적으로 소멸될 수 없습니다.

$('#element').popover('destroy')

이벤트

이벤트 유형	설명
show.bs.popover	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
show.bs.popover	이 이벤트는 팝오버가 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 기다림).
hide.bs.popover	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.popover	이 이벤트는 팝오버가 사용자에게 숨겨지면 시작됩니다(CSS 전환이 완료될 때까지 기다림).
삽입.bs.popover	이 이벤트는 `show.bs.popover`팝오버 템플릿이 DOM에 추가되었을 때 이벤트 후에 시작됩니다.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

경고 예시

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

버튼을 사용할 때는 .close의 첫 번째 자식이어야 하며 .alert-dismissible마크업에서 그 앞에 텍스트 내용이 올 수 없습니다.

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

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

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

용법

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

경고를 닫을 때 애니메이션을 사용하도록 하려면 경고에 .fade및 .in클래스가 이미 적용되어 있는지 확인하십시오.

행동 양식

`$().alert()`

data-dismiss="alert"속성 이 있는 하위 요소에 대한 클릭 이벤트를 수신 대기하도록 경고를 만듭니다 . (data-api의 자동초기화 사용시 필요하지 않습니다.)

`$().alert('close')`

DOM에서 경고를 제거하여 경고를 닫습니다. .fade요소에 및 클래스가 있는 경우 .in경고가 제거되기 전에 사라집니다.

이벤트

부트스트랩의 경고 플러그인은 경고 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트 유형	설명
닫기.bs.alert	`close`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
폐쇄.bs.alert	이 이벤트는 경고가 닫힐 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

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

브라우저 간 호환성

Firefox는 페이지 로드 전반에 걸쳐 양식 제어 상태(비활성화 및 확인)를 유지합니다 . 이에 대한 해결 방법은 를 사용하는 것 autocomplete="off"입니다. Mozilla 버그 #654072 를 참조하십시오 .

상태 저장

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

이 기능은 v3.3.5부터 더 이상 사용되지 않으며 v4에서 제거되었습니다.

원하는 상태를 사용하십시오!

이 데모를 위해 및 를 사용 data-loading-text하고 $().button('loading')있지만 사용할 수 있는 유일한 상태는 아닙니다. 이에 대한 자세한 내용은 아래 $().button(string)문서 를 참조하십시오 .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

단일 토글

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

사전 토글 버튼이 필요 `.active`하고`aria-pressed="true"`

미리 토글된 버튼의 경우 .active클래스와 aria-pressed="true"속성을 button자신에 추가해야 합니다.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

체크박스 / 라디오

포함하는 확인란 또는 라디오 입력에 추가 data-toggle="buttons"하여 .btn-group해당 스타일에서 토글을 활성화합니다.

미리 선택된 옵션이 필요합니다`.active`

미리 선택된 옵션의 경우 .active클래스를 입력에 label직접 추가해야 합니다.

클릭 시에만 시각적 확인 상태가 업데이트됨

체크박스 버튼의 체크 상태가 버튼에 대한 click이벤트를 발생시키지 않고 업데이트되는 경우(예: 입력 속성 설정을 통해 <input type="reset">또는 설정을 통해 ) 입력의 클래스를 직접 checked토글해야 합니다 ..activelabel

확인란 1(사전 선택됨) 체크박스 2 체크박스 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

라디오 1(미리 선택됨) 라디오 2 라디오 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

행동 양식

`$().button('toggle')`

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

`$().button('reset')`

버튼 상태 재설정 - 텍스트를 원본 텍스트로 바꿉니다. 이 메서드는 비동기식이며 재설정이 실제로 완료되기 전에 반환됩니다.

`$().button(string)`

텍스트를 데이터 정의 텍스트 상태로 바꿉니다.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

손쉬운 토글 동작을 위해 소수의 클래스를 활용하는 유연한 플러그인입니다.

플러그인 종속성

축소하려면 부트스트랩 버전에 전환 플러그인 이 포함되어 있어야 합니다.

예시

클래스 변경을 통해 다른 요소를 표시하거나 숨기려면 아래 버튼을 클릭하십시오.

.collapse내용을 숨깁니다
.collapsing전환 중에 적용됩니다.
.collapse.in콘텐츠를 보여줍니다

속성 이 있는 링크를 사용 href하거나 속성이 있는 버튼을 사용할 수 있습니다 data-target. 두 경우 모두 data-toggle="collapse"필수입니다.

href와 연결

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

아코디언 예

기본 축소 동작을 확장하여 패널 구성 요소로 아코디언을 만듭니다.

접을 수 있는 그룹 항목 #1

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

접을 수 있는 그룹 항목 #2

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

접을 수 있는 그룹 항목 #3

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

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys를 s 로 바꾸는 것도 가능합니다 .list-group.

축소 가능한 목록 그룹

부트플라이
하나의 itmus ac facilin
두 번째 에로스

보행인

확장/축소 컨트롤에 액세스할 수 있도록 설정

aria-expanded컨트롤 요소 에 추가 해야 합니다. 이 속성은 화면 판독기 및 유사한 보조 기술에 축소 가능한 요소의 현재 상태를 명시적으로 정의합니다. 접을 수 있는 요소가 기본적으로 닫혀 있으면 값이 이어야 합니다 aria-expanded="false". in클래스 를 사용하여 기본적으로 열리도록 접을 수 있는 요소를 설정 aria-expanded="true"한 경우 대신 컨트롤에서 설정합니다. 플러그인은 접을 수 있는 요소가 열렸는지 닫혔는지 여부에 따라 이 속성을 자동으로 토글합니다.

또한 컨트롤 요소가 단일 축소 가능한 요소를 대상으로 하는 경우(예: data-target속성이 선택기를 가리키는 경우) 축소 가능한 요소를 포함 id하는 추가 aria-controls속성을 컨트롤 요소에 추가할 수 있습니다 id. 최신 화면 판독기 및 유사한 보조 기술은 이 속성을 사용하여 사용자에게 접을 수 있는 요소 자체로 직접 이동할 수 있는 추가 단축키를 제공합니다.

용법

접기 플러그인은 무거운 작업을 처리하기 위해 몇 가지 클래스를 사용합니다.

.collapse내용을 숨깁니다
.collapse.in내용을 보여줍니다
.collapsing전환이 시작될 때 추가되고 완료되면 제거됩니다.

이러한 클래스는 에서 찾을 수 있습니다 component-animations.less.

데이터 속성을 통해

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

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

자바스크립트를 통해

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

$('.collapse').collapse()

옵션

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

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

행동 양식

`.collapse(options)`

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

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

축소 가능한 요소를 표시 또는 숨김으로 전환합니다. 접을 수 있는 요소가 실제로 표시되거나 숨겨 지기 전(즉, shown.bs.collapse또는 hidden.bs.collapse이벤트가 발생하기 전) 호출자에게 반환됩니다.

`.collapse('show')`

접을 수 있는 요소를 표시합니다. 접을 수 있는 요소가 실제로 표시 되기 전(즉, shown.bs.collapse이벤트가 발생하기 전) 호출자에게 반환합니다.

`.collapse('hide')`

접을 수 있는 요소를 숨깁니다. 접을 수 있는 요소가 실제로 숨겨 지기 전에(즉, hidden.bs.collapse이벤트가 발생하기 전에) 호출자에게 반환됩니다.

이벤트

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

이벤트 유형	설명
show.bs.collapse	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시됨.bs.collapse	이 이벤트는 축소 요소가 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 대기).
hide.bs.collapse	`hide`이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.collapse	이 이벤트는 축소 요소가 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

회전 목마와 같은 요소를 순환하기 위한 슬라이드쇼 구성 요소입니다. 중첩 캐러셀은 지원되지 않습니다.

예

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

접근성 문제

캐러셀 구성요소는 일반적으로 접근성 표준을 준수하지 않습니다. 규정을 준수해야 하는 경우 콘텐츠를 표시하기 위한 다른 옵션을 고려하십시오.

Internet Explorer 8 및 9에서는 전환 애니메이션이 지원되지 않습니다.

Bootstrap은 애니메이션에 CSS3를 독점적으로 사용하지만 Internet Explorer 8 및 9는 필요한 CSS 속성을 지원하지 않습니다. 따라서 이러한 브라우저를 사용할 때 슬라이드 전환 애니메이션이 없습니다. 우리는 의도적으로 전환에 jQuery 기반 폴백을 포함하지 않기로 결정했습니다.

초기 활성 요소 필요

슬라이드 중 하나 에 .active수업을 추가해야 합니다. 그렇지 않으면 캐러셀이 표시되지 않습니다.

Glyphicon 아이콘이 필요하지 않습니다.

.glyphicon .glyphicon-chevron-left및 클래스 는 .glyphicon .glyphicon-chevron-right컨트롤에 반드시 필요한 것은 아닙니다. 부트스트랩은 일반 유니코드 대안을 .icon-prev제공 합니다..icon-next

선택적 캡션

.carousel-caption에 있는 요소 를 사용하여 슬라이드에 캡션을 쉽게 추가할 수 있습니다 .item. 그 안에 선택적 HTML을 배치하면 자동으로 정렬되고 형식이 지정됩니다.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

용법

여러 캐러셀

캐 러셀 컨트롤이 제대로 작동하려면 캐러셀 id에서 가장 바깥쪽 컨테이너( )를 사용해야 합니다 . .carousel캐러셀을 여러 개 추가하거나 캐러셀을 변경할 때 id관련 컨트롤을 업데이트해야 합니다.

데이터 속성을 통해

데이터 속성을 사용하여 캐러셀의 위치를 쉽게 제어할 수 있습니다. 현재 위치를 기준으로 슬라이드 위치를 변경하는 또는 data-slide키워드를 허용합니다 . 또는 슬라이드 위치를 다음으로 시작하는 특정 인덱스로 이동하는 캐러셀에 원시 슬라이드 인덱스를 전달하는 데 사용합니다.prevnextdata-slide-todata-slide-to="2"0 .

이 data-ride="carousel"속성은 캐러셀을 페이지 로드 시 시작되는 애니메이션으로 표시하는 데 사용됩니다. 동일한 캐러셀의 (중복적이고 불필요한) 명시적 JavaScript 초기화와 함께 사용할 수 없습니다.

자바스크립트를 통해

다음을 사용하여 수동으로 캐러셀을 호출합니다.

$('.carousel').carousel()

옵션

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

이름	유형	기본	설명
간격	숫자	5000	항목을 자동으로 순환하는 사이의 지연 시간입니다. false인 경우 캐러셀이 자동으로 순환하지 않습니다.
정지시키다	문자열 \| 없는	"호버"	로 설정 `"hover"`하면 캐러셀의 순환이 일시 중지되고 캐러셀 `mouseenter`의 순환이 다시 시작됩니다 `mouseleave`. 로 설정 `null`하면 캐러셀 위로 마우스를 가져가도 일시중지되지 않습니다.
포장하다	부울	진실	캐러셀이 계속 순환해야 하는지 아니면 정지해야 하는지 여부.
건반	부울	진실	캐러셀이 키보드 이벤트에 반응해야 하는지 여부입니다.

행동 양식

`.carousel(options)`

선택적 옵션으로 캐러셀을 초기화하고 object항목 순환을 시작합니다.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

캐러셀 항목을 왼쪽에서 오른쪽으로 순환합니다.

`.carousel('pause')`

캐러셀이 항목을 순환하는 것을 중지합니다.

`.carousel(number)`

캐러셀을 특정 프레임으로 순환합니다(0 기반, 배열과 유사).

`.carousel('prev')`

이전 항목으로 순환합니다.

`.carousel('next')`

다음 항목으로 순환합니다.

이벤트

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

두 이벤트에는 다음과 같은 추가 속성이 있습니다.

direction: 캐러셀이 미끄러지는 방향( "left"또는 "right").
relatedTarget: 활성 항목으로 슬라이드되는 DOM 요소입니다.

모든 캐러셀 이벤트는 캐러셀 자체(즉, <div class="carousel">)에서 발생합니다.

이벤트 유형	설명
Slide.bs.carousel	`slide`이 이벤트는 인스턴스 메서드가 호출 될 때 즉시 발생합니다 .
slid.bs.carousel	이 이벤트는 캐러셀이 슬라이드 전환을 완료하면 시작됩니다.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

예시

접미사 플러그인 position: fixed;은 로 찾은 효과를 에뮬레이트하여 켜고 끕니다 position: sticky;. 오른쪽의 하위 탐색은 affix 플러그인의 라이브 데모입니다.

용법

데이터 속성을 통해 또는 자체 JavaScript로 수동으로 접미사 플러그인을 사용하십시오.두 경우 모두 첨부된 콘텐츠의 위치와 너비에 대해 CSS를 제공해야 합니다.

참고: Safari 렌더링 버그 로 인해 pull 또는 push 열과 같이 상대적으로 배치된 요소에 포함된 요소에 affix 플러그인을 사용하지 마십시오 .

CSS를 통한 위치 지정

접미사 플러그인은 각각 특정 상태를 나타내는 세 가지 클래스( .affix, .affix-top및 .affix-bottom. position: fixed;실제 위치를 처리하려면 이 클래스에 대해 on 을 제외하고 스타일을 제공해야 합니다 .affix(이 플러그인과 별도로).

접미사 플러그인이 작동하는 방식은 다음과 같습니다.

시작하려면 플러그인이 추가됩니다..affix-top 은 요소가 최상위 위치에 있음을 나타내기 위해 추가합니다. 이 시점에서 CSS 위치 지정이 필요하지 않습니다.
부착하려는 요소를 스크롤하면 실제 부착이 트리거됩니다. 이것은 .affix교체 .affix-top및 설정 위치입니다 position: fixed;(Bootstrap의 CSS 제공).
하단 오프셋이 정의된 경우 이를 지나 스크롤하면 로 바뀌어야 .affix합니다 .affix-bottom. 오프셋은 선택 사항이므로 오프셋을 설정하려면 적절한 CSS를 설정해야 합니다. 이 경우 position: absolute;필요할 때 추가합니다. 플러그인은 데이터 속성 또는 JavaScript 옵션을 사용하여 요소를 배치할 위치를 결정합니다.

위의 단계에 따라 아래 사용 옵션 중 하나에 대해 CSS를 설정하십시오.

데이터 속성을 통해

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

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

자바스크립트를 통해

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

옵션

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

이름	유형	기본	설명
오프셋	번호 \| 기능 \| 물체	10	스크롤 위치를 계산할 때 화면에서 오프셋할 픽셀입니다. 단일 숫자가 제공되는 경우 오프셋은 위쪽 및 아래쪽 방향 모두에 적용됩니다. 고유한 하단 및 상단 오프셋을 제공하려면 객체 `offset: { top: 10 }`또는 `offset: { top: 10, bottom: 5 }`. 오프셋을 동적으로 계산해야 하는 경우 함수를 사용합니다.
표적	선택기 \| 노드 \| jQuery 요소	`window`개체 _	접미사의 대상 요소를 지정합니다.

행동 양식

`.affix(options)`

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

$('#myAffix').affix({
  offset: 15
})

`.affix('checkPosition')`

관련 요소의 치수, 위치 및 스크롤 위치를 기반으로 하여 접미사의 상태를 다시 계산합니다. , .affix, .affix-top및 .affix-bottom클래스는 새 상태에 따라 첨부된 내용에 추가되거나 제거됩니다. 이 메소드는 첨부된 컨텐츠의 정확한 위치를 보장하기 위해 첨부된 컨텐츠 또는 대상 요소의 크기가 변경될 때마다 호출되어야 합니다.

$('#myAffix').affix('checkPosition')

이벤트

부트스트랩의 접미사 플러그인은 접미사 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트 유형	설명
affix.bs.affix	이 이벤트는 요소가 부착되기 직전에 발생합니다.
affixed.bs.affix	이 이벤트는 요소가 부착된 후에 시작됩니다.
affix-top.bs.affix	이 이벤트는 요소가 맨 위에 고정되기 직전에 발생합니다.
affixed-top.bs.affix	이 이벤트는 요소가 상단에 부착된 후에 시작됩니다.
접미사-bottom.bs.affix	이 이벤트는 요소가 하단에 부착되기 직전에 발생합니다.
affixed-bottom.bs.affix	이 이벤트는 요소가 하단에 부착된 후에 시작됩니다.

개요

개별 또는 편집

컴파일된 JavaScript 사용

플러그인 종속성

데이터 속성

데이터 속성을 통해 요소당 하나의 플러그인만

프로그래밍 방식 API

기본 설정

충돌 없음

이벤트

살균제

없는 브라우저document.implementation.createHTMLDocument

버전 번호

JavaScript가 비활성화된 경우 특별한 대체 없음

타사 라이브러리

전환 transition.js

전환 정보

안에 뭐가 들어있어

전환 비활성화

모달 modal.js

다중 개방형 모달이 지원되지 않음

모달 마크업 배치

휴대기기 주의사항

예

정적 예

라이브 데모

접근 가능한 모달 만들기

YouTube 동영상 삽입

옵션 크기

애니메이션 제거

그리드 시스템 사용

트리거 버튼을 기반으로 다양한 모달 콘텐츠

용법

데이터 속성을 통해

자바스크립트를 통해

옵션

행동 양식

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

이벤트

드롭다운 dropdown.js

예

탐색 모음 내

알약 내

용법

데이터 속성을 통해

자바스크립트를 통해

data-toggle="dropdown"여전히 필요

옵션

행동 양식

$().dropdown('toggle')

이벤트

ScrollSpy scrollspy.js

탐색 모음의 예

@지방

@mdo

하나

둘

three

용법

부트스트랩 탐색 필요

확인 가능한 ID 대상이 필요합니다.

타겟 이 아닌 :visible요소는 무시됨

상대 위치 지정 필요

데이터 속성을 통해

자바스크립트를 통해

행동 양식

.scrollspy('refresh')

옵션

이벤트

전환 가능한 탭 tab.js

예시 탭

탭 탐색 확장

용법

마크업

페이드 효과

없는 브라우저`document.implementation.createHTMLDocument`

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`data-toggle="dropdown"`여전히 필요

`$().dropdown('toggle')`

타겟 이 아닌 `:visible`요소는 무시됨

`.scrollspy('refresh')`

`$().tab`

`.tab('show')`

`$().tooltip(options)`

`.tooltip('show')`

`.tooltip('hide')`

`.tooltip('toggle')`

`.tooltip('destroy')`

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('destroy')`

`$().alert()`

`$().alert('close')`