Twitter Bootstrap 3导航栏下拉菜单未切换

时间:2017-03-13 17:33:32

标签: javascript jquery html css twitter-bootstrap

我正在努力创建一个自定义bootstrap 3网站,但我目前仍然在这个下拉菜单上。我已尝试过使用网络CDN而不是本地文件,复制其他人的下拉代码,似乎没有任何工作。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>

 <!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700" 
rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
<!-- MDP top banner image -->
<div class="top-banner">
    <img  class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>

<!-- top bar nav -->

<nav class="navbar navbar-inverse navbar-maintop">
  <div class="container-fluid align-center">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active nav-tab"><a href="#">HOME</a></li>
        <li class="nav-tab"><a href="#">ABOUT US</a></li>
        <li class="dropdown nav-tab">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="#">PAGE 1</a></li>
                  <li><a href="#">PAGE 2</a></li>
                  <li><a href="#">PAGE 3</a></li>
            </ul>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Page 1-1</a></li>
                  <li><a href="#">Page 1-2</a></li>
                  <li><a href="#">Page 1-3</a></li>
                </ul>
        </li>
        <!--<li class="nav-tab"><a href="#">SUSPENSION & LIFT COMPONENTS</a>
</li> -->
        <li class="nav-tab"><a href="#">PAGE 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>

</body>
</html>

0 个答案:

没有答案