angularjs - example - ng bootstrap collapse
bootsrap nav-bar collapsable no puede hacer que funcione (1)
Estoy desarrollando una aplicación Angularjs y me gustaría hacerlo multiplataforma, así que estoy tratando de usar Bootsrap, encontré una plantilla que me gustaría seguir ( https://blackrockdigital.github.io/startbootstrap-business-frontpage/# ) el problema es que quiero transformar la barra de navegación cuando el tamaño de la pantalla es más pequeño.
pero no sé lo que me estoy perdiendo, porque realiza correctamente la transformación en un botón, pero luego no se puede hacer clic en el botón, por lo que las opciones ''inicio'', ''servicios'' y ''contacto'' no están accesibles.
Cualquier ayuda sería increíble, aquí tienes los archivos css y html:
HTML
<!DOCTYPE html>
<html ng-app="home">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HOME</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>
<link href="/web/resources/css/business-frontpage.css" rel="stylesheet" />
<script src="/web/resources/js/home/home-service.js"></script>
<script src="/web/resources/js/home/home-controller.js"></script>
<script src="/web/resources/js/home/home-app.js"></script>
<script src="/web/resources/lib/translate/angular-translate.js"></script>
<script src="/web/resources/js/generic/urlLanguageStorage.js"></script>
<script src="/web/resources/lib/translate/angular-translate-loader-url.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a ui-sref="home" translate>navegacion.inicio</a>
</li>
<li>
<a ui-sref="servicios" translate>navegacion.servicios</a>
</li>
<li>
<a ui-sref="contacto" translate>navegacion.contacto</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Image Background Page Header -->
<!-- Note: The background image is set within the business-casual.css file. -->
<header class="business-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a class="tagline" ui-sref="home" translate>titulo.alergenos</a></h1>
</div>
</div>
</div>
</header>
<div class="container">
<div ui-view></div>
</div>
<div class="container">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
</body>
</html>
CSS
/*
* Start Bootstrap - Business Frontpage (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.business-header {
height: 400px;
background: url(''http://placehold.it/1920x400'') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/* Customize the text color and shadow color and to optimize text legibility. */
.tagline {
text-shadow: 0 0 10px #000;
color: #fff;
}
.img-center {
margin: 0 auto;
}
footer {
margin: 50px 0;
}
EDITAR Creé un Jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/
Tanto
jQuery
como
Bootstrap.js
deben incluirse con
jQuery
colocado
antes de
Bootstrap.js
.
Nota: La versión de
jQuery
que
se
puede usar variará dependiendo de la versión de
Bootstrap
se use (o viceversa).
Bootstrap versión 4
JS Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren jQuery , Popper.js y nuestros propios complementos de JavaScript. Coloque los siguientes
<script>s cerca del final de sus páginas, justo antes de la etiqueta de cierre</body>, para habilitarlos. jQuery debe venir primero, luego Popper.js, y luego nuestros complementos de JavaScript.Usamos la versión delgada de jQuery , pero la versión completa también es compatible.
Para la versión v4.0.0-beta.2 package.json
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.12.7"
},
Bootstrap versión 3
jQuery requiere
Tenga en cuenta que todos los complementos de JavaScript requieren que se incluya jQuery, como se muestra en la plantilla de inicio . Consulte nuestro bower.json para ver qué versiones de jQuery son compatibles.
Para el lanzamiento v3.3.7 Changelog & bower.json
"dependencies": {
"jquery": "1.9.1 - 3"
}
Para v3.3.6 bower.json
"dependencies": {
"jquery": ">= 1.9.1 - 2"
}
Para v3.3.0 - v3.3.5 bower.json
"dependencies": {
"jquery": ">= 1.9.1"
}
Esto no explica el lanzamiento de jQuery v3.0
Para v3.0.0rc1 - v3.2.0 bower.json
"dependencies": {
"jquery": ">= 1.9.0"
}
Esto no explica el lanzamiento de jQuery v3.0