Bootstrap Dropdown

Description

With the Dropdown JavaScript plugin, you can create dropdown menus on any element in Bootstrap. Innavbar、navs (tabs and pills)full support for creating dropdown menus is provided.

What is required when using this plugin?

You must reference the jquery.js and bootstrap-dropdown.js files. Both files are located in the twitter-bootstrap-v2/docs/assets/js folder. You can then call the dropdown menu via JavaScript. The example below demonstrates how to do this.

Example

Example

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <a class="brand" href="../index.html">example</a>
                <li class="active"><a href="../index.html">Home</a></li>
                <li><a href="../index.html">Blog</a></li>
                <li><a href="../index.html">About</a></li>
                <li><a href="../index.html">Contact</a></li>
                <li class="dropdown" id="accountmenu">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="../index.html">Tutorials<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="../index.html">PHP</a></li>
                        <li><a href="../index.html">MySQL</a></li>
                        <li class="divider"></li>
                        <li><a href="../index.html">JavaScript</a></li>
                        <li><a href="../index.html">HTML5</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

View example online

In the above example, it demonstrates how to create, via the JavaScript plugin, on thenavbara dropdown menu is created.

You can also on thenavs (tabs and pills)apply the Dropdown JavaScript plugin. The example below demonstrates how to do this.

Example

Example

<ul class="nav nav-pills">
    <li class="dropdown all-camera-dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="../index.html">
            Tutorials
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li data-filter-camera-type="all"><a data-toggle="tab" href="../index.html">HTML5</a></li>
            <li data-filter-camera-type="Alpha"><a data-toggle="tab" href="../index.html">PHP</a></li>
            <li data-filter-camera-type="Zed"><a data-toggle="tab" href="../index.html">MySQL</a></li>
            <li data-filter-camera-type="Bravo"><a data-toggle="tab" href="../index.html">JavaScript</a></li>

        </ul>
    </li></ul>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>

View example online

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

Other extensions