简体   繁体   中英

Twitter Bootstrap Dropdown button not working?

I am beginner to twitter bootstrap and I am trying to create a dropdown button from the samples given in http://getbootstrap.com/ but it doesnt seems to work. please help... here is my code...

        <div class="btn-group">
            <button type="Button" class="btn btn-primary dropdown-toggle">
                Login As 
                  <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="/Home/Admin">Admin</a></li>
                <li><a href="/Home/Employee">Employee</a></li>
                <li><a href="/Home/Other">Other User</a></li>
            </ul>
        </div>

here is my fiddle

您需要在按钮标记中包含此内容:

data-toggle="dropdown"

You mised data-toggle="dropdown"

<button type="Button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

Updated fiddle

hi dear see this link of jsfddle demo DEMO

add library jquery-1.11.0 bootstrap.mini.css docs.mini.css bootstrap.mini.js docs.mini.js

html

 <nav role="navigation" class="navbar navbar-inverse">
        <div class="navbar-header">
            <div class="navbar-brand">MySample Login</div>
        </div>
    </nav>
    <div class="container">
        <form class="form-group col-xs-5">
            <label>UserName</label>
            <input type="text" class="form-control" placeholder="User Name" />

            <label>Password</label>
            <input type="password" class="form-control" placeholder="Password" />
            <br />
            <div class="btn-group">
                <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    login<span class="caret"></span>
  </button>

                <ul class="dropdown-menu">
                    <li><a href="/Home/Admin">Admin</a></li>
                    <li><a href="/Home/Employee">Employee</a></li>
                    <li><a href="/Home/other">Other User</a></li>
                </ul>
            </div>
            <button class="btn btn-success" type="reset">Clear</button>
        </form>
    </div

>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM