1. Trang chủ
  2. Câu hỏi và trả lời
  3. Trình đơn thả xuống Twitter Bootstrap

Trình đơn thả xuống Twitter Bootstrap

2012-01-29 76 views
41

Tôi đang cố gắng sử dụng trình đơn thả xuống của Twitter Bootstrap trong thanh điều hướng trên cùng của nó. Bạn có thể thấy một ví dụ làm việc ở đây. http://twitter.github.com/bootstrap/#Trình đơn thả xuống Twitter Bootstrap

Trong tôi, mũi tên chỉ ra rằng đó là danh sách thả xuống hiển thị trên menu nhưng khi tôi di chuột hoặc nhấp vào nó, nó không tiết lộ các liên kết thả xuống của tôi. Tôi nghĩ rằng tôi đã bao gồm tất cả các lớp học cần thiết, và tôi không tin rằng Twitter yêu cầu javascript.

Bạn có thể thấy những gì tôi đang làm sai không?

thả xuống của tôi

<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 Bootstrap

<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>

Nguồn

2012-01-29 Leahcim

+54

lý do bỏ phiếu một câu hỏi mà không để lại nhận xét? – Leahcim

+0

ví dụ bạn tham chiếu không có menu thả xuống (hoặc nó không hoạt động) – tihe

Trả lời

48

Nó thực sự đòi hỏi bao gồm của dropdown.js Twitter Bootstrap của

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

Nguồn

2012-01-29 08:49:24 Leahcim

+5

Chúng thực sự phải thêm tài liệu đó vào tài liệu – arkanciscan

+7

Tôi có thể tìm bootstrap-dropdown.js ở đâu? nó dường như không được bao gồm trong phân phối mặc định – deltanine

+5

@Zen không có phần nào trong danh sách thả xuống nói rằng js không được bao gồm trong phân phối chính. Không có nơi nào trong phần thả xuống liên quan đến nó nói bất cứ điều gì như "* .js phải được bao gồm vì nó không phải là một phần của bootstrap.js chính" – AaronLS

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

Nguồn

2012-02-03 18:02:55 Andy

0

Tôi gặp sự cố tương tự và đó là phiên bản bootstrap.js được đưa vào dự án studio trực quan của tôi. Tôi đã liên kết đến đây và nó hoạt động tuyệt vời

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

Nguồn

2014-05-14 13:05:56 mark1234

0 
<!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>

Nguồn

2015-07-02 11:40:04

+0

Trong khi khối mã này có thể trả lời câu hỏi, tốt nhất là bạn có thể cung cấp giải thích một chút về lý do tại sao nó thực hiện như vậy. –

Các vấn đề liên quan

 Các vấn đề liên quan