我已经使用bootstrap编写了这段代码来使用折叠菜单。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Up and Running with Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Roux Academy Conference</a>
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
这段代码必须在调整浏览器窗口大小时折叠列表项,但它在任何浏览器(FF, Chrome或IE)中都不起作用。
没有使用正确的HTML来使导航栏响应。
我使用http://twitter.github.io/bootstrap/components.html#navs中的代码,并制作:
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Roux Academy Conference</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</div>
</div>
</nav>
只要链接了必要的JS/CSS,就可以实现期望的行为。
这里的工作代码:http://codepen.io/hwg/pen/gFLfz (FF,Chrome Only?)
或在这里:http://www.bootply.com/65033 (IE也)
你的html中有一些错误…
添加这个为折叠菜单:
<div class="nav-collapse collapse">
添加这个为折叠菜单按钮
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
Please Try this:
<head >
<title></title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<a class="brand" href="#">Roux Academy Conference</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>