부트스트랩 드롭다운 Dropdowns 사용하는 방법

부트스트랩의 장점중 하나는 기본 틀이 만들어져 있어서 갖다 쓰기만 하면 된다는 점입니다.

그중에서 드롭다운 형식의 메뉴바입니다.

자세한 내용은 http://twitter.github.com/bootstrap/javascript.html#dropdowns 를 참고하시기 바랍니다.


일단 예제를 한번 보시죠. 

어떤걸 말하는지 보시면 알 수 있을겁니다.

대략 어떤건지 아시겠지요

부트스트랩 티스토리 스킨은 위의 코드를 그대로 사용할 수 있습니다.

기본 골격은 아래와 같습니다.


부트스트랩 드롭다운 html 예제

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


부트스트랩에서는 data-toggle="dropdown"을 통해 드롭다운을 인식합니다. data-target을 통해 타켓을 인식합니다.

기본 자바스크립트 코드는 아래와 같습니다.


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

참고로 배포한 부트스트랩 3.2버젼에서는 따로 이런 코드를 작성하지 않아도 됩니다.

개    개