Bootstrap Tutorial

Introduction:

Twitter Bootstrap is a CSS framework that helps in designing web applications. It is one of the easiest CSS frameworks to use in the Industry today. It assumes you have no designing knowledge and all you want to do is to write some HTML as per the Bootstrap specifications. In short, Twitter Bootstrap has already written a CSS style sheet for you, which has inbuilt jQuery support and also has some popular JavaScript tools. Wooh! Isn’t that great? You get a bunch of popular tools ready to use. All you have to do is just place the right HTML mark-up at correct place.

How to download:

To start using Twitter Bootstrap, you have to download bootstrap.zip from their official github page

Basic HTML Template for Bootstrap:

In order to activate the Bootstrap framework, you need to include all the appropriate files and follow a proper HTML structure. Here, we will build the structure first and then see which files are required. The first thing that you should note is that it requires an HTML5 doctype declaration at the top:

<!DOCTYPE html>

We will set the meta character to utf-8 because we will be using special characters in our project and we want the browser to parse them correctly. Twitter Bootstrap also specifies the use of utf-8 in their documentations for better compatibility.

<meta charset=”utf-8”>

We will now proceed to include the necessary style sheet which is bootstrap.css.

<link rel=”stylesheet” href=”css/bootstrap.css”  type=”text/css”/>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src=”js/bootstrap.js”></script>

All these scripts should lie just above the end body tag , in consideration to the performance of your web page.

How to create mouse over drop down menu:

In head section:

<style>
    .main-nav {
	margin: 16px 0px 0px 0px !important;
}
.main-nav li{
    float: left;
}
.main-nav li a {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 14px;
	font-weight: normal !important;
	text-decoration: none !important;
	padding: 5px 10px;
	box-shadow: none !important;
	color: #424241 !important;
	margin-right:0px;
}
.main-nav li a:hover {
	background-color: #5cc6d0 !important;
	border-radius:0;
}
.main-nav li a.active {
	background-color: #5cc6d0 !important;
	border-radius:0;
}
.main-nav li:hover {
}
.main-nav ul li.active {
}
</style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
(function ($, window, delay) {
  var theTimer = 0;
  var theElement = null;
    var theLastPosition = {x:0,y:0};
  $('[data-toggle]')
    .closest('li')
    .on('mouseenter', function (inEvent) {
    if (theElement) theElement.removeClass('open');
    window.clearTimeout(theTimer);
    theElement = $(this);
    theTimer = window.setTimeout(function () {
      theElement.addClass('open');
    }, delay);
  })
    .on('mousemove', function (inEvent) {
        if(Math.abs(theLastPosition.x - inEvent.ScreenX) > 4 || 
           Math.abs(theLastPosition.y - inEvent.ScreenY) > 4)
        {
            theLastPosition.x = inEvent.ScreenX;
            theLastPosition.y = inEvent.ScreenY;
            return;
        }
    if (theElement.hasClass('open')) return;
    window.clearTimeout(theTimer);
    theTimer = window.setTimeout(function () {
      theElement.addClass('open');
    }, delay);
  })
    .on('mouseleave', function (inEvent) {
    window.clearTimeout(theTimer);
    theElement = $(this);
    theTimer = window.setTimeout(function () {
      theElement.removeClass('open');
    }, delay);
  });
})(jQuery, window, 200); // 200 is the delay in milliseconds
});//]]>  
</script>

In body section:

<div class="container">
    <ul class="nav pull-right main-nav">
            <li class="active"><a href="index.html" class="active">Home</a></li>
            <li><a href="index.html"> About Us</a></li>
            <li class="dropdown dropdown-toggle"><a class="dropdown-toggle" data-toggle="dropdown" href="index.html"> Products <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li> <a href="">Product name1</a> </li>
                <li> <a href="">Product name2</a> </li>
                <li> <a href="">Product name3</a> </li>
                <li> <a href="">Product name4</a> </li>
              </ul>
            </li>
            <li><a href="index.html">R&D </a></li>
            <li><a href="index.html">Regulatory </a></li>
            <li><a href="index.html">Gallery </a></li>
            <li><a href="index.html">FAQ </a></li>
            <li><a href="index.html">Carrer </a></li>
            <li><a href="index.html">Contact Us </a></li>
          </ul>
       </div>

More Related Articles