Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap / Dropdown Button

Hi Im trying to create a dropdown button using bootstrap. But it just doesnt seem to come out correctly ?

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Foo</a></li>
        <li><a href="#">Bar</a></li>
    </ul>
</div>

A jsfiddle is here http://jsfiddle.net/UrgP8/

Any ideas ?

Thanks,

like image 390
felix001 Avatar asked Dec 21 '12 23:12

felix001


People also ask

How do I add a drop down menu in Bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

How do I add a button to a dropdown list?

Example Explained Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

What is dropdown toggle in Bootstrap?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.

How set dropdown position in Bootstrap?

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add . dropdown-menu-right to a . dropdown-menu to right align the dropdown menu.


1 Answers

You are loading a hefty amount of external resources into jsfiddle by pasting what is practically the full boostrap html source into the html view.

Here is a much more bare-bones version that loads only three external files.

http://jsfiddle.net/BqKNV/65/

The base html is the same (SO wouldn't let me post without putting in code...)

<div class="dropdown btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Foo</a></li>
        <li><a href="#">Bar</a></li>
    </ul>
</div>

Note that jQuery is loaded via jsFiddle's Framework panel, bootstrap css and js are loaded via the BootstrapCDN:

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js


What happens if you save this html as a page, and run it in a browser?

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
        <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    </head>
    <body>
      <div class="dropdown btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Action
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Foo</a></li>
            <li><a href="#">Bar</a></li>
        </ul>
      </div>
    </body>
    </html>
like image 186
mg1075 Avatar answered Nov 06 '22 15:11

mg1075