摺疊導航欄

我想在引導中製作摺疊導航欄。但我的代碼是不工作:(以下是我的代碼。我不能弄明白哪裏是我錯了，請幫我摺疊導航欄

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Website</title> 
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"> 
    <script type="text/javascript" src="assets/js/jquery.min.js"></script> 
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <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> 
       <a class="navbar-brand" href="#">Logo</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> About</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Services</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Blog</a></li> 
       </ul> 
     </div> 
     </div> 
    </nav> 
</body> 
</html>

來源

2016-08-13 Gunvant Sarpate

似乎很好。 [演示]（http://www.bootply.com/JDdKU26A1j）。右側，點擊手機圖標。 –

我看你不包括jQuery的在你的代碼，這就是爲什麼它不總是要記住，所有Bootstrap的JavaScript插件都需要jQuery才能使其運行（請參閱引導程序docs以查看哪些版本的jQuery兼容）

包含jQuery的正確方法就在Bootstrap的JavaScript文件之前（在頂部），爲了加快你的頁面加載速度，把你的JavaScript放在頁面內容的尾部，就在</body>標籤關閉之前

您可以列出所有jQuery版本here（僅限核心版本）。

的片段

<!-- jQuery must come first --> 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<!-- And below here is the Bootstrap JS file(s) --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

您的代碼是沒有錯誤實際上罰款。這裏是你的代碼的demo。

來源

2016-08-15 05:52:12

回答

相關問題