您好我是Bootstrap的新手,我正在尝试实现自适应导航。我最初使它工作但它不再有效。这是我的代码:
HTML:
<div class="row no-padding">
<div class="col-md-12">
<nav class="navbar center" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar gold"></span>
<span class="icon-bar gold"></span>
<span class="icon-bar gold"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active2"><a href="#" class="btn no-padding">Home</a></li>
<li><a href="about.html" class="btn">Location</a></li>
<li class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="accomodation.html">Accomodation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Deluxe</a></li>
<li><a href="#">Executive</a></li>
</ul>
</li>
<li><a href="facilities.html" class="btn">Facilities</a></li>
<li><a href="gallery.html" class="btn">Gallery</a></li>
<li><a href="contact.html" class="btn">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
CSS:
.nav {
background: #3d3d3d;
background-image: -webkit-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -moz-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -ms-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -o-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: linear-gradient(to bottom, #3d3d3d, #5c5c5c);
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 14px;
height:31px;
text-align:center;
text-decoration:none;
display:inline;
opacity:50%;
}
.btn {
list-style-type: none;
background: #3d3d3d;
background-image: -webkit-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -moz-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -ms-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -o-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: linear-gradient(to bottom, #3d3d3d, #5c5c5c);
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
color: #aaaa8a;
font-size: 14px;
padding: 0px;
border: solid #383838 1px;
text-decoration: none;
line-height:none;
}
.btn:hover {
background: #737373;
background-image: -webkit-linear-gradient(top, #737373, #4f4f4f);
background-image: -moz-linear-gradient(top, #737373, #4f4f4f);
background-image: -ms-linear-gradient(top, #737373, #4f4f4f);
background-image: -o-linear-gradient(top, #737373, #4f4f4f);
background-image: linear-gradient(to bottom, #737373, #4f4f4f);
text-decoration: none;
color: #aaaa8a;
}
#active{
background-color:#099bdd;
text-decoration:none;
color:#CDA500;
}
a:link {
color: #aaaa8a;
}
的Javascript / jQuery的:
<!--Nav Bar Collapse jQuery-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--Nav Bar Toggle-->
<script type="text/javascript">
$(document).ready(function () {
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active");
});
});
$('.dropdown-toggle').dropdown()
</script>
对不起,我是新手,任何帮助将不胜感激!谢谢。