Web/jQuery

Bootstrap Dropdown 사용

bboks.net 2012. 12. 7. 10:16

1. Page에 bootstrap-dropdown.js 링크 추가

http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js


2. Dropdown을 사용하기 위한 html 작성

<div id="navbar-example" class="navbar navbar-static">
    <div class="navbar-inner">
        <div class="container" style="width: auto;">
            <a class="brand" href="#">Project Name</a>
            <ul class="nav" role="navigation">
                <li class="dropdown"><a id="drop1" href="#" role="button"
                    class="dropdown-toggle" data-toggle="dropdown">Board<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li><a tabindex="-1" href="http://google.com">Action</a></li>
                        <li><a tabindex="-1" href="#anotherAction">Another
                                action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" id="drop2" role="button"
                    class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                        <li><a tabindex="-1" href="#">Action</a></li>
                        <li><a tabindex="-1" href="#">Another action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>


3. 작성한 html을 Dropdown화(?) 하기 위해 javascript 함수 호출

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



[참고] Bootstrap Dropdown