Following is the folder structure I am using for my demo application
css
fonts
images
js
views
index.html
The code for index.html is as follows :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Sandhu Tutors</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Top Navigation-->
<nav class="nav navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ABSS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li><a ng-href="">First</a></li>
<li><a ng-href="">Second</a></li>
</ul>
</div>
</div>
</nav>
<!--Main view goes here -->
<div ng-view></div>
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull=left">
<p> ABSS © Sandhu 2017.</p>
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/controller.js"></script>
</body>
</html>
And here goes the code for controller.js :
var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'views/home.html',
controller : 'homeCtrl'
})
.when('/first',{
templateUrl:'views/first.html',
controller : 'firstCtrl'
})
.when('/second',{
templateUrl:'views/second.html',
controller : 'secondCtrl'
})
.otherwise({
redirect :'/'
});
});
app.controller('homeCtrl',function($scope){
$scope.name="Angad";
});
app.controller('firstCtrl',function($scope){
$scope.name="Second";
});
app.controller('secondCtrl',function($scope){
$scope.name="Second";
});
Routing doesnt seems to work here .... The only error it shows is :
-Error: [$compile:tpload]
-XMLHttpRequest cannot load
Apart from this if anyone could help as to how to make the desired pages open in the ng-view section on the click of the top navbar buttons ...would be highly appreciated !!
Your code seems to be correct. If you are using chrome as a browser use a local webserver to test your site (for example lite-server). Chrome won't allow you to load local files for security reasons. You could also try and test your application with another browser.
Your Navbar hrefs should look like:
<li>About Us</li>
or if you are using AngularJS 1.6
<li>About Us</li>
Related
i wrote a html script with a simple navbar. The main page is fine but when i click on "About" the page reload and i just want to reload the content and maintain the navbar. I'm using bootstrap. How can i do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- <form class="form-horizontal" action="/action_page.php"> -->
<div class="row">
<div class="col-*-10">
<legend><h2>Title</h2></legend>
</div>
</div>
<p>HOME!!!</p>
</div>
</body>
</html>
And this is my about page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ABOUT!!!!!!!!!!!!!!!!!</p>
</body>
</html>
You're actually supposed to implement such a thing using a router, ui-bootstrap is just a UI library. The ui-router wiki explains how to accomplish this using multiple views per state.
Let's say we have two states in which we want to have a shared navbar, than define 2 states and provide each with 2 views, one navbar and another for the body
Provide each navbar view the same controller and template
$stateProvider
.state('stateA',{
views: {
'navbar#stateA': {
templateUrl: 'navbar.html', // <-- navbar html goes here
controller: 'navbarCtrl'
},
'body#stateA': {
templateUrl: 'report-table.html',
controller: 'StateACtrl'
}
}
})
.state('stateB',{
views: {
'navbar#stateB': {
templateUrl: 'navbar.html',
controller: 'navbarCtrl'
},
'body#stateB': {
templateUrl: 'report-table.html',
controller: 'StateBCtrl'
}
}
})
Inside your markup, you should maintain
<body>
<!-- the router will replace this with your html files -->
<div ui-view="navbar"></div>
<div ui-view="body"></div>
</body>
On the open body tag, make a javascript function named start onLoad="start()" Then within the function set the innerhtml the navbar code.
HTML:
<body onLoad="start()">
<div id="navbar"></div>
</body>
JS:
function start() {
document.getElementById("navbar").innerHTML = "<nav class="navbar navbar-inverse" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>";
}
There are a couple ways to do this without copying the whole navigation bar into every HTML file.
You can put all of the content in the same page and use JavaScript to hide/show specific sections when you click on the menu link
You can use JavaScript to retrieve the new content via AJAX and update the container.
You can add JavaScript to create the navigation bar on the fly for each page you want it on.
I'm trying to use a ui-router in Angular to generate a single page with multiple templates in <ui-view></ui-view> but it is unable to load a single template. It just gives a blank page with no JavaScript errors, even the nav bar does not appear.
I have gone through many questions about this on stack but even applying their solutions did not help:
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
<nav class="navbar">
<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>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></a>
</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 navbar-right main-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="devices">Search</a></li>
<li><a ui-sref="addDevice">Add</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div ui-view></div>
<section id="service" class="section section-padded">
<!-- Holder for mobile navigation -->
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<script src="app.js"></script>
<script src="service/device.service.js"></script>
<script src="controller/main.controller.js"></script>
<script src="controller/shelf.controller.js"></script>
<script src="controller/device.controller.js"></script>
<script src="controller/newdevice.controller.js"></script>
</body>
</html>
This is the app.js
(function (){
"use strict";
var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);
// app.service('DeviceFactoryService',deviceservice(DeviceFactory));
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home",{
url:"/",
templateUrl:"main.html",
});
}]);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
and here are my templates:
<div id="home" ng-Controller="mainController">
<div class="container" >
<div class="row text-center title">
<!--<h2>Services</h2>
<h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
<div class="jumbotron">
<h1 class="display-3"> Device Farm </h1>
<hr class="my-4">
<p><span class="label label-info">{{count}}</span></p>
</div>
</div>
<div class="row services">
<div class="col-md-4">
<a href="/devices" >
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/phone-blue.png" alt="" class="icon">
</div>
<h3 class="description">My Devices</h3>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/add_device">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/add-blue.png" alt="" class="icon">
</div>
<h3 class="description">Add Device</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a href="">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/search-blue.png" alt="" class="icon">
</div>
<h3 class="description">Search Device</h3>
</div></a>
</div>
</div>
</div>
<div ></div>
</div>
And this is my app.index.js where i m redirecting to index.js
var express=require("express");
var app= express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router=require('./app.routes.js');
var port=8888;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(methodOverride());
app.use((request,response,next)=>{
console.log(request.headers)
next()
});
app.use('/api',router);
app.get('*',function(req,res){
res.sendFile('index.html',{root:__dirname+'/public'});
});
app.listen(port,error);
function error(err){
if(err){
console.log(`Something went wrong`,err);
}
console.log(`Server is running on ${port}`);
}
So I guys i found the reason why my ui-router wasnt working.
Apparently you cant declare app.module('app',['dependency']) even in your controllers or other modules with angular.modular('app',[]) also will override your main app.module and because of this i the control wasnt entering app.config for the ui-router to work.
refer to answer :
Angular routing config function not called
for further understanding .
Thank you guys
Here I have the code for a bootstrap navigation bar:
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?
You can use function in controller to update variable for active button.
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
$scope.updateActive = function(navButton) {
$scope.btnActive = navButton;
};
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is similar solution.
I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.
So, I have an angular routing app working locally, but it's not working on plunker, I'm trying to get it working there to demonstrate an issue, but anyway... It's not working, and it doesn't make sense why. The views are not being injected into <div ui-view></div> on the index page :(
Here's my plunker
Here's the js:
var routerApp = angular.module('routerApp', ['ui.router','ui.bootstrap']);
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(false).hashPrefix("");
$stateProvider
// HOME VIEW ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
// onEnter: scrollContent
})
// ONE VIEW ========================================
.state('one', {
url: '/one',
templateUrl: 'partial-one.html'
})
// TWO VIEW ========================================
.state('two', {
url: '/two',
templateUrl: 'partial-two.html'
})
// THREE VIEW ========================================
.state('three', {
url: '/three',
templateUrl: 'partial-three.html'
})
});
Here's my index.html page (check the plunker above to see the view pages):
<!DOCTYPE html>
<html>
<head>
<!-- // base path for angular routing -->
<base href="/">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="script.js"></script>
</head>
and the body:
<body ng-app="routerApp">
<!-- NAVIGATION -->
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home">Some web page somewhere</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="one">Link One</a></li>
<li><a ui-sref="two">Link Two</a></li>
<li><a ui-sref="three">Link Three</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed navbar -->
<!-- MAIN CONTENT -->
<!-- Inject Content Here -->
<div class="container" style="padding-top:68px;">
<div ui-view></div>
</div>
</body>
There is updated plunker
In case of the plunker, we cannot use
<base href="/" />
Because there is always some stuff like 'http://run.plnkr.co/s6tfzR2Tbd1v9qB9gPH8/script.js' instead of the http://run.plnkr.co/script.js
also JQuery is needed for bootstrap, new head:
<head>
<!-- CSS -->
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="script.js"></script>
<!-- // base path for angular routing -->
<!--<base href="/" />-->
</head>
Check the working version here
The <base> tag is messing with plunker, remove it and it should work.
Working example
i want to create a navigation bar in bootstrap
everything works fine except one. when ever I resize the browser to width of mobile and click on the toggle button the dropdown menu does not open.
Please help me. All I wanted is "when ever i click on the stacked toggel button i want the drop down to open".
I have also made changes to class as well as ids in data-toggle attribute of the button.
I have included jquery, bootstrap js and bootstrap css. I have displayed the entire code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>
Try the following code to include jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Updated :
Are you sure that you linked bootstrap js file properly ?
Remove bootstrap js from ,Try by adding them before </body> and after jQuery library. Below is the correct code (Hope :) )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>