I've got Bootstrap v 2.3.2 and i wanted to make a responsive navigation bar. I already built my navegation bar and when it's resize to a smaller size and i clicked on the "button" that is formed when it gets smaller it doesn't show anything! Here is my code:
`<!DOCTYPE html>
<html lang="en">
<head>
<title>Prueba de Responsive Site</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><i class="icon-tasks"></i></button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Package</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" type="button">Matutina
<i class="caret">
</i></a>
<ul class="dropdown-menu"><li><a href="#"> </a>Prueba1</li> <li><a href="#"> </a>Prueba2</li> <li><a href="#"></a>Prueba3</li> <li><a href="#"></a>Prueba4</li> </ul>
<li ><a href="#">About</a></li>
<li ><a href="#">Now</a></li>
</ul>
</div></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/bootstrap.js"></script>
</body>
</html>`
I'm so awesome of what BootStrap can do but it's killing me! damn! anyone who could help with this i'll be more than glad! XD
Here is how it looks:
Well guys i couldn't find any solution at the entire web so i decided to download a bootstrap template and compared my code with it so i found out that i needed to add some files at the head and at the bottom of my page:
<head>
<title>Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="vendors/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!-- some code here --->
<script src="vendors/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
<script src="assets/scripts.js"></script>
</body>
Well i don't know why it work with this only... but it worked which is what it really matters! jaja also i'd like to share that you've got to write those libraries exactly in the same order or it won't work!... imma post also the files so you can download them in case you have the same problem, here is the link: Codigo y archivos