How do I get collapse in Twitter Bootstrap to work here
Question
<!DOCTYPE html>
<html>
<head>
<title>HI THERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel="stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<a href = "#" class = "navbar-brand">ABC</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
BUTTON
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class="active"><a href ="#">home</a></li>
</ul>
</div>
</div>
</div>
<script src = "http//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
Here's my code for making a basic responsive collapsing Navbar using twitter bootstrap. I'm calling the button "BUTTON", and I'd like it to be visible when the screen is compressed. When I click on this button, I'd like a drop down with the "Home" link, and some others, when I add them in later. For some reason, the button isn't cascading when I compress my screen. I only see the button, but when I click on it, it doesn't expand!
PS - I am guessing this is pretty basic stuff for a lot of coders on this website, but If you'd like me to add comment entries in to the code to make clear my intent line by line, just let me know and I will be happy to do it.
2 answers
solution1
1 ACCPTED 2013-12-10 20:15:01
The link you have to jquery is not correct. You are missing the : after http.
As in, it should read:
<script src = "http://code.jquery.com/jquery-1.10.2.min.js"></script>
One important thing to check before you start working on functionality is to ensure all your css and jquery files are included properly. You can do this by opening the console in your browser, if any external resources fail to load, there will be an error regarding this.
Best of luck.
solution2
0 2013-12-10 20:04:08
Your code seems to be working fine with no issues, other than the color of the button. Take a look at this JSBin: http://jsbin.com/uyEYUMo/3/edit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.