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下拉菜單

回答

相關問題