개요

각각 혹은 컴파일된

플러그인은 개별적으로 포함될 수 있습니다. (부트스트랩의 각각의 *.js 파일을 이용), 아니면 한번에 모두 포함할 수도 있습니다. (bootstrap.js 을 사용하거나 최소화된 bootstrap.min.js 을 사용)

컴파일된 자바스크립트를 사용하는 것

bootstrap.js 와 bootstrap.min.js 모두 하나의 파일에 모든 플러그인을 포함하고 있습니다. 하나만 포함하면 됩니다.

플러그인 의존성(Plugin dependencies)

몇몇 플러그인과 CSS 콤포넌트는 다른 플러그인에 의존합니다. 만약 개별적으로 플러그인을 포함하려 한다면, 문서에서 다른 플러그인에 의존하는 것이 있는지 확인해야 합니다. 또한 모든 플러그인은 jQuery 에 의존함을 기억하세요. (jQuery 는 반드시 플러그인 파일 전에 포함되어야 합니다) Consult our bower.json to see which versions of jQuery are supported.

Data 속성(Data attributes)

모든 부트스트랩 플러그인은 자바스크립트 한줄 없이 마크업 API 를 통해 사용할 수 있습니다. 이건 부트스트랩의 최고급 API 이며 플러그인을 사용할 때 첫번째 고려사항이 되어야 합니다.

그렇긴 하지만, 어떤 상황에서는 이 기능성을 끄는 것이 바람직할 수도 있습니다. 그러므로, 우리는 문서상에 data-api 로 된 네임스페이스의 모든 이벤트를 해제하는 방법으로 data 속성 API 를 끌 수 있는 기능을 제공합니다. 이것은 다음과 같습니다: 

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

아니면, 특정 플러그인을 대상으로 하려면, 다음과 같이 data-api 네임스페이스와 함께 플러그인 이름의 네임스페이스 을 포함합니다: 

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

Data 속성을 통해서 요소당 하나의 플러그인만

같은 요소에 다수의 플러그인으로부터 data 속성을 사용하지 마세요. 예를 들면, 버튼은 툴팁과 모달 모두 가질 수 없습니다. 이것을 하려면, 둘러싸는 요소를 사용하세요.

자바스크립트 API(Programmatic API)

우리는 또한 당신이 순전히 자바스크립트 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').

Default settings

You can change the default settings for a plugin by modifying the plugin's Constructor.DEFAULTS object:

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

충돌 방지(No conflict)

때때로 다른 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
})

버전 숫자

부트스트랩 jQuery 플러그의 각 버전은 플러그인 constructor 의 VERSION 속성을 통해 제어될 수 있습니다. 예를 들면, 툴팁 플러그인은 다음과 같습니다. 

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

자바스크립트가 비활성화되었을때 특별한 대비책은 없습니다.

부트스트랩 플러그인은 자바스크립트가 비활성화되었을때를 특별히 대비하지 않습니다. 만약 당신이 이 경우의 사용자 경험을 살피려면, 사용자에게 <noscript> 를 사용하거나 당신만의 대비책을 추가하세요.

서드파티 라이브러리

부트스트랩은 공식적으로 Prototype 이나 jQuery UI 같은 서드파티 자바스크립트 라이브러리를 지원하지 않습니다. .noConflict 와 네임스페이스 이벤트에도 불구하고, 고칠 필요가 있는 호환성 문제가 일어날 수 있습니다.

전환(Transitions) transition.js

전환이란(About transitions)

간단한 전환 효과를 위해 다른 JS 파일과 함께 transition.js 를 포함하세요. 만약 합쳐졌거나 최소화된 bootstrap.js 을 사용하고 있다면, 거기에 이미 있기 때문에 이것을 포함할 필요가 없습니다.

안에 무엇이 있나요 (What's inside)

Transition.js 은 CSS 전환 에뮬레이터만큼 좋은 transitionEnd 이벤트를 위한 기본 헬퍼입니다. 그것은 다른 플러그인이 CSS 전환을 지원하는지 확인합니다. 그리고 전환중인지 확인하는 데도 사용됩니다.

모달(Modals) modal.js

모달은 날씬하지만, 신축성이 있고, 최소한의 기능성과 스마트함을 갖춘 대화창이다.

중복하는 모달은 지원하지 않습니다.

다른 모달이 보이는 동안에 모달은 열리지 않습니다. 동시에 하나보다 많은 모달을 보이는 것은 맞춤 코드가 필요합니다.

모달 마크업 장소

다른 콤포넌트가 모달의 모습이나 기능에 영향을 끼치지 않도록 항상 모달의 HTML 코드를 문서 상단에 위치하도록 하세요.

모바일 기기 제약

모바일 기기에서 모달을 사용하는 것에 제약이 있습니다. 자세한 것은 브라우저 지원 문서를 보세요

HTML5 가 시멘틱을 정의하는 방법에 따르면, autofocus HTML 속성은 부트스트랩 모달에는 효과가 없습니다. 같은 효과를 이루려면, 약간의 맞춤 자바스크립트를 사용하세요. 

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

예제

정적 예제(Static example)

상단과 본문, 하단의 액션들로 모달을 만듭니다.

Modal title

One fine body…

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</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 -->

실시간 데모(Live demo)

아래의 버튼을 클릭함으로써 자바스크립트로 모달을 실행합니다. 그것은 페이지 상단에서부터 내려오면서 서서히 보여질 것입니다. 

<!-- 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" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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 에 role="dialog" 를 넣고, 모달 제목을 알리기 위해 aria-labelledby="myModalLabel" 속성을, 모달의 DOM 요소를 건너뛰는 것을 보조 공학에게 전달하기 위해 aria-hidden="true" 을 넣으세요.

추가적으로, 당신은 .modal 의 aria-describedby 에 모달 다이얼로그의 설명을 넣어도 됩니다.

유튜브 비디오를 임베드하기

모달에 유튜브 비디오를 임베드하는 것은 부트스트랩에는 없는 추가적인 자바스크립트가 필요합니다. 자세한 정보는 도움이 될만한 스택오버플로우 질문을 보세요

크기 옵션

모달은 2개의 선택할 수 있는 크기를 가지고 있고, .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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <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 bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

애니메이션 제거

모달이 화면에서 페이드되는 것보다 간단하게 나타나기 위해, 모달 마크업에서 .fade 클래스를 제거하세요. 

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

그리드 시스템을 사용하는 것

모달에서 부트스트랩 그리드 시스템의 이점을 가지기 위해, .modal-body 내에 .container-fluid.container-fluid within the .modal-body and then use the normal grid system classes within this container.-->

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <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>
        <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 로) 을 사용하세요. relatedTarget 에 자세한 것은 모달 이벤트 문서를 보세요.

...more buttons... 
<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" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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)
})

사용법

모달 플러그인은 요구에 따라 data 속성이나 자바스크립트를 통해 숨겨진 콘텐츠를 토글합니다. 또한 기본 스크롤링 행동을 오버라이드 하기 위해 <body> 에 .modal-open 를 추가하고, 모달의 바깥에 클릭하였을때, 보이는 모달을 끄기 위한 클릭 영역을 제공하기 위해 .modal-backdrop 를 생성합니다.

data 속성으로(Via data attributes)

자바스크립트 없이 모달을 활성화합니다. 버튼같은, 콘트롤러 태그에 data-toggle="modal" 을 추가하고, data-target="#foo" 나 href="#foo" 와 같이 토글할 특정한 모달을 정해주면 됩니다. 

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

자바스크립트로

한 줄의 자바스크립트로 myModal 의 id 를 가진 모달을 불러옵니다: 

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

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-backdrop="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

옵션명 유형 기본 설명
backdrop boolean or the string 'static' true 모달 배경을 포함합니다. 그렇지 않으면, 클릭 시 모달을 닫지 않는 배경을 위해 static 를 명시하세요.
keyboard boolean true Esc 키가 눌렸을 때 모달을 닫습니다.
show boolean true 초기화할 때 모달을 보여줍니다.
remote path false

이 옵션은 v3.3.0 이후로 폐기예정으로 되었으며 v4 에서는 제거될 것입니다. 우리는 대신 클라이언트측 템플릿이나 data 바인드 프레임워크를 사용하거나, jQuery.load 을 호출하는 것을 추천합니다.

만약 원격 URL 이 제공된다면, 내용은 jQuery 의 load 를 통해 불러와 모달 요소에 삽입됩니다. 만약 data 속성 API 를 사용한다면, URL 을 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')

이벤트

부트스트랩의 모달 클래스는 모달의 기능적인 부분을 후킹하기 위한 약간의 이벤트들을 제공합니다.

모든 모달 이벤트는 모달 자신에서 발생됩니다. (다시말해서 <div class="modal"> 에서)

이벤트 설명
show.bs.modal 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 발생합니다. 만약 클릭에 의한 것이라면, 클릭된 요소는 이벤트의 relatedTarget 속성으로 가능합니다.
shown.bs.modal 이 이벤트는 모달이 사용자에게 보여졌을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 만약 클릭에 의한 것이라면, 클릭된 요소는 이벤트의 relatedTarget 속성으로 가능합니다.
hide.bs.modal 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다.
hidden.bs.modal 이 이벤트는 모달이 가려지는게 끝났을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다).
loaded.bs.modal 이 이벤트는 remote 옵션을 사용하는 콘텐츠를 가진 모달이 로드되었을때 발생됩니다. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

드롭다운(Dropdowns) dropdown.js

간단한 플러그인으로 네비게이션 바, 탭형 네비게이션, 알약형 네비게이션을 포함하여 거의 모든 것에 드롭다운 메뉴를 추가하세요.

네비게이션 바(navbar) 안에

알약형 안에

data 속성이나 자바스크립트를 통해서, 드롭다운 플러그인은 부모 목록 항목에 .open 클래스의 토글링으로 숨겨진 콘텐츠(드롭다운 메뉴)를 토글합니다.

모바일 기기에서, 열린 드롭다운은 메뉴 바깥에 탭했을때 드롭다운 메뉴를 닫기 위한 탭영역으로서 .dropdown-backdrop 을 추가합니다 (적절한 iOS 지원을 위해 요구). 이것은 다른 드롭 다운 메뉴에 열려있는 드롭 다운 메뉴에서 스위칭 모바일에 별도의 탭을 필요로한다는 것을 의미합니다.

주의: data-toggle="dropdown" 속성은 어플리케이션 레벨에서 드롭다운 메뉴를 닫는것을 위해 의지합니다. 그것은 사용하기에 항상 좋은 생각입니다.

data 속성으로(Via data attributes)

드롭다운을 토글할 링크나 버튼에 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" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

URL 을 손실없이 유지하려면, href="#" 대신 data-target 속성을 사용하세요. 

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

자바스크립트로

자바스크립트로 드롭다운을 호출합니다: 

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

data-toggle="dropdown" 은 여전히 필요합니다.

어쨌든 당신은 자바스크립트나 data-api 를 통해 당신의 드롭다운을 호출해야합니다. data-toggle="dropdown" 는 드롭다운의 트리거 요소에 존재하는 것이 항상 필요합니다.

없음

$().dropdown('toggle')

주어진 네비게이션 바나 탭형 네비게이션에서 드롭다운을 토글합니다.

All dropdown events are fired at the .dropdown-menu's parent element.

All dropdown events have a relatedTarget property, whose value is the toggling anchor element.

이벤트 유형 설명
show.bs.dropdown 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 실행됩니다.
shown.bs.dropdown 이 이벤트는 드롭다운 메뉴가 사용자에게 보여지면 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다).
hide.bs.dropdown 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다.
hidden.bs.dropdown 이 이벤트는 드롭다운 메뉴가 사용자로부터 가려지면 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

스크롤스파이(ScrollSpy) scrollspy.js

네비게이션 바에서 예제

스크롤스파이 플러그인은 스크롤 위치에 기반하여 자동으로 네비게이션 대상을 갱신하기 위함입니다. 아래의 네비게이션 바 영역을 스크롤 하고 active 클래스의 변화를 살펴보세요. 드롭다운 서브 항목도 또한 강조 될 것입니다.

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

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.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

사용법

부트스트랩 nav 가 필요합니다

스크롤스파이는 활성화 링크의 적절한 하일라이팅을 위해 현재 부트스트랩 nav 콤포넌트 의 사용이 필요합니다.

존재하는 ID 목표가 필요합니다

네비게이션 바 링크는 반드시 존재하는 id 목표를 가지고 있어야 합니다. 예를 들면, a <a href="#home">home</a> 은 반드시 <div id="home"></div> 과 같이 DOM 내 무언가와 일치해야합니다.

:visible 이 아닌 목표 요소는 무시됩니다

jQuery 에 따른 :visible 이 아닌 목표 요소는 무시될 것이고, 그들에 해당하는 nav 항목은 절대 하이라이트 되지 않을 것입니다.

Relative 위치잡기가 필요합니다

구현 방법은 중요하지 않습니다. 스크롤스파이는 당신이이 스파이하고자 하는 요소에 position: relative; 의 사용 필요합니다. 많은 경우에 이것은 <body> 입니다.

Data 속성으로

쉽게 상단 네비게이션 바에 스크롤스파이를 추가하려면, 당신이 연결할 요소에 data-spy="scroll" 를 추가하세요. (거의 대부분은 <body> 일 것입니다) 그런다음 data-target 속성에 부트스트랩의 .nav 콤포넌트의 상위요소의 ID 나 클래스를 추가하세요. 

body {
  position: relative;
}
<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

자바스크립트로

After adding position: relative; in your CSS, 자바스크립트를 통해 스크롤스파이를 호출합니다:

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

메소드

.scrollspy('refresh')

DOM 에서 스크롤스파이와 연관된 요소를 추가하거나 제거할 때, 당신은 다음과 같이 refresh 메소드를 호출할 필요가 있습니다: 

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

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-offset="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

옵션명 유형 기본 설명
offset number 10 스크롤의 위치를 계산할 때 보정 픽셀값.

Events

이벤트 유형 설명
activate.bs.scrollspy 이 이벤트는 스크롤스파이에 의해 새로운 항목이 활성화 될 때마다 실행됩니다. 
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

토글가능한 탭 tab.js

예제

각 탭의 콘텐츠로 전환되는 기능성을 가진 탭을 추가하세요. 드롭다운 메뉴에서도 가능합니다.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.

탭 네비게이션을 확장하세요

이 플러그인은 탭할수 있는 영역을 추가하기 위해 탭 네비게이션 콤포넌트 를 확장합니다.

사용법

자바스크립트로 탭할 수 있는 탭을 만듭니다. (각 탭은 각각 활성화 되어야 합니다): 

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

당신은 각각의 탭을 여러가지 방법으로 활성화할 수 있습니다: 

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

마크업

당신은 자바스트립트 없이 data-toggle="tab" 나 data-toggle="pill" 을 명시하여 탭이나 알약형 네비게이션을 활성화할 수 있습니다. ul 에 ul 와 nav-tabs 를 추가하는 것으로 부트스트랩 탭 스타일을 적용할 수 있습니다. 

<div role="tabpanel">
  <!-- 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>

페이드 효과

탭을 페이드인하게 하려면, 각 .tab-pane 에 .fade 를 추가하세요. 첫번째 탭팬은 초기 콘텐츠에 적절히 페이드하기 위해 반드시 .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 중 하나라도 있어야 합니다. 

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <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>
<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>
<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

이벤트

새로운 탭이 보여질 때, 이벤트는 다음의 순서로 발생합니다.

  1. hide.bs.tab (현재 활성화 탭에서)
  2. show.bs.tab (보여지게된 탭에서 )
  3. hidden.bs.tab (이전 활성화 탭에서, hide.bs.tab 이벤트와 동일)
  4. shown.bs.tab (새롭게 활성화된 탭에서, show.bs.tab 이벤트와 동일)

만약 이미 활성화된 탭이 없다면, hide.bs.tab 와 hidden.bs.tab 는 발생하지 않을 것입니다.

이벤트 유형 설명
show.bs.tab 이 이벤트는 탭이 보여지기 전에 실행됩니다. 활성화탭과 이전탭(있었다면)을 event.target and event.relatedTarget 으로 각각 사용하세요.
shown.bs.tab 이 이벤트는 탭이 보여지고 난 후 실행됩니다. 활성화탭과 이전탭(있었다면)을 event.target and event.relatedTarget 으로 각각 사용하세요
hide.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
})

툴팁 tooltip.js

툴팁은 Jason Frame 이 만든 jQuery.tipsy 이라는 훌륭한 플러그인에서 영감을 받아, 이미지에 의존하지 않고, 애니메이션에 CSS3 를 사용하고, title 속성을 사용하는 부분이 업데이트된 버전입니다.

0 길이의 제목의 툴팁은 절대 보여지지 않습니다.

예제

툴팁을 보려면 아래의 링크에 마우스를 올려보세요:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

정적 툴팁

4 가지 옵션이 가능합니다: 위, 오른쪽, 아래, 왼쪽 정렬

4가지 방향 

<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>

Opt-in 기능성

성능 이유로, 툴팁과 팝오버 data-api 들은 opt-in 입니다. 이 의미는 당신은 그들을 스스로 초기화 해야한다는 것입니다.

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

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

버튼 그룹과 입력 그룹 내 툴팁은 특수한 설정이 필요합니다.

.btn-group 나 .input-group 안에 있는 요소에 툴팁을 사용할 때, 당신은 부작용(요소가 넓어진다거나 둥근모서리를 잃어버리는)을 피하기 위해 container: 'body' 옵션(아래)을 명시해야 합니다.

숨겨진 요소의 툴팁을 보이는 것을 시도하지 마세요

목표 요소가 display: none; 일때 $(...).tooltip('show') 를 호출하는 것은 팝오버가 부정확하게 위치하도록 합니다.

비활성화된 요소에서의 툴팁 사용은 요소를 감싸는 것이 필요합니다.

disabled 나 .disabled 요소에서 툴팁을 추가하려면, 요소를 <div> 안에 넣고, 거기에 툴팁을 대신 적용해야 합니다.

사용법

툴팁 플러그인은 주문에 의해 콘텐츠와 마크업을 생성합니다. 그리고 기본적으로 트리거 요소 다음에 놓여집니다.

자바스크립트로 툴팁 실행합니다. 

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

마크업

툴팁을 위해 필요한 마크업은 오직 툴팁을 가지고 싶은 요소에 data 속성과 title 입니다. 만들어진 툴팁의 마크업이 간단하긴 하지만, 그것은 위치가 필요합니다. (기본적으로, 플러그인에 의해 top 으로 설정됨)

다중라인 링크

가끔씩 당신은 다중라인으로 감싸진 하이퍼링크에 툴팁을 추가하길 원합니다. 툴팁 플러그인의 기본 동작은 중앙에 놓는 것입니다. 이것을 피한 당신의 앵커를 위해 white-space: nowrap; 를 추가하세요. 

<!-- 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>

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-animation="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

이름 유형 기본값 설명
animation boolean true 툴팁에 페이드 전환을 적용합니다.
container string | false false

특정 요소에 툴팁을 붙힙니다. 예: container: 'body'. 이 옵션은 특히 작동하는 요소 근처 문서흐름에서 팝오버를 위치하는데 유용합니다. - 팝오버가 윈도우가 리사이즈 되는 동안 작동하는 요소로부터 멀리 떠다니는 것을 막아줍니다.

delay number | object 0

툴팁이 보여지거나 사라지는데 지연시간을 갖습니다. (ms) - trigger 가 manual 인 경우는 제외합니다.

만일 보여지거나 사라지는데 지연시간이 다르다면 각각 지연시간을 지정할 수 있습니다.

객체 구조는: delay: { "show": 500, "hide": 100 }

html boolean false 툴팁에 HTML 을 삽입합니다. 만약 false 이면, DOM 안에 내용이 삽입되기 전에 jQuery 의 text 메소드가 사용될 것입니다. XSS 공격이 걱정된다면 false 로 사용하세요.
placement string | function 'top'

툴팁의 위치를 정하는 방법입니다 - top | bottom | left | right | auto. "auto" 는, 툴팁에게 동적으로 방향을 정해줍니다. 예를 들어, 값이 "auto left" 이면, 툴팁은 가능하면 왼쪽으로 보여질 것이고, 그렇지 않으면 오른쪽으로 보여질 것입니다.

When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
selector string false 만약 셀렉터가 제공된다면, 툴팁 객체는 특정 타겟으로 위임될 것입니다.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

툴팁을 생성할 때 사용하는 기본 HTML.

툴팁의 title 은 .tooltip-title 으로 삽입될 것입니다.

.tooltip-arrow 는 툴팁의 화살표가 될 것입니다.

가장 바깥쪽의 둘러쌓는 요소는 .tooltip 클래스를 가져야 합니다.

title string | function ''

title 속성이 없다면 기본값을 사용됩니다.

이 함수가 주어진다면, 그것은 툴팁에 부착되어진 요소에 설정된 this 참조와 함께 호출될 것입니다.

trigger string 'hover focus' 툴팁이 보여지는 이벤트 - click | hover | focus | manual. 당신은 공백을 구분자로 하여 여러 이벤트를 전달할 수 있습니다.
viewport string | object { selector: 'body', padding: 0 }

요소의 경계내의 툴팁을 유지하세요. 예: viewport: '#viewport' 나 { "selector": "#viewport", "padding": 0 }

각각의 툴팁을 위한 data 속성

각각의 툴팁을 위한 옵션은 위에 설명된 data 속성을 요소에 명시하여 대체할 수 있습니다.

메소드

$().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')

요소의 툴팁을 숨기고 제거합니다. (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

이벤트

이벤트 유형 설명
show.bs.tooltip 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 실행됩니다.
shown.bs.tooltip 이 이벤트는 툴팁이 사용자에게 보여진 후 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다).
hide.bs.tooltip 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다.
hidden.bs.tooltip 이 이벤트는 툴팁이 사용자로부터 가려진 후 실행됩니다.(CSS 전환이 완료되기를 기다릴 것입니다). 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

팝오버 popover.js

어떤 요소에 부가적인 정보를 위해 iPad 의 그것같은 작은 콘텐츠 오버레이를 추가합니다.

제목과 콘텐츠의 길이가 0 인 팝오버는 절대 보여지지 않습니다.

플러그인 의존성

팝오버는 부트스트랩의 툴팁 플러그인 가 반드시 포함되어야 합니다.

Opt-in 기능성

성능 이유로, 툴팁과 팝오버 data-api 들은 opt-in 입니다. 이 의미는 당신은 그들을 스스로 초기화 해야한다는 것입니다.

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

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

버튼 그룹과 입력 그룹 내 팝오버는 특수한 설정이 필요합니다.

.btn-group 나 .input-group 안에 있는 요소에 팝오버를 사용할 때, 당신은 부작용(요소가 넓어진다거나 둥근모서리를 잃어버리는)을 피하기 위해 container: 'body' 옵션(아래)을 명시해야 합니다.

숨겨진 요소의 팝오버를 보이는 것을 시도하지 마세요

목표 요소가 display: none; 일때 $(...).popover('show') 를 호출하는 것은 팝오버가 부정확하게 위치하도록 합니다.

비활성화된 요소에서의 팝오버 사용은 요소를 감싸는 것이 필요합니다.

disabled 나 .disabled 요소에 팝오버를 추가하려면, 요소를 하나의 <div> 안에 놓으세요.

다중라인 링크

가끔씩 당신은 다중라인으로 감싸진 하이퍼링크에 팝오버를 추가하길 원합니다. 팝오버 플러그인의 기본 동작은 중앙에 놓는 것입니다. 이것을 피한 당신의 앵커를 위해 white-space: nowrap; 를 추가하세요.

예제

정적 팝오버

상단, 우측, 아래, 좌측으로 정렬되는 등의 4가지 옵션이 가능합니다.

Popover top

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

Popover right

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

Popover bottom

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

Popover left

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

실시간 데모 

<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>

4가지 방향 

<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 트리거를 사용하세요.

다음클릭에 없애기를 위해 특정 마크업이 필요합니다.

적절한 크로스브라우저와 크로스플랫폼 동작을 위해, 당신은 <button> 태그가 아닌 <a> 태그를 사용해야합니다. 그리고 tabindex 속성을 포함해야 합니다.

Dismissible popover 
<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>

사용법

자바스크립트로 팝오버를 설치합니다: 

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

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-animation="" 처럼 data-에 옵션명을 덧붙히면 됩니다.

이름 유형 기본값 설명
animation boolean true 팝오버에 페이드 전환을 적용합니다.
container string | false false

특정 요소에 팝오버를 붙힙니다. 예: container: 'body'. 이 옵션은 특히 작동하는 요소 근처 문서흐름에서 팝오버를 위치하는데 유용합니다. - 팝오버가 윈도우가 리사이즈 되는 동안 작동하는 요소로부터 멀리 떠다니는 것을 막아줍니다.

content string | function ''

data-content 속성이 없다면 기본값을 사용됩니다.

이 함수가 주어진다면, 그것은 그것의 팝오버가 부착되어진 요소에 설정된 this 참조와 함께 호출될 것입니다.

delay number | object 0

팝오버가 보여지거나 사라지는데 지연시간을 갖습니다. (ms) - trigger 가 manual 인 경우는 제외합니다.

만일 보여지거나 사라지는데 지연시간이 다르다면 각각 지연시간을 지정할 수 있습니다.

객체 구조는: delay: { "show": 500, "hide": 100 }

html boolean false 팝오버에 HTML 을 삽입합니다. 만약 false 이면, DOM 안에 내용이 삽입되기 전에 jQuery 의 text 메소드가 사용될 것입니다. XSS 공격이 걱정된다면 false 로 사용하세요.
placement string | function 'right'

팝오버의 위치를 정하는 방법입니다 - top | bottom | left | right | auto.
"auto" 는, 툴팁에게 동적으로 방향을 정해줍니다. 예를 들어, 값이 "auto left" 이면, 툴팁은 가능하면 왼쪽으로 보여질 것이고, 그렇지 않으면 오른쪽으로 보여질 것입니다.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.
selector string false 만약 셀렉터가 제공된다면, 팝오버 객체는 특정 타겟으로 위임 될 것입니다. 실전에서, 이것은 추가된 팝오버를 가지고 있는 동적 HTML 콘텐츠에 사용됩니다. 이것 과 유용한 예제 를 보세요.
template string '<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 string | function ''

title 속성이 없다면 기본값을 사용됩니다.

이 함수가 주어진다면, 그것은 팝오버에 부착되어진 요소에 설정된 this 참조와 함께 호출될 것입니다.

trigger string 'click' 팝오버가 보여지는 이벤트 - click | hover | focus | manual. 당신은 스페이스를 이용해 다중 트리거를 사용할 수 있습니다.
viewport string | object { selector: 'body', padding: 0 }

요소의 경계내의 팝오버를 유지하세요. 예: viewport: '#viewport' 나 { "selector": "#viewport", "padding": 0 }

각각의 팝오버를 위한 data 속성

각각의 팝오버를 위한 옵션은 위에 설명된 data 속성을 요소에 명시하여 대체할 수 있습니다.

메소드

$().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')

요소의 팝오버를 숨기고 제거합니다. 

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

이벤트

이벤트 유형 설명
show.bs.popover 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 실행됩니다.
shown.bs.popover 이 이벤트는 팝오버가 사용자에게 보여진 후 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다).
hide.bs.popover 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다.
hidden.bs.popover 이 이벤트는 툴팁이 사용자로부터 가려진 후 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
  })

경보 메시지 alert.js

예제

이 플러그인으로 모든 경보 메시지를 없앨 수 있는 기능을 추가하세요.

.close 버튼을 사용할때, 그것은 .alert-dismissible 의 첫번째 자식이여야 하며 마크업 전에 텍스트 콘텐츠는 올 수 없습니다.

사용법

자바스크립트로 경보에 없애는 기능을 추가합니다. 경보를 닫는 것은 DOM 으로부터 그것을 제거합니다. 

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

닫힐때 당신의 경보가 애니메이션을 사용하게 하려면, 이미 적용된 .fade 와 .in 클래스를 가지고 있도록 하세요.

메소드

$().alert()

경보를 data-dismiss="alert" 속성을 가지고 있는 자손 요소의 클릭 이벤트에 반응하게끔 만드세요. (data-api 의 자동초기화를 사용할때는 필요 없습니다.)

$().alert('close')

경보를 닫습니다. 만약 .fade 와 .in 클래스들이 요소에 존재한다면, 경보는 제거되기 전에 페이드아웃 할 것입니다.

이벤트

부트스트랩의 경보 클래스는 경보 기능을 후킹하기 위한 몇가지 이벤트를 제공합니다.

이벤트 유형 설명
close.bs.alert 이 이벤트는 close 인스턴스 메소드가 호출되는 즉시 실행됩니다.
closed.bs.alert 이 이벤트는 경보가 닫힌 후 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

버튼 button.js

버튼과 더 많은 일을 합니다. 버튼 상태를 제어하거나 툴바같은 콤포넌트를 위한 버튼 그룹을 만드세요.

크로스 브라우저 호환성

파이어폭스는 페이지간 폼콘트롤 상태를 지속합니다. 이것을 위한 해결방법은 autocomplete="off" 를 사용하는 것입니다. 모질라 버그 #654072 를 보세요.

로딩

버튼에 로딩상태를 사용하려면 data-loading-text="로딩중..." 을 추가하세요.

당신이 좋아하는 어느 상태이건 사용하세요!

데모를 위해서, 우리는 data-loading-text 와 $().button('loading') 를 사용하고 있습니다만, 그건 당신이 사용할 수 있는 유일한 상태가 아닙니다. $().button(string) 부분에서 좀 더 보세요 

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  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" 이 필요합니다.

사전 토글된 버튼을 위해서, 당신은 button 에 .active 클래스와 aria-pressed="true" 속성을 추가해야 합니다. 

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

체크박스 / 라디오

각각의 스타일에서 토글링이 가능한 체크박스나 라디오 입력을 포함하는 .btn-group 에 data-toggle="buttons" 을 추가하세요.

사전선택된 옵션은 .active 가 필요합니다

사전선택된 옵션을 위해서, 당신은 입력의 label 에 .active 클래스를 추가해야합니다.

시각적인 체크 상태는 오직 클릭으로 업데이트 됩니다

만약 체크박스 버튼의 체크된 상태가 버튼에 click 이벤트 없이 (예: <input type="reset"> 를 통하거나 input 의 checked 속성을 통하거나) 업데이트가 되었다면, 당신은 입력의 label 에 .active 클래스를 토글하는 것이 필요합니다. 

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

메소드

$().button('toggle')

눌림상태를 토글합니다. 버튼은 활성화 된 것처럼 보여집니다.

$().button('reset')

버튼 상태를 되돌립니다 - 버튼문구를 원래문구로 교체합니다.

$().button(string)

버튼 상태를 data-*-text 에 정의된 문구로 교체합니다. 

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>
<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

컬랩스(Collapse) collapse.js

토글 행위를 위한 몇개의 클래스를 이용하는 신축성 있는 플러그인.

플러그인 의존성

컬랩스는 당신의 부트스트랩에 포함된 전환 플러그인 을 필요로 합니다.

예제

클래스 변경을 통해 다른 요소를 보이고 가리는 아래의 버튼을 클릭합니다:

  • .collapse 는 콘텐츠를 숨깁니다
  • .collapsing 는 전환중에 적용되어 집니다
  • .collapse.in 는 콘텐츠를 보여줍니다

당신은 href 속성이나 data-target 속성이 있는 버튼으로 링크를 사용할 수 있습니다. 두 경우 모두, data-toggle="collapse" 가 필요합니다.

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" 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>

아코디온(Accordion) 예제

패널 콤포넌트와 아코디언을 만드려면 기본 컬랩스 행위를 확장하세요.

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.
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.
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 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 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" 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" 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-body 들을 .list-group 들로 교환하는 것도 가능합니다. It's also possible to swap out .panel-bodys with .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros
Footer

펼치기/가리기 제어를 접근성있게

콘트롤 요소에 aria-expanded 를 추가하는 것을 확실히 하세요. 이 속성은 스크린리더와 비슷한 보조공학에 명확하게 컬랩스할수 있는 요소의 현재상태를 정의합니다. 만약 컬랩스할수 있는 요소가 기본적으로 닫힌다면, 그것은 aria-expanded="false" 의 값을 가집니다. 만약 당신이 컬랩스 요소를 in 클래스를 사용하여 기본적으로 열리게끔 한다면, 대신 콘트롤에 aria-expanded="true" 를 설정하세요. 플러그인은 자동적으로 이 속성을 컬랩스 요소가 열렸는지 닫혔는지에 기반하여 토글합니다.

추가적으로, 만약 당신의 콘트롤 요소가 하나의 컬랩스 요소에 타게팅중이라면 - 예를 들어 data-target 속성이 id 셀럭터에 가르키고 있는중 - 당신은 추가적인 aria-controls 속성을 콘트롤 요소에 추가할 수 있습니다. 최신 스크린 리더와 비슷한 보조 공학은 사용자들에게 컬랩스요소를 직접 탐색할 수 있게 추가적인 지름길을 제공하기 위해 이 속성을 사용합니다.

사용법

컬랩스 플러그인은 무거운 리프팅을 다루기 위한 약간의 클래스를 이용합니다.

  • .collapse 는 콘텐츠를 숨깁니다
  • .collapse.in 는 콘텐츠를 보입니다
  • .collapsing 는 전환이 시작할때 추가되어지고, 끝날때 제거됩니다.

이 클래스들은 component-animations.less 에서 찾을수 있습니다.

data 속성으로

캘랩스할 요소의 콘트롤을 자동으로 할당하기 위해 요소에 data-toggle="collapse" 와 data-target 를 추가하세요. data-target 속성은 캘럽스를 적용하기 위한 CSS 셀렉터를 받아들입니다. 컬랩스할 요소에 collapse 클래스를 추가하는 것을 확실히 하세요. 만약 당신이 기본적으로 열리게 하고 있다면, 추가적으로 in 을 추가하세요.

컬랩스 콘트롤에 그룹 관리같은 아코디언을 추가하려면, data-parent="#selector" 속성을 추가하세요. 작동하는 것을 보려면 데모를 참조하세요.

자바스크립트로

수동적으로 활성화:

$('.collapse').collapse()

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-parent="" 처럼 data-에 옵션명을 덧붙히면 됩니다.

이름 유형 기본값 설명
parent selector false 만약 셀렉터가 제공된다면, 이 접을 수 있는 요소가 보여질 때 특정 부모 아래 모든 접을수 있는 요소는 닫힐 것입니다. (전통적인 아코디언 행동이랑 비슷 - 이것은 panel 에 의존합니다)
toggle boolean true 접을 수 있는 요소를 토글합니다 on invocation.

메소드

.collapse(options)

당신의 콘텐츠를 접을수 있는 요소로 활성화합니다. 추가적인 옵션 object 를 사용할 수 있습니다. 

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

.collapse('toggle')

접을수 있는 요소를 토글합니다.

.collapse('show')

접을 수 있는 요소를 보여줍니다.

.collapse('hide')

접을 수 있는 요소를 가립니다.

이벤트

부트스트랩의 컬랩스 클래스는 후킹을 제공합니다.

이벤트 유형 설명
show.bs.collapse 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 실행됩니다.
shown.bs.collapse 이 이벤트는 컬랩스 요소가 사용자에게 보여진 후 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다).
hide.bs.collapse 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다.
hidden.bs.collapse 이 이벤트는 컬랩스 요소가 사용자로부터 가려진 후 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

캐러셀(Carousel) carousel.js

아래의 슬라이드쇼는 회전목마처럼 요소들을 순환시키는 콤포넌트와 플러그인 입니다. 중첩된 carousel 은 지원되지 않습니다.

<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>

부가적인 캡션

.item 안에 .carousel-caption 요소로 손쉽게 당신의 슬라이드에 캡션을 추가하세요. 어느 추가적인 HTML 을 그냥 놓으시면 그것은 자동으로 정렬되고 형식을 갖출 것입니다. 

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

여러개의 carosel

캐러셀은 적절히 기능할 캐러셀 제어를 위해 가장 바깥쪽의 콘테이너(the .carousel)에 id 의 사용이 필요합니다. 다수의 캐러셀을 추가하거나, 캐러셀의 id 를 바꿀때, 관련있는 콘트롤을 업데이트 하는 것을 확실히 하세요.

Data 속성으로

Data 속성을 사용해서 캐러셀에서 위치를 쉽게 제어합니다. data-slide 는 prev 나 next 값을 넣을 수 있으며, 이는 슬라이드 방향을 정합니다. 다른 방법으로, data-slide-to="2" 처럼 data-slide-to 에 인덱스를 넣는 방법이 있습니다. 인덱스는 0 부터 시작합니다.

data-ride="carousel" 속성은 움직이기 시작하는 캐러셀을 표기하는데 사용되어집니다. 그것은 (불필요하고 쓸모없는) 같은 캐러셀의 자바스크립트 초기화와 조합에서 사용되어지지 않습니다.

자바스크립트로

캐러셀을 수동으로 호출합니다. 

$('.carousel').carousel()

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-interval="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

이름 유형 기본값 설명
interval number 5000 자동으로 항목이 순환될 때 지연시간. 만약 false 이면, 캐러셀은 자동으로 순환되지 않습니다.
pause string "hover" 마우스가 올라오면 캐러셀의 순환을 멈추고, 마우스가 벗어나면 캐러셀의 순환을 재개합니다.
wrap boolean true 케러셀이 계속 순환할지 멈출지
keyboard boolean true 키보드 이벤트에 반응을 해야할지 말지

.carousel(options)

object 옵션으로 캐러셀을 초기화하고 항목들을 순환시킵니다. 

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

.carousel('cycle')

캐러셀 항목을 좌에서 우로 순환시킵니다.

.carousel('pause')

항목을 순환하는 캐러셀을 멈춥니다.

.carousel(number)

특정한 프레임으로 캐러셀을 순환합니다. (0 부터 시작).

.carousel('prev')

이전 항목으로 이동합니다.

.carousel('next')

다음 항목으로 이동합니다.

부트스트랩의 캐러셀 클래스는 캐러셀의 기능성을 후킹하기 위한 2개의 이벤트가 제공됩니다.

두 이벤트 모두 다음의 추가적인 속성을 가집니다:

  • direction: 슬라이딩중인 캐러셀에서 방향("left" 이나 "right").
  • relatedTarget: 활성화된 항목으로 슬라이드중인 DOM 요소

모든 캐러셀 이벤트는 캐러셀 자신에서 발생되어집니다. (예: <div class="carousel"> 에서)

이벤트 설명
slide.bs.carousel 이 이벤트는 slide 인스턴스 메소드가 적용되는 즉시 실행됩니다.
slid.bs.carousel 이 이벤트는 캐러셀이 슬라이드 전환을 완료할 때 실행됩니다. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

예제

affix 플러그인은 position: sticky; 과 같은 효과를 위해 position: fixed; 를 토글합니다. 우측 서브메뉴는 affix 플러그인의 실시간 데모입니다.

사용법

data 속성이나 자바스크립트로 affix 플러그인을 사용하세요. 2가지 경우 모두, 당신은 affix 된 콘텐츠에 대해 위치와 너비를 위한 CSS 를 제공해야합니다.

CSS 를 통한 위치잡기

affix 플러그은 3개의 클래스들 사이를 토글합니다. 구체적인 상태는: .affix, .affix-top, .affix-bottom 입니다. 당신은 .affix 상의 position: fixed; 예외와 함께 스타일을 제공해야합니다.

여기에 affix 플러그인이 작동되는 방법이 있습니다:

  1. 플러그인은 요소가 최상단에 위치할때, .affix-top 을 추가합니다. 이 지점은 아무런 CSS 포지셔닝이 필요없습니다.
  2. 요소들을 스크롤링할때 실제적인 작동이 됩니다. .affix-top 은 .affix 으로 교체되고 position: fixed; 이 설정됩니다. (부트스트랩 CSS 에 의해 제공됩니다)
  3. 만약 하단 offset 이 정의되어있다면, .affix 은 .affix-bottom 으로 교체될 것입니다. offset 은 선택적이기때문에, 필요한만큼 적절한 CSS 설정하시면 됩니다. 이경우, 필요하면 position: absolute; 를 추가합니다. 플러그인은 요소가 어디에 위치할지 결정하기 위해 data 속성이나 자바스크립트 옵션을 사용합니다.

당신의 CSS 를 설정하려면 아래의 순서를 따라하세요.

data 속성을 통해

어느 요소에나 손쉽게 affix 행위를 추가하려면, 요소에 data-spy="affix" 를 추가하세요. 요소가 고정된 것을 토글하기 위해 offset 을 사용하세요. 

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

자바스크립트로

자바스크립트를 통해 affix 플러그인을 호출하세요: 

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

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-offset-top="200" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

이름 유형 기본값 설명
offset number | function | object 10 스크롤 위치를 계산할때 스크린으로부터 오프셋 픽셀. 하나의 숫자가 제공된다면, 오프셋은 위아래 모두 적용될 것입니다. 유일무이하게 제공하려면, 위 아래의 오프셋을 객체 offset: { top: 10 } 나 offset: { top: 10, bottom: 5 } 로 제공하면 됩니다. 오프셋을 동적으로 계산할 필요가 있을 때는 함수를 사용하세요.
target selector | node | jQuery element the window object affix 목표요소를 명시합니다.

이벤트

부트스트랩의 affix 플러그인은 기능에 후킹하기 위한 몇개의 이벤트를 제공합니다.

이벤트 설명
affix.bs.affix 이 이벤트는 요소가 affix 가 적용되기 전에 발생합니다.
affixed.bs.affix 이 이벤트는 요소가 affix 가 적용된 후에 발생합니다.
affix-top.bs.affix 이 이벤트는 요소가 affix-top 가 적용되기 전에 발생합니다.
affixed-top.bs.affix 이 이벤트는 요소가 affix-top 가 적용된 후에 발생합니다.
affix-bottom.bs.affix 이 이벤트는 요소가 affix-bottom 가 적용되기 전에 발생합니다.
affixed-bottom.bs.affix 이 이벤트는 요소가 affix-bottom 가 적용된 후에 발생합니다.