navigation
bar can be defined as a navigation header which is placed at the top of the
page for navigation purpose. Bootstrap can make a navigation bar extend larger
or collapse into smaller and it all depends upon the screen of the device as it
is needed to be optimized. Bootstrap navigation is used to hold the drop down
menus which is needed in several ways in a website.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<header class="jumbotron text-center">
<h2>Welcome to Nirajanghimirey's workshop</h2>
<p>This is Navbar</p>
</header>
<div class="well">
<h4>Navbar Defaulr</h4>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- For mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-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" href="#">joeandy’s workshop</a>
</div>
<!-- Navbar -->
<div class="collapse navbar-collapse" id="example-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tutorials <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap 3</a></li>
<li class="divider"></li>
<li><a href="#">Learn more</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">User</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Account</a></li>
<li><a href="#">Change password</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="well">
<h4>Navbar Inverse</h4>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- For mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar2">
<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="#">joeandy’s workshop</a>
</div>
<!-- Navbar -->
<div class="collapse navbar-collapse" id="example-navbar2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tutorials <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap 3</a></li>
<li class="divider"></li>
<li><a href="#">Learn more</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">User</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Account</a></li>
<li><a href="#">Change password</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html> 
No comments:
Post a Comment