{"id":647,"date":"2014-07-03T10:42:57","date_gmt":"2014-07-03T10:42:57","guid":{"rendered":"http:\/\/www.siriinnovations.com\/blog\/?p=647"},"modified":"2014-07-11T05:51:33","modified_gmt":"2014-07-11T05:51:33","slug":"bootstrap-tutorial","status":"publish","type":"post","link":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/","title":{"rendered":"Bootstrap Tutorial"},"content":{"rendered":"

Introduction:<\/h3>\n

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\u2019t 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.<\/p>\n

How to download:<\/strong><\/p>\n

To start using Twitter Bootstrap, you have to download bootstrap.zip from their official github page<\/a><\/p>\n

Basic HTML Template for Bootstrap:<\/h3>\n

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:<\/p>\n

\n
<!DOCTYPE html><\/code><\/pre>\n<\/blockquote>\n
We will set the meta<\/b> 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.<\/p>\n
\n
<meta charset=\u201dutf-8\u201d> <\/code><\/code><\/pre>\n<\/blockquote>\n
We will now proceed to include the necessary style sheet which is bootstrap.css.<\/p>\n
\r\n<link rel=\u201dstylesheet\u201d href=\u201dcss\/bootstrap.css\u201d \u00a0type=\u201dtext\/css\u201d\/>\r\n\r\n<script src=\"http:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n\r\n<script src=\u201djs\/bootstrap.js\u201d><\/script>\r\n<\/pre>\n
All these scripts should lie just above the end body tag , in consideration to the performance of your web page.<\/p>\n
How to create mouse over drop down menu:<\/h3>\n
In head section:<\/p>\n
\r\n<style>\r\n    .main-nav {\r\n\tmargin: 16px 0px 0px 0px !important;\r\n}\r\n.main-nav li{\r\n    float: left;\r\n}\r\n.main-nav li a {\r\n\tfont-family: 'Open Sans', sans-serif !important;\r\n\tfont-size: 14px;\r\n\tfont-weight: normal !important;\r\n\ttext-decoration: none !important;\r\n\tpadding: 5px 10px;\r\n\tbox-shadow: none !important;\r\n\tcolor: #424241 !important;\r\n\tmargin-right:0px;\r\n}\r\n.main-nav li a:hover {\r\n\tbackground-color: #5cc6d0 !important;\r\n\tborder-radius:0;\r\n}\r\n.main-nav li a.active {\r\n\tbackground-color: #5cc6d0 !important;\r\n\tborder-radius:0;\r\n}\r\n.main-nav li:hover {\r\n}\r\n.main-nav ul li.active {\r\n}\r\n<\/style>\r\n<\/pre>\n
\r\n<script type='text\/javascript<\/a>'>\/\/<![CDATA[ \r\n$(window).load(function(){\r\n(function ($, window, delay) {\r\n  var theTimer = 0;\r\n  var theElement = null;\r\n    var theLastPosition = {x:0,y:0};\r\n  $('[data-toggle]')\r\n    .closest('li')\r\n    .on('mouseenter', function (inEvent) {\r\n    if (theElement) theElement.removeClass('open');\r\n    window.clearTimeout(theTimer);\r\n    theElement = $(this);\r\n    theTimer = window.setTimeout(function () {\r\n      theElement.addClass('open');\r\n    }, delay);\r\n  })\r\n    .on('mousemove', function (inEvent) {\r\n        if(Math.abs(theLastPosition.x - inEvent.ScreenX) > 4 || \r\n           Math.abs(theLastPosition.y - inEvent.ScreenY) > 4)\r\n        {\r\n            theLastPosition.x = inEvent.ScreenX;\r\n            theLastPosition.y = inEvent.ScreenY;\r\n            return;\r\n        }\r\n    if (theElement.hasClass('open')) return;\r\n    window.clearTimeout(theTimer);\r\n    theTimer = window.setTimeout(function () {\r\n      theElement.addClass('open');\r\n    }, delay);\r\n  })\r\n    .on('mouseleave', function (inEvent) {\r\n    window.clearTimeout(theTimer);\r\n    theElement = $(this);\r\n    theTimer = window.setTimeout(function () {\r\n      theElement.removeClass('open');\r\n    }, delay);\r\n  });\r\n})(jQuery, window, 200); \/\/ 200 is the delay in milliseconds\r\n});\/\/]]>  \r\n<\/script>\r\n<\/pre>\n
In body section:<\/p>\n
\r\n<div class=\"container<\/a>\">\r\n    <ul class=\"nav pull-right main-nav<\/a>\">\r\n            <li class=\"active<\/a>\"><a href=\"index.html<\/a>\" class=\"active<\/a>\">Home<\/a><\/li>\r\n            <li><a href=\"index.html<\/a>\"> About Us<\/a><\/li>\r\n            <li class=\"dropdown dropdown-toggle<\/a>\"><a class=\"dropdown-toggle<\/a>\" data-toggle=\"dropdown<\/a>\" href=\"index.html<\/a>\"> Products <b class=\"caret<\/a>\"><\/b><\/a>\r\n              <ul class=\"dropdown-menu<\/a>\">\r\n                <li> <a href=\"\">Product name1<\/a> <\/li>\r\n                <li> <a href=\"\">Product name2<\/a> <\/li>\r\n                <li> <a href=\"\">Product name3<\/a> <\/li>\r\n                <li> <a href=\"\">Product name4<\/a> <\/li>\r\n              <\/ul>\r\n            <\/li>\r\n            <li><a href=\"index.html<\/a>\">R&D <\/a><\/li>\r\n            <li><a href=\"index.html<\/a>\">Regulatory <\/a><\/li>\r\n            <li><a href=\"index.html<\/a>\">Gallery <\/a><\/li>\r\n            <li><a href=\"index.html<\/a>\">FAQ <\/a><\/li>\r\n            <li><a href=\"index.html<\/a>\">Carrer <\/a><\/li>\r\n            <li><a href=\"index.html<\/a>\">Contact Us <\/a><\/li>\r\n          <\/ul>\r\n       <\/div>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":20,"featured_media":1048,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general"],"yoast_head":"\nBootstrap Tutorial - Siri Innovations<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Tutorial - Siri Innovations\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Siri Innovations\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-03T10:42:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-07-11T05:51:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"241\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Satyam Ganta\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Satyam Ganta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\"},\"author\":{\"name\":\"Satyam Ganta\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/4e3aec1382b029104aa8a93e78e8d620\"},\"headline\":\"Bootstrap Tutorial\",\"datePublished\":\"2014-07-03T10:42:57+00:00\",\"dateModified\":\"2014-07-11T05:51:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\"},\"wordCount\":273,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg\",\"articleSection\":[\"General\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\",\"url\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\",\"name\":\"Bootstrap Tutorial - Siri Innovations\",\"isPartOf\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg\",\"datePublished\":\"2014-07-03T10:42:57+00:00\",\"dateModified\":\"2014-07-11T05:51:33+00:00\",\"author\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/4e3aec1382b029104aa8a93e78e8d620\"},\"breadcrumb\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage\",\"url\":\"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg\",\"contentUrl\":\"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg\",\"width\":540,\"height\":241},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/siriinnovations.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#website\",\"url\":\"https:\/\/siriinnovations.com\/blog\/\",\"name\":\"Technical blog from Siri Innovations\",\"description\":\"Innovative like no other\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/siriinnovations.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/4e3aec1382b029104aa8a93e78e8d620\",\"name\":\"Satyam Ganta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0b819c88e9d8147e21d70e14ae8efa5bdabdfecc465df90c357aa3d796d9d611?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0b819c88e9d8147e21d70e14ae8efa5bdabdfecc465df90c357aa3d796d9d611?s=96&d=mm&r=g\",\"caption\":\"Satyam Ganta\"},\"url\":\"https:\/\/siriinnovations.com\/blog\/author\/satyamganta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Tutorial - Siri Innovations","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Tutorial - Siri Innovations","og_description":"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 […]","og_url":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/","og_site_name":"Siri Innovations","article_published_time":"2014-07-03T10:42:57+00:00","article_modified_time":"2014-07-11T05:51:33+00:00","og_image":[{"width":540,"height":241,"url":"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg","type":"image\/jpeg"}],"author":"Satyam Ganta","twitter_misc":{"Written by":"Satyam Ganta","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#article","isPartOf":{"@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/"},"author":{"name":"Satyam Ganta","@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/4e3aec1382b029104aa8a93e78e8d620"},"headline":"Bootstrap Tutorial","datePublished":"2014-07-03T10:42:57+00:00","dateModified":"2014-07-11T05:51:33+00:00","mainEntityOfPage":{"@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/"},"wordCount":273,"commentCount":0,"image":{"@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg","articleSection":["General"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/","url":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/","name":"Bootstrap Tutorial - Siri Innovations","isPartOf":{"@id":"https:\/\/siriinnovations.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg","datePublished":"2014-07-03T10:42:57+00:00","dateModified":"2014-07-11T05:51:33+00:00","author":{"@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/4e3aec1382b029104aa8a93e78e8d620"},"breadcrumb":{"@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#primaryimage","url":"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg","contentUrl":"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg","width":540,"height":241},{"@type":"BreadcrumbList","@id":"https:\/\/siriinnovations.com\/blog\/bootstrap-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siriinnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/siriinnovations.com\/blog\/#website","url":"https:\/\/siriinnovations.com\/blog\/","name":"Technical blog from Siri Innovations","description":"Innovative like no other","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siriinnovations.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/4e3aec1382b029104aa8a93e78e8d620","name":"Satyam Ganta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0b819c88e9d8147e21d70e14ae8efa5bdabdfecc465df90c357aa3d796d9d611?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b819c88e9d8147e21d70e14ae8efa5bdabdfecc465df90c357aa3d796d9d611?s=96&d=mm&r=g","caption":"Satyam Ganta"},"url":"https:\/\/siriinnovations.com\/blog\/author\/satyamganta\/"}]}},"jetpack_featured_media_url":"https:\/\/siriinnovations.com\/blog\/wp-content\/uploads\/2014\/07\/15.jpg","_links":{"self":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":10,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":890,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions\/890"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/media\/1048"}],"wp:attachment":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}