개별 혹은 컴파일된 결과

플러그인을 개별로 (일부 의존관계와 함께) 하나씩 포함할 수 있고, 한번에 모두 포함할 수도 있다. bootstrap.js와 bootstrap.min.js는 파일 하나에 모든 플러그인을 담고 있다.

Data 속성

자바스크립트를 한 줄도 쓰지 않고 순수하게 마크업 API로만 모든 부트스트랩 플러그인을 사용할 수 있다. 이 방법은 부트스트랩에서 자동으로 동작하며 플러그인을 사용할 때 제임 처음으로 고려할 방법이다.

그러나 이 기능을 끄고 싶을 경우가 있다. 그래서 data 속성 API를 비활성하는 기능을 제공한다. 이렇게 body에 있는 `'data-api'` 이름공간의 모든 이벤트를 해제하면 된다.

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

특정 플러그인을 지칭하려면, 이렇게 플러그인 이름과 data-api를 함께 이름공간으로 작성한다.

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

API 사용

또한 순수하게 자바스크립트 API만으로 모든 부트스트랩 플러그인을 사용할 수 있다. 모든 공개 API는 하나로 연속된 메소드이고, 자신의 적용 대상을 반환한다.

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

모든 메소드는 파라미터로 옵션 객체나 특정 메소드를 지칭하는 문자열을 받을 수 있다. 파라미터가 없다면 기본 행동으로 플러그인을 시작한다.

$("#myModal").modal()                       // 기본값으로 초기화
$("#myModal").modal({ keyboard: false })   // 키보드 없이 초기화
$("#myModal").modal('show')                // 초기화하고 즉시 show를 호출

또, 모든 플러그인은 `생성자` 속성 $.fn.popover.Constructor에 자신의 원래 생성자를 노출한다. $('[rel=popover]').data('popover') 식으로 태그로 부터 직접 특정 플러그인 인스턴스를 얻을 수 있다.

충돌 방지

부트스트랩 플러그인을 다른 UI 프레임워크와 함께 사용하는 경우가 있다. 이런 상황에서 가끔 이름공간 충돌이 일어날 수 있다. 충돌이 발생하면, 되돌리고 싶은 플러그인에 .noConflict를 호출한다.

var bootstrapButton = $.fn.button.noConflict() // $.fn.button 을 이전에 할당한 값으로 되돌린다
$.fn.bootstrapBtn = bootstrapButton            // $().bootstrapBtn 에 부트스트랩 기능을 대입한다

이벤트

부트스트랩은 플러그인의 고유 행동 대부분에 이벤트를 붙인다. 보통 이벤트 이름은 현재형과 과거분사형이다. 현재형(예, show)은 이벤트가 시작할 때 발동하고, 과거분사형(예, shown)은 행동이 마친 뒤 발동한다.

모든 현재형 이벤트는 preventDefault 기능이 있다. 이 기능은 행동이 시작하기 전에 행동의 실행을 중지한다.

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // 모달이 보이지 않게 막는다
})

전환이란

간단한 전환 효과를 원한다면, 다른 자바스크립트 파일과 함께 bootstrap-transition.js를 한번 포함하라. 컴파일된 (혹은 최소화된) bootstrap.js를 사용한다면 이미 들어있기 때문에 포함할 필요가 없다.

용도

전환 플러그인의 몇가지 사용예.

• 모달 슬라이드와 페이드인
• 탭 페이드아웃
• 경고 페이드아웃
• 회전광고판 슬라이드

사용예

모달은 단순하지만 유연한 대화 상자이다. 필요한 최소 기능을 가지며 나머지를 똑똑하게 처리한다.

정적 예제

아래 보이는 모달은 제목과 본문과 꼬리말에 행동들이 있다.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>모달 제목</h3>
  </div>
  <div class="modal-body">
    <p>한 멋진 본문…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">닫기</a>
    <a href="#" class="btn btn-primary">변경사항 저장</a>
  </div>
</div>

라이브 시연

아래 버튼을 클릭하면 자바스크립트로 모달을 켜고 끈다. 모달은 페이지 상단에서 슬라이드하고 페이드인한다.

<!-- 모달을 켜고 끄는 버튼 -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">모달 시연 시작</a>

<!-- 모달 -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">모달 제목</h3>
  </div>
  <div class="modal-body">
    <p>한 멋진 본문…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">닫기</button>
    <button class="btn btn-primary">변경사항 저장</button>
  </div>
</div>

사용 설명

data 속성으로

자바스크립트를 작성하지 않고 모달을 만든다. 버튼 같은 제어 태그에 data-toggle="modal"을 붙이고, 켜고 끌 대상 모달을 data-target="#foo" 혹은 href="#foo"로 지시한다.

<button type="button" data-toggle="modal" data-target="#myModal">모달 시작</button>

자바스크립트로

아래 자바스크립트 한 줄은 id가 myModal인 모달을 부른다.

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

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-backdrop="" 처럼 data- 뒤에 옵션 이름을 붙인다.

<a data-toggle="modal" href="remote.html" data-target="#modal">여기를 클릭</a>

메소드

.modal(options)

내용을 모달로 만든다. 선택적으로 options 객체를 받는다.

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

.modal('toggle')

직접 모달을 켜고 끈다.

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

.modal('show')

직접 모달을 연다.

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

.modal('hide')

직접 모달을 숨긴다.

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

이벤트

부트스트랩 모달 클래스는 모달 기능과 연결된 몇가지 이벤트를 가진다.

$('#myModal').on('hidden', function () {
  // 무언가를 한다…
})

사용예

이 간단한 플러그인을 사용하여 탐색막대, 탭, 알약 등 거의 모든 곳에 드롭다운 메뉴를 붙인다.

탐색막대에서

탭에서

사용 설명

data 속성으로

드롭다운을 켜고 끌 링크나 버튼에 data-toggle="dropdown"을 더한다.

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">드롭다운 작동</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

URL을 그대로 두려면 href="#" 대신 data-target 속성을 사용한다.

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    드롭다운
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

자바스크립트로

자바스크립트로 드롭다운을 부른다.

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

옵션

없음

메소드

$().dropdown('toggle')

해당 탐색막대나 탭의 메뉴를 켜고 끄는 api.

탐색막대 속 사용예

스크롤 추적 플러그인은 스크롤 위치에 따라 자동으로 탐색의 선택 대상을 변경한다. 탐색막대 아래 영역을 스크롤하며 현재 클래스 변화를 보라. 드롭다운 하위 항목도 마찬가지로 강조한다.

사용 방법

data 속성으로

화면 상단 탐색막대에 스크롤 추적 기능을 넣으려면, 추적할 대상 (대부분 body) 태그에 data-spy="scroll"를 더하고 data-target=".navbar"로 탐색막대를 선택한다. .nav 화면 구성요소에도 스크롤 추적을 사용할 수 있다.

<body data-spy="scroll" data-target=".navbar">...</body>

자바스크립트로

자바스크립트로 스크롤 추적을 부른다.

$('#navbar').scrollspy()

메소드

.scrollspy('refresh')

DOM에서 태그를 추가하거나 빼면서 스크롤 추적을 사용한다면, 이렇게 refresh 메소드를 호출해야 한다.

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

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-offset="" 처럼 data- 뒤에 옵션 이름을 붙인다.

이벤트

탭 예제

내용이 있는 판들 사이를 전환하는 빠르고 동적인 탭 기능을 더한다. 심지어 드롭다운 메뉴도 탭으로 동작한다.

사용 방법

자바스크립트로 켜고 끄는 탭을 만든다. 탭마다 따로 만들어야 한다.

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

여러 방법으로 개별 탭을 지칭할 수 있다.

$('#myTab a[href="#profile"]').tab('show'); // 이름으로 탭 선택
$('#myTab a:first').tab('show'); // 첫번째 탭 선택
$('#myTab a:last').tab('show'); // 마지막 탭 선택
$('#myTab li:eq(2) a').tab('show'); // 세번째 탭 선택 (순서는 0부터)

마크업

자바스크립트를 전혀 작성하지 않고 태그에 data-toggle="tab" 혹은 data-toggle="pill"을 명시하기만 하면 탭이나 알약 탐색이 생긴다. 탭 ul에 nav와 nav-tabs 클래스를 추가하면 부트스트랩 탭 스타일이 적용된다.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">대문</a></li>
  <li><a href="#profile" data-toggle="tab">프로필</a></li>
  <li><a href="#messages" data-toggle="tab">메시지</a></li>
  <li><a href="#settings" data-toggle="tab">설정</a></li>
</ul>

메소드

$().tab

탭 태그와 탭내용을 보여준다. 탭은 DOM의 탭내용을 지칭하는 data-target이나 href가 필요하다.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">대문</a></li>
  <li><a href="#profile">프로필</a></li>
  <li><a href="#messages">메시지</a></li>
  <li><a href="#settings">설정</a></li>
</ul>

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

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

이벤트

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // 새로 선택된 탭
  e.relatedTarget // 이젠 탭
})

사용예

제이슨 프레임이 만든 훌륭한 jQuery tipsy 플러그인에서 영감을 받았다. 그림을 의존하지 않고 CSS3로 애니메이션을 하며 data 속성을 제목으로 사용하도록 툴팁을 변경했다.

성능상 이유 때문에 툴팁과 팝오버 data api는 동의가 필요하다. 직접 이들 플러그인을 초기화해야 한다.

툴팁을 보려면 링크 위로 마우스를 올린다.

네가지 방향

input 그룹 속 툴팁

부트스트랩 input 그룹에서 툴팁과 팝오버를 사용한다면, 원하지 않는 부작용을 막기위해 (아래에서 설명) container 옵션을 사용해야 한다.

사용 방법

자바스크립트로 툴팁을 켜고 끈다.

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

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-animation="" 처럼 data- 뒤에 옵션 이름을 붙인다.

마크업

<a href="#" data-toggle="tooltip" title="첫번째 툴팁">여기에 마우스 올림</a>

메소드

$().tooltip(options)

태그들에 툴팁 처리자를 붙인다.

.tooltip('show')

태그의 툴팁을 보인다.

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

.tooltip('hide')

태그의 툴팁을 숨긴다.

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

.tooltip('toggle')

태그의 툴팁을 켜고 끈다.

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

.tooltip('destroy')

태그의 툴팁을 숨기고 파괴한다.

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

사용예

아이패드와 비슷하게, 부가 정보를 담은 모든 태그에 작은 내용을 덧붙인다. 팝오버를 보이려면 버튼 위로 마우스를 가져간다. 사용하려면 툴팁이 필요하다.

정적 팝오버

top, right, bottom, left, 네가지 정렬 옵션이 있다.

자바스크립트와 data 속성값으로 팝오버를 만들기 때문에 보여줄 마크업이 없다.

라이브 시연

네가지 방향

사용 방법

자바스크립트로 팝오버를 만드는 방법이다.

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

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-animation="" 처럼 data- 뒤에 옵션 이름을 붙인다.

Markup

성능상 이유 때문에 툴팁과 팝오버 data api는 동의가 필요하다. 사용하고 싶다면 selector 옵션을 설정하라.

메소드

$().popover(options)

태그들에 사용할 팝오버를 초기화한다.

.popover('show')

태그의 팝오버를 보인다.

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

.popover('hide')

태그의 팝오버를 숨긴다.

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

.popover('toggle')

태그의 팝오버를 켜고 끈다.

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

.popover('destroy')

태그의 팝오버를 숨기고 파괴한다.

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

경고 예제

이 플러그인은 모든 경고문에 닫기 기능을 더한다.

사용 방법

자바스크립트로 경고 닫기를 만든다.

$(".alert").alert()

마크업

닫기 버튼에 data-dismiss="alert"를 추가하기만 하면 경고에 닫기 기능이 자동으로 생긴다.

<a class="close" data-dismiss="alert" href="#">&times;</a>

메소드

$().alert()

모든 경고에 닫기 기능을 단다. 경고를 닫을 때 애니메이션 효과를 주려면 미리 .fade와 .in 클래스를 적용한다.

.alert('close')

경고를 닫는다.

$(".alert").alert('close')

이벤트

부트스트랩 경고 클래스는 경고 기능과 연결된 몇가지 이벤트를 가진다.

$('#my-alert').bind('closed', function () {
  // 무언가를 한다…
})

사용예

버튼을 가지고 더 많은 작업을 한다. 버튼 상태를 제어하거나 도구 모음 같은 화면 구성요소를 위한 버튼 그룹을 만든다.

버튼 상태

버튼의 진행 상태를 사용하려면 data-loading-text="읽는중..."을 붙인다.

<button type="button" class="btn btn-primary" data-loading-text="읽는중...">읽는 상태</button>

단일 켜고 끄기

한 버튼을 켜고 끄기하려면 data-toggle="button"을 붙인다.

<button type="button" class="btn btn-primary" data-toggle="button">단일 켜고 끄기</button>

Checkbox

btn-group을 checkbox 식으로 만들려면 data-toggle="buttons-checkbox"를 붙인다.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">왼쪽</button>
  <button type="button" class="btn btn-primary">중앙</button>
  <button type="button" class="btn btn-primary">오른쪽</button>
</div>

Radio

btn-group을 radio 식으로 만들려면 data-toggle="buttons-radio"를 붙인다.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">왼쪽</button>
  <button type="button" class="btn btn-primary">중앙</button>
  <button type="button" class="btn btn-primary">오른쪽</button>
</div>

사용 방법

자바스크립트로 버튼을 만드는 방법이다.

$('.nav-tabs').button()

마크업

Data 속성은 버튼 플러그인에 필수이다. 아래 다양한 마크업 종류를 담은 예제 코드를 살펴보라.

옵션

없음

메소드

$().button('toggle')

눌림 상태를 변경한다. 버튼의 눌린 외형을 만든다.

<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

버튼을 읽기 상태로 변경한다. 그러면 버튼을 비활성하고 읽기 문구로 바꾼다. 읽기 문구는 data 속성 data-loading-text를 사용하여 버튼 태그에 정의해야 한다.

<button type="button" class="btn" data-loading-text="무엇을 읽는중..." >...</button>

$().button('reset')

버튼 상태를 재설정한다. 원래 문구로 되돌아간다.

$().button(string)

버튼 상태를 재설정한다. data로 정의한 문구를 보여준다.

<button type="button" class="btn" data-complete-text="완료!" >...</button>
<script>
  $('.btn').button('complete')
</script>

숨김 플러그인이란

아코디언과 탐색 같은 숨김 가능한 화면 구성요소에 기본 스타일을 입히고 유연하게 지원한다.

* 전환 플러그인이 필요하다.

아코디언 예제

숨김 플러그인을 사용하여 간단한 아코디언식 위젯을 만들었다.

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        숨김 가능한 그룹 항목 #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        종래 경영관리...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        숨김 가능한 그룹 항목 #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        종래 경영관리...
      </div>
    </div>
  </div>
</div>
...

아코디언 마크업 없이 플러그인을 사용할 수도 있다. 다른 태그를 확장하고 숨기는 버튼을 만든다.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  간단한 숨김
</button>

<div id="demo" class="collapse in"> … </div>

사용 방법

data 속성으로

태그에 data-toggle="collapse"와 a data-target을 붙이기만 하면 숨김 가능한 다른 태그를 제어하게 된다. data-target 속성은 숨김을 적용할 css 선택자를 값으로 받는다. 숨김 가능한 태그에 collapse 클래스를 잊지 마라. 처음에 열려있기를 바란다면 in 클래스도 추가하라.

숨김 가능한 대상을 아코디언처럼 묶어서 관리하려면 data 속성 data-parent="#selector"를 추가한다. 어떻게 동작하는지 시연을 참고하라.

자바스크립트로

이렇게 직접 만들 수 있다.

$(".collapse").collapse()

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-parent="" 처럼 data- 뒤에 옵션 이름을 붙인다.

메소드

.collapse(options)

내용을 숨김 가능한 태그로 만든다. 선택적으로 options 객체를 받는다.

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

.collapse('toggle')

선택 가능한 태그를 켜고 끈다.

.collapse('show')

선택 가능한 태그를 보인다.

.collapse('hide')

선택 가능한 태그를 숨긴다.

이벤트

부트스트랩 숨김 클래스는 숨김 기능과 연결된 몇가지 이벤트를 가진다.

$('#myCollapsible').on('hidden', function () {
  // 무언가를 한다…
})

회전광고판 예제

아래 슬라이드쇼는 회전광고판처럼 태그를 하나씩 둘러보는 일반 플러그인과 화면 구성요소를 보여준다.

첫번째 미리보기 제목

고블랭은 유럽 석조건축과 분리시켜 생각할 수 없다. 차갑고 딱딱한 석벽에 걸은 태피스트리로 발달된 것으로서 중세의 성곽이나 사원 내부에서는 없어서는 안될 물건이었을 것이다.

두번째 미리보기 제목

고블랭은 유럽 석조건축과 분리시켜 생각할 수 없다. 차갑고 딱딱한 석벽에 걸은 태피스트리로 발달된 것으로서 중세의 성곽이나 사원 내부에서는 없어서는 안될 물건이었을 것이다.

세번째 미리보기 제목

고블랭은 유럽 석조건축과 분리시켜 생각할 수 없다. 차갑고 딱딱한 석벽에 걸은 태피스트리로 발달된 것으로서 중세의 성곽이나 사원 내부에서는 없어서는 안될 물건이었을 것이다.

‹ ›

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 회전광고판 항목 -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- 회전광고판 탐색 -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

한글 글꼴! bootstrap-ko.css와 bootstrap-ko.min.css 파일을 사용한다면 회전광고판 탐색 화살표가 이상하게 보인다. 이 경우 회전광고판 탐색 태그에 en-font-family 클래스를 더하여 원래 영어 글꼴로 바꾼다.

사용 방법

data 속성으로

data 속성을 사용하여 회전광고판 순서를 쉽게 제어할 수 있다. data-slide는 현재 순서를 기준으로 슬라이드 순서를 바꾸는 키워드 prev와 next를 값으로 받는다. 아니면 data-slide-to에 회전광고판 슬라이드 순서를 넘긴다. data-slide-to="2"와 같이 0부터 시작하는 슬라이드 순서로 건너뛴다.

자바스크립트로

이렇게 회전광고판을 직접 만든다.

$('.carousel').carousel()

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-interval="" 처럼 data- 뒤에 옵션 이름을 붙인다.

메소드

.carousel(options)

선택적인 options 객체를 가지고 회전광고판을 초기화하고 항목들을 회전하기 시작한다.

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

.carousel('cycle')

회전광고판 항목들을 왼쪽에서 오른쪽으로 회전한다.

.carousel('pause')

회전광고판 항목들 회전을 중지한다.

.carousel(number)

특정 항목으로 회전광고판을 이동한다 (배열과 비슷하게 0부터 시작).

.carousel('prev')

이전 항목으로 이동한다.

.carousel('next')

다음 항목으로 이동한다.

이벤트

부트스트랩 회전광고판 클래스는 회전광고판 기능과 연결된 두가지 이벤트를 가진다.

사용예

어떤 종류의 문자 input이라도 순식간에 멋진 자동완성을 붙이는 기본적이며 쉽게 확장가능한 플러그인.

<input type="text" data-provide="typeahead">

한글! 검색 포털에서 볼 수 있는 한글 자소단위 자동완성은 지원하지 않다.

웹브라우저 기본 메뉴가 부트스트랩 자동완성 드롭다운을 가리지 않도록 autocomplete="off"가 필요할 것이다.

사용 방법

data 속성으로

위 사용예와 같이 data 속성을 추가하여 태그에 자동완성 기능을 등록한다.

Via JavaScript

이렇게 직접 자동완성을 만들 수 있다.

$('.typeahead').typeahead()

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-source="" 처럼 data- 뒤에 옵션 이름을 붙인다.

메소드

.typeahead(options)

input에 자동완성을 초기화한다.

사용예

바로 왼쪽의 탐색이 바로 애픽스 메뉴 플러그인의 결과이다.

사용 방법

data 속성으로

애픽스 메뉴는 추적할 태그에 data-spy="affix"를 붙이기만 하면 된다. 그리고 offset으로 언제 태그 표시를 켜고 끌지 정한다.

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

자바스크립트로

자바스크립트로 애픽스 메뉴를 만들 수 있다.

$('#navbar').affix()

옵션

data 속성과 자바스크립트 모두 옵션을 지정할 수 있다. data 속성 사용시 data-offset-top="200" 처럼 data- 뒤에 옵션 이름을 붙인다.