Saturday, January 24, 2015
Bootstrap Responsive Navbar
It’s the time to create responsive navbar example using bootstrap. This navigation bar automatically adjust according to device screen size no doubt it was completely responsive you can see it in below video demo and you no need of any css or media queries knowledge everything is done by bootstrap. Those who are in web designing field Twitter Bootstrap is the best choice as it is very easy to use, rich in appearance and developers can instantly design their web applications or websites.
Here im installing bootstrap from CDN because to avoid confusion and for IE8 support i included
response.js: This script enable responsive web designs in browsers that dont support CSS3 Media Queries.
html5shim: This is also called as html5shiv don’t be confuse both are same there is no difference between them.
Screenshots
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Responsive Navbar Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet" media="screen"><!-- HTML5 shim and Respond.js IE8 support
of HTML5 elements and media queries--><!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header ">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"
style="margin-right:2px"></i>
Home</a></li><li><a href="#">Android</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
<li><a href="https://plus.google.com">Google+</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</li>
<li><a href="#">Python</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Graphics</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Mobiles<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Apple</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Moto</a></li>
<li><a href="#">Nexus</a></li>
</ul>
</li>
<li><a href="#">Others</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation -->
<!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.