Issue
i'm developing an Angularjs application and i'd like to make it multiplatform so to do that i'm trying to use Bootsrap, i found a template i'd like to follow (https://blackrockdigital.github.io/startbootstrap-business-frontpage/#) the problem is that i want to transform the navbar when the screen size is smaller.
but i don't know what i'm missing, because it does correctly the transformation to a button but then, the button is not clickable so the options 'inicio', 'servicios' and 'contacto' are unreachable.
Any help would be awesome, here you have the css and html files:
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;
}
EDIT I created a Jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/
Solution
Both jQuery and Bootstrap.js should be included with jQuery placed before Bootstrap.js.
Note: The version of jQuery that can be used will vary depending on the version of Bootstrap being used (or vice versa).
Bootstrap Version 4
JS Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following
<script>s near the end of your pages, right before the closing</body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.We use jQuery’s slim build, but the full version is also supported.
For Release v4.0.0-beta.2 package.json
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.12.7"
},
Bootstrap Version 3
jQuery required
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.
For Release v3.3.7 Changelog & bower.json
"dependencies": {
"jquery": "1.9.1 - 3"
}
For v3.3.6 bower.json
"dependencies": {
"jquery": ">= 1.9.1 - 2"
}
For v3.3.0 - v3.3.5 bower.json
"dependencies": {
"jquery": ">= 1.9.1"
}
This does not account for the release of jQuery v3.0
For v3.0.0rc1 - v3.2.0 bower.json
"dependencies": {
"jquery": ">= 1.9.0"
}
This does not account for the release of jQuery v3.0
Answered By - vanburen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.