html - Bootstrap Navbar. Cuando presiono el botón no pasa nada
twitter-bootstrap (2)
¿Has incluido todos los JavaScript necesarios?
Compruebe si tiene incluido el archivo JavaScript de bootstrap o simplemente puede descargar
collapse.js
de Bootstrap
Tengo un problema con mi barra de navegación. Cuando la pantalla es pequeña, aparece un botón, pero cuando presiono el botón no sucede nada.
Este es mi código y realmente no sé por qué el botón en el Navebar no hace nada.
body {
font-family: Verdana;
// letter-spacing: 1px;
}
#header,
h1 {
// color: #6f6f6f;
color: #fff;
font-size: 24px;
}
container {
margin-left: auto;
margin-right: auto;
}
#header {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 200px;
padding-top: 10px;
background: rgb(26, 84, 155);
background: -moz-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(26, 84, 155, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=''#1a549b'', endColorstr=''#7db9e8'', GradientType=1);
}
table {
float: left;
}
.beschreibung {
width: 100%;
float: left;
}
.text {
float: left;
}
.person {
float: left;
margin-top: 20px;
border-width: 1px;
border-style: solid;
border-color: #8ec6f7;
padding: 2.5em;
border-radius: 5px;
text-align: justify;
}
.download {
background-color: #8ec6f7;
border-radius: 10px;
width: 100px;
color: #fff;
}
.footer {
margin-top: 140px;
width: 100%;
height: 200px;
background: #909090;
float: bottom;
}
.footer,
.foo {
color: #fff;
}
<!DOCTYPE HTML>
<html>
<head>
<title>TestPage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="apple_logo.png" />
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home <span class="sr-only">(current)</span> </a>
</li>
<li><a href="about_us.html">About us</a>
</li>
<li><a href="downloads.html">Downloads</a>
</li>
</ul>
</div>
</div>
<div class="navbar-header">
</div>
</nav>
<!--header-->
<div id="header">
<div class="container">
<center>
<h1>Überschrift</h1>
<h3>unter überschrift</h3>
</center>
</div>
</div>
<!-- body-part -->
<div class="container">
<h2>News</h2>
<hr/>
<div class="line">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail">
<img src="ip_doesnt_exist.jpg" alt="...">
</a>
</div>
<h4>Example heading</h4>
<p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p>
<br/>
<br/>
<p><b>1.1.1999</b>
</p>
<br/>
<br/>
<br/>
<hr/>
</div>
<div class="line">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail">
<img src="ip_doesnt_exist.jpg" alt="...">
</a>
</div>
<h4>Example heading</h4>
<p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p>
<br/>
<br/>
<p><b>1.1.1999</b>
</p>
<br/>
<br/>
<br/>
<br/>
<hr/>
</div>
<div class="line">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail">
<img src="ip_doesnt_exist.jpg" alt="...">
</a>
</div>
<h4>Example heading</h4>
<p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p>
<br/>
<br/>
<p><b>1.1.1999</b>
</p>
<br/>
<br/>
<br/>
<hr/>
</div>
</div>
<div class="footer">
<div class="container">
<br/>
<div class="row">
<div class="col-sm-12 col-md-12">
<a href="#">
<img src="facebook-icon.png" alt="facebook">
<p class="foo">Followe us on Facebook</p>
</a>
</div>
<div class="col-sm-12 col-md-12">
<a href="#">
<img src="google-plus-icon.png" alt="google+">
<p class="foo">Followe us on Google +</p>
</a>
</div>
<div class="col-sm-12 col-md-12">
</div>
</div>
</div>
</div>
</body>
</html>
Lo que falta es una referencia a
jquery.js
.
jsfiddle
para demostrarlo.
Tenga en cuenta que debe hacer referencia a
jquery.js
antes de hacer
referencia a
bootstrap.js
Su
html head
debería verse así:
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
Espero que esto funcione