我正在尝试创建一个bootstrap css导航栏，它在顶部显示一个黑色导航栏，并且它是移动响应式的。而是切换导航按钮显示，没有导航栏。为什么切换导航按钮会显示？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html";
charset="utf- 8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<title>Local Web Hosting</title>
<!--Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.js" rel="stylesheet">
<link rel="stylesheet" href="style_4.css" type="text/css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!-- Meta Description. For Search Engines. For more about
<meta> tags: w3schools.com/tags/tag_meta.asp-->
<meta name="description" content="A web hosting website.">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
> </script>
<!--[endif]-->
</head>
<body>
<!--HEADER
===================================-->
<header class="site-header" role="banner">
<!--NAVBAR
===================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse
navbar-fixed-top" role="navigation">
<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" href="/">
<img src="images/logo.png" alt="Web Hosting Company"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="hosting_plans.html">HOSTING PLANS</a></li>
<li><a href="features.html">FEATURES</a></li>
<li><a href="contact_us.html">CONTACT US</a></li>
</ul><!--nav-->
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper-->
</header>
答案 0 :(得分：1)
看起来您没有访问Bootstrap依赖项：请参阅下面代码段中代码的工作示例。
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body>
<!--HEADER ===================================-->
<header class="site-header" role="banner">
<!--NAVBAR ===================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse
navbar-fixed-top" role="navigation">
<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" href="/">
<img src="images/logo.png" alt="Web Hosting Company">
</a>
</div>
<!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home.html">HOME</a>
</li>
<li><a href="about.html">ABOUT</a>
</li>
<li><a href="hosting_plans.html">HOSTING PLANS</a>
</li>
<li><a href="features.html">FEATURES</a>
</li>
<li><a href="contact_us.html">CONTACT US</a>
</li>
</ul>
<!--nav-->
</div>
<!--navbar-collapse-->
</div>
<!--container-->
</div>
<!--navbar-->
</div>
<!--navbar-wrapper-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
答案 1 :(得分：0)
Java脚本代码
$("#btn_toggle").click(function(e) {
$(this).toggleClass('on');
$(".main_nav").slideToggle("normal");
});
Css代码
.btn_toggle{position:absolute;width:30px;height:30px;right:5px;top:3px;display:none;cursor:pointer;border:none;z-index:2000;-webkit-transition:all 0.4s ease;
transition:all 0.4s ease;background:none;}
.btn_toggle span{position:absolute;background-color:#4e4751;height:5px;border-radius:2px;display:block;bottom:0;left:0;width:100%}
.btn_toggle span::before,.btn_toggle span::after{position:absolute;content:"";left:0;width:100%;height:5px;border-radius:2px;background-color:#4e4751;display:block;
transition:all 0.3s;backface-visibility:hidden;
}
.btn_toggle span::before{bottom:8px;right:0;}
.btn_toggle span::after{bottom:16px;left:0;}
.btn_toggle.on span{background-color:transparent;}
.btn_toggle.on span::before{transform: rotate(45deg) translate(-1px, 2px)!important;
}
.btn_toggle.on span::after{transform: rotate(-45deg) translate(1px, 2px)!important;
}
Html代码
<button class="btn_toggle" id="btn_toggle" title="Menu"><span></span></button>
<ul class="main_nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6 </a></li>
<li><a href="#">7</a></li>
</ul>