Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. Using Twitter Bootstrap, you may create static navigation menus.
In this article we use some built-in CSS to make a simple menu for your website.
Using Twitter Bootstrap, you may create static navbar. - See more at: http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf
What is Bootstrap?
Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. The Bootstrap framework is used to develop front facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.
To learn more about bootstrap: Introduction to Bootstrap
Calling Bootstrap in HTML
Now let's call Bootstrap in our HTML.
Let’s assume, we have a blank HTML. Something like this:
HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now we need to add a reference to the bootstrap CSS file and JavaScript file in our HTML file. The following code adds reference to JQuery and two Bootstrap js files.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Note: Also don’t forget to include jQuery, if you’ll be using Bootstraps JS plugins.
Creating Menu using Bootstrap
To create a menu in Bootstrap, open the bootstrap.css file and check out how Bootstrap styles each component.
- navbar-inverse
- Container class
- navbar-nav
Now first we create a list using ul and li tags.
The HTML file looks like the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">Technologies</a></li>
<li><a href="#contact">Article</a></li>
<li><a href="#contact">blog</a></li>
<li><a href="#contact">News</a></li>
</ul>
</body>
</html>
HTML will render without Bootstrap like the following.
1. Using bootstrap CSS class="navbar-inverse"
You now need to add the navbar-inverse class.
Now open the bootstrap.css file and find the .navbar-inverse class. It looks like this. This is where we can
.navbar-inverse {
background-color: #222222;
border-color: #080808;
}
Now we want to change the background-color with "background-color: #0029ff".
.navbar-inverse {
background-color: #0029ff;
border-color: #080808;
}
Once our changes are done in CSS, the new changes should be applied to HTML.
Here is the final HTML look like that use the navbar-inverse.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar-inverse">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">Technologies</a></li>
<li><a href="#contact">Article</a></li>
<li><a href="#contact">blog</a></li>
<li><a href="#contact">News</a></li>
</ul>
</div>
</body>
</html>
To add a container, the following code uses the Container class to create a container to host the menu.
2. Using bootstrap CSS class="Container"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar-inverse">
<div class="Container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">Technologies</a></li>
<li><a href="#contact">Article</a></li>
<li><a href="#contact">blog</a></li>
<li><a href="#contact">News</a></li>
</ul>
</div>
</div>
</body>
</html>
The HTML applies nav-bar-nav.
2. Using bootstrap CSS class="navbar-nav"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar-inverse">
<div class="Container">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">Technologies</a></li>
<li><a href="#contact">Article</a></li>
<li><a href="#contact">blog</a></li>
<li><a href="#contact">News</a></li>
</ul>
</div>
</div>
</body>
</html>
The final menu looks like the following.