Twitter Bootstrap下拉菜单

我正在尝试在其顶部导航栏中使用Twitter Bootstrap的下拉菜单。你可以在这里看到一个例子。 http://twitter.github.com/bootstrap/#Twitter Bootstrap下拉菜单

在我的菜单中，箭头表示它是菜单上的下拉菜单，但是当我悬停或单击它时，它不会显示我的下拉链接。我想我已经包括了所有必要的课程，我不相信Twitter需要JavaScript。

你能看到我做错了什么吗？

我的下拉

<div class='topbar' data-dropdown="dropdown"> 

    <div class='fill'> 
    <div class='container'> 
    <ul class="nav"> 

     <li><%= link_to 'Home', main_app.root_path %></li> 
      <li><%= link_to 'Outlines', main_app.outlines_path %></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle">Assessment</a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">second link </a></li> 
     <li><a href="#">third link </a></li> 
     </ul> 
     </li> 

    ..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work.

Twitter的引导

<div class="topbar" data-dropdown="dropdown"> 
    <div class="topbar-inner"> 
    <div class="container"> 
     <h3><a href="#">Project Name</a></h3> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle">Dropdown</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Secondary link</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Another link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="pull-left" action=""> 
     <input type="text" placeholder="Search"> 
     </form> 
     <ul class="nav secondary-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle">Dropdown</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Secondary link</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Another link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div><!-- /topbar-inner --> 
</div>

来源

2012-01-29 Leahcim

+54

为什么不发表评论就投下一个问题？ – Leahcim 2012-01-29 09:22:33

您引用的示例没有下拉菜单（或它不起作用） – tihe 2013-05-02 13:44:45

它实际上需要列入Twitter的引导的dropdown.js的

http://getbootstrap.com/2.3.2/components.html

来源

2012-01-29 08:49:24 Leahcim

他们确实应该将其添加到文档 – arkanciscan 2012-02-07 02:44:24

哪里可以找到bootstrap-dropdown.js？它似乎并未包含在默认发行版 – deltanine 2012-09-14 06:09:09

@Zen下拉列表中没有任何部分表示js未包含在主发行版中。没有在下拉相关部分的地方说“* .js必须包含，因为它不是主要的bootstrap.js的一部分” – AaronLS 2012-10-18 15:51:43

<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

来源

2012-02-03 18:02:55 Andy

它也可以通过自定义您的bootstrap编译：

http://twitter.github.com/bootstrap/customize.html

所有的插件都默认包含。

来源

2012-06-20 15:27:49 baptme

我有一个类似的问题，它是我的Visual Studio项目中包含的bootstrap.js版本。我链接到这里，它工作的很好

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

来源

2014-05-14 13:05:56 mark1234

您必须在项目中包含jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

我没有找到这方面有任何文档，所以我刚刚从tutorialrepublic.com打开一个随机的代码示例 http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php

希望这可以帮助其他人。

来源

2014-10-22 13:24:26 markotikvic

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- core CSS --> 
    <link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="http://webdesign9.in/css/responsive.css" rel="stylesheet"> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <script src="js/respond.min.js"></script> 
    <![endif]-->  
</head><!--/head--> 
<body class="homepage"> 
    <header id="header"> 
     <nav class="navbar navbar-inverse" role="banner"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a> 
       </div> 
       <div class="collapse navbar-collapse navbar-right"> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="index.php">Home</a></li> 
         <li><a href="about.php">About Us</a></li> 
         <li><a href="services.php">Services</a></li> 
         <li><a href="term-condition.php">Terms &amp; Condition</a></li></li> 
         <li><a href="contact.php">Contact</a></li>       
        </ul> 
       </div> 
      </div><!--/.container--> 
     </nav><!--/nav--> 
    </header><!--/header--> 
    <script src="http://webdesign9.in/js/jquery.js"></script> 
    <script src="http://webdesign9.in/js/bootstrap.min.js"></script> 
</body> 
</html>

来源

2015-07-02 11:40:04

尽管此代码块可能会回答此问题，但最好能提供一些解释。 – 2015-07-02 12:17:21

Twitter Bootstrap下拉菜单

回答

相关问题