Create Navbar with Bootstrap
Basic navbar
To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w.java 2s . c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>
Navbar components
A simple link to show your brand or project name only requires an anchor tag.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w. j a v a 2 s . com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<a class="navbar-brand" href="#">Title</a>
</body>
</html>
Nav links
Nav items are simple to add via unordered lists.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w ww . j av a 2s . co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</ul>
</body>
</html>
Text
Wrap strings of text in an element with .navbar-text,
usually on a <p> tag for proper leading and color.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w .j a va 2 s.co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</body>
</html>
Links
For folks using standard links that are not within the
regular navbar navigation component, use the .navbar-link
class to add the proper colors for the default and inverse navbar options.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w ww. jav a 2 s . c om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text pull-right">
Signed in as <a href="#" class="navbar-link">Mark Otto</a>
</p>
</div>
</body>
</html>
Component alignment
Align nav links, forms, buttons, or text, using the
.pull-left or .pull-right
utility classes. Both classes
will add a CSS float in the specified direction. To
align nav links, put them in a separate <ul> with
the respective utility class applied.