Step by step how to create a Dropdown with the Twitter Bootstrap

In this post we'll learn how to create a Dropdown with the Twitter Bootstrap. We'll customize the dropdown component to act as a select list and not as a menu, the default behavior of the Twitter Bootstrap Dropdown. The Twitter Bootstrap includes many widgets for you to bring to your web page with proved responsiveness and elegant design
We will need here the Twitter Bootstrap : learn  in this tutorial how to install it in just 2 minutes

In just 5 minutes we'll build a responsive webpage using a customized Dropdown Component from the Twitter Bootstrap :

The Twitter Bootstrap can be downloaded from the Bootstrap site : Bootstrap :

Create an MVC View, and make sure to load the CSS and the .js jQuery scripts in the page:

TWITTER BOOTSTRAP Dropdown 

Go to the Bootstrap and copy the Dropdown  markup : 

Then paste it inside your MVC View:

 <div class="dropdown">                    <a id="dropdown-btn" class="btn btn-default" role="button" data-toggle="dropdown" href="#">                        Select an Item <span class="caret"></span>                    </a>                    <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="dropdown-btn">                        <li><a href="#">Value #1</a></li>                        <li><a href="#">Value #2</a></li>                        <li class="divider"></li>                        <li><a href="#">Value #3</a></li>                        <li><a href="#bottom">Value #4</a></li>                    </ul>                </div>

And also add the following jQuery code to fetch the selected value:

<script>    $(function () {    $(".dropdown-menu li").click(function () {        $("#dropdown-btn").text("You selected " + $(this).text());    });    })
</script>

Save & refresh the web page, and select an item from the dropdownlist :

That's all!!  In this tutorial we've learned how to create a Dropdown with the Twitter Bootstrap. There are more components, and there will be many more in the future. This tutorial does not intends to survey all components, but give you the tools for you to continue exploring them on your own.

Happy programming.....

        By Carmel Schvartzman

כתב: כרמל שוורצמן