{"id":429,"date":"2017-08-23T13:29:29","date_gmt":"2017-08-23T13:29:29","guid":{"rendered":"http:\/\/mansainfotech.com\/blog\/?p=429"},"modified":"2017-08-23T13:29:29","modified_gmt":"2017-08-23T13:29:29","slug":"bootstrap-the-most-popular-html-css-and-javascript-framework","status":"publish","type":"post","link":"https:\/\/mansainfotech.com\/blog\/bootstrap-the-most-popular-html-css-and-javascript-framework\/","title":{"rendered":"Bootstrap \u2013 The most popular HTML, CSS and JavaScript framework"},"content":{"rendered":"<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">If you are a techie or you\u2019re keen learning web development, then at some point, you\u2019ve heard of \u2018Bootstrap\u2019. Whether I\u2019m right or wrong, but, this post is specially designed for all folks who want to get a quick dive into the flawless world of <span style=\"text-decoration: underline;\">Twitter Bootstrap.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><i><b>A brief unfolding&#8230;<\/b><\/i><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">Originally developed by Mark Otto and Jacob Thornton at Twitter, Bootstrap was released as an open source product in August 2011. It is a free front-end framework which gives you responsibility for creating clean and organized responsive designs. <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><i><b>Quick facts&#8230;<\/b><\/i><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">\u27a8 Bootstrap is free to download and use.<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">\u27a8 It provides fast and easier development.<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">\u27a8 It includes Html &amp; Css based design templates.<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">\u27a8 It can make use of Javascript plug-ins.<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">\u27a8 Most important, It facilitates responsive development.<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><i><b>Why to use&#8230;<\/b><\/i><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">Make use of Bootstrap for followng reasons: <\/span><\/p>\n<ul>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">For letting your website adapt to various screen devices<\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">For adding consistency to design and code<\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">For quickly &amp; easily prototyping new designs<\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">For ensuring cross-browser compatability<\/span><\/p>\n<\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">And, anybody having basic knowledge of HTML and CSS can use Bootstrap. <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><i><b>What does responsive means&#8230;<\/b><\/i><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">Something can be called responsive if it typically adjusts itself to look good on all screen devices. For more in-depths, check out our previous blog post &#8211; <span style=\"color: #800000;\">\u2018Responsive Web Designing\u2019.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\"><i><b>From where you can get Bootstrap&#8230;<\/b><\/i><\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">You can start using Boostrap in two ways &#8211; <\/span><\/span><\/p>\n<ul>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">Download it from getbootstrap.com<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">Include bootstrap from CDN<\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\"><i><b>What does Boostrap package contains&#8230;<\/b><\/i><\/span><\/span><\/p>\n<ul>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">Grid systems, link styles and background<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">Global css settings, Html element style, advanced grid system<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">Reusable components such as dropdowns, navigations, pop-overs, alerts, etc.<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">Lot of custom Jquery plugins. <\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"color: #000000;\"><span style=\"font-family: Arial,sans-serif;\">And, you can typically customize everything in bootstrap to get your own style. <\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><i><b><span style=\"color: #000000;\">First Bootstrap example&#8230;<\/span><\/b><\/i><\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;!DOCTYPE html&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;html lang=&#8221;en&#8221;&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;head&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;title&gt;First Bootstrap example&lt;\/title&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1&#8243;&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css&#8221;&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/head&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;body&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;div class=&#8221;container&#8221;&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;h1&gt; First web page&lt;\/h1&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/div&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;script src=&#8221;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js&#8221;&gt;&lt;\/script&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;script src=&#8221;http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js&#8221;&gt;&lt;\/script&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/body&gt; <\/span><\/p>\n<p align=\"left\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/html&gt; <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">There are vast number of things to study in Bootstrap. You can follow the links here: <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><a href=\"https:\/\/getbootstrap.com\/\">https:\/\/getbootstrap.com\/<\/a> <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><a href=\"https:\/\/www.w3schools.com\/bootstrap\/default.asp\">https:\/\/www.w3schools.com\/bootstrap\/default.asp<\/a> <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><span style=\"text-decoration: underline;\">Out of all, Grid is the most important Bootstrap feature that we\u2019ll take into account here. So, what are grids actually? <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">The grid system of bootstrap adds up to 12 columns. You can use them individually or group together as one single unit. (to form wider column)<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><b>Bootstrap\u2019s Grid System has four main classes: <\/b><\/span><\/p>\n<ul>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">xs for phones<\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">sm for tablets<\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">md for desktop <\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">lg for large desktops<\/span><\/p>\n<\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">All these classes combine together to form much complex and flexible layouts. Let\u2019s run down to understand the basic structure of Bootstrap grid system: <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">&lt;div class=&#8221;row&#8221;&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"> &lt;div class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/div&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">&lt;div class=&#8221;row&#8221;&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"> &lt;div class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"> &lt;div class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/div&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">&lt;div class=&#8221;row&#8221;&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"> &#8230;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">&lt;\/div&gt;<\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">So, Thast\u2019s all about the Grid System. <\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\"><i><b>Wrapping Up&#8230;<\/b><\/i><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: Arial,sans-serif;\">Now, you must have gone a quick look of what Bootstrap is all about. It is easy to understand, reliable to implement and fast to customize. You can extensively use it to build and maintain your websites \u2013 responsive ready, browser friendly and completely free of cost. Looking forward to meet you with my another blog post. Till then, sayonara. \ud83d\ude42<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are a techie or you\u2019re keen learning web development, then at some point, you\u2019ve heard of \u2018Bootstrap\u2019. Whether I\u2019m right or wrong, but, this post is specially designed for all folks who want to get a quick dive into the flawless world of Twitter Bootstrap. A brief unfolding&#8230; &hellip; <a href=\"https:\/\/mansainfotech.com\/blog\/bootstrap-the-most-popular-html-css-and-javascript-framework\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Bootstrap \u2013 The most popular HTML, CSS and JavaScript framework<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-and-development"],"_links":{"self":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=429"}],"version-history":[{"count":0,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media\/431"}],"wp:attachment":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}