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 don't 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 Bootstrap's 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>
0 comments:
Post a Comment