i'm developing angularjs application , i'd make multiplatform i'm trying use bootsrap, found template i'd follow (https://blackrockdigital.github.io/startbootstrap-business-frontpage/#) problem want transform navbar when screen size smaller.
but don't know i'm missing, because correctly transformation button then, button not clickable options 'inicio', 'servicios' , 'contacto' unreachable.
any awesome, here have css , 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 , toggle grouped 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 nav links, forms, , other content 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: background image set within 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 © 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 .navbar-fixed-top. remove if using .navbar-static-top. change if height of navigation changes. */ } /* header image background - change url below 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 text color , shadow color , optimize text legibility. */ .tagline { text-shadow: 0 0 10px #000; color: #fff; } .img-center { margin: 0 auto; } footer { margin: 50px 0; } edit created jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/
both jquery , bootstrap.js should included jquery placed before bootstrap.js.
note: version of jquery can used vary depending on version of bootstrap being used (or vice versa).
bootstrap version 4
js many of our components require use of javascript function. specifically, require jquery, popper.js, , our own javascript plugins. place following
<script>s near end of pages, right before closing</body> tag, enable them. jquery must come first, popper.js, , our javascript plugins.we use jquery’s slim build, full version 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 javascript plugins require jquery included, shown in starter template. consult our bower.json see versions of jquery 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 not account release of jquery v3.0
for v3.0.0rc1 - v3.2.0 bower.json
"dependencies": { "jquery": ">= 1.9.0" } this not account release of jquery v3.0
Comments
Post a Comment