Bootstrap导航栏打破

我刚刚开始学习bootstrap，我正在关注“Bootstrap图书的喜悦”中的一个教程我有一个响应式导航栏的源代码，出于某种原因（我确实写了代码，检查它一遍又一遍）当你点击移动模式下的按钮时，没有任何反应。我想知道在这个旧代码（2014-15）不起作用的bootstrap中有什么改变？Bootstrap导航栏打破

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Welcome</title> 
 
    <!-- Latest compiled and minified Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <!-- Custom stylesheet positiond below Bootstrap to alow customization --> 
 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
 
    <!-- Ensures proper rendering and touch zooming --> 
 
    <meta name="viewport" content="width=device.width, initial-scale=1"> 
 
    <meta http-equiv="author" content="Michael Barley" /> 
 
</head> 
 

 
<body> 
 
    <!-- Makes sure user has JavaScript turned on --> 
 
    <noscript>Please enable JavaScript in your browser</noscript> 
 
    <!-- Fixed navigation bar --> 
 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="colapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <!-- Displays three little icons --> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">example</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
     <!-- Navigation Pages --> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#Specifying">Specifying</a> 
 
      </li> 
 
      <li><a href="#MarketSectors">Market Sectors</a> 
 
      </li> 
 
      <li><a href="#EtradingEcomerce">E-trading/E-commerce</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <footer>&copy2016</footer> 
 
    </div> 
 
    <!-- Jquery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> 
 
    </script> 
 
    <!-- Latest compiled and minified Bootstrap JavaScript --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
 
</body> 
 

 
</html>

来源

2016-05-26 Michael Barley

取代你有错别字：见

<button type="button" class="navbar-toggle" data-toggle="colapse" data-target=".navbar-collapse">

colapse应该collapse和可能collapsed类应增加以及。

工作实例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<noscript>Please enable JavaScript in your browser</noscript> 
 

 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" 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" href="#">Bridgman IBC</a> 
 

 
    </div> 
 

 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#Specifying">Specifying</a> 
 
     </li> 
 
     <li><a href="#MarketSectors">Market Sectors</a> 
 
     </li> 
 
     <li><a href="#EtradingEcomerce">E-trading/E-commerce</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <footer>&copy;2016</footer> 
 
</div>

来源

2016-05-26 13:48:50 vanburen

非常感谢。 –

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

在这条线，你应该删除超过“>”开头，SRC是标签脚本的属性，所以你必须把它钻石括号内等这个。有了上面的代码，jquery库不会被导入。

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

来源

2016-05-26 13:41:33

谢谢，但是，仍然有相同的问题 –

您导入bootstrap.js与link rel="stylesheet"元素，<script src=

来源

2016-05-26 13:48:01 Limetics

脚本标记语法是错误的。

第一个脚本：

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

第二个脚本：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

您已经使用，用来样式表（CSS）链接到HTML链接标记。链接有'href'，脚本标签有'src'。

来源

2016-05-26 13:51:28

Bootstrap导航栏打破

回答

相关问题