Bootstrap.js Session 1
Twitter’s bootstrap is an excellent toolkit to develop web apps and sites quickly. It includes simple HTML, CSS and JavaScript tools for creating Alerts, Forms, layouts, Navigation, and Popovers, Tables, Typography, etc.
Advantages of using Bootstrap
There are many benefits of using Twitter’s Bootstrap and one of the benefits is:
The User Interface CSS Styles
Typography elements like quotes, headings, lists are actual included styles, flexible styles for tables and also very attractive form designs and buttons.
Extend Bootstrap with LESS
One of the additional benefits to use Bootstrap is because it’s enhanced through LESS preprocessor, so more efficient and faster coding in CSS.
Integrated JavaScript Plugins
While there are many plugins out there to choose from, styling them and making them look integrated can take a long time. With Bootstrap it comes with everything from modal windows, flexible alert messages, carousels, tooltips and other fun JavaScript effects that are now a must have and provides a basic interactive layer on top of the included styles.
Integrating Bootstrap into project
1) We can download latest bootstrap code from the below website
http://twitter.github.io/bootstrap/index.html
2) Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. Bootstrap will provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.
Please note that all JavaScript plugins require jQuery to be included.
Including Bootstrap into HTML File
To make this a Bootstrapped template, just include the appropriate CSS and JS files:
Features of bootstrap
1) Grid System
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
Basic grid HTML
If we want a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each.span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row">
<div class="span4"></div>
<div class="span8"></div>
</div>
Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.
Offsetting columns
This feature will Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>
2) Responsive design
it is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions.
