Bootstrap is very good and simple to use technology for making your website Mobile Compatible . It helps to make your website compatible with every you open it . Regardless of the screen size where we opens the website it provides full Responsiveness
Bootstrap File Structure
Bootstrap File Structure
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
BootStrap Online File Links
For Making your website Responsive using Bootstrap Technology You require some css , js coded files you can then use classes defined in these files to make your website responsive you can either download these files from links below or you can directly provide these links in <head > </head> Tag of your Html or jsp or aspx file .
For using Offline files :-
Go to links below one by one and this will open css code save the files with their respective names and then reference them in your page <head></head> Tag
For using Online Files :-
Just include the following code lines in your page's <head></head> Tag
A Simple Sample of Bootstrap Html Page Below :-
Bootstrap 101 Template Hello, world!
Grid System In Bootstrap
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Bootstrap's Grid system has done a lot of ease for developers Instead of doing calculations for div's like they do before bootstrap technology they can easily divide the page into columns and rows and design the page according to it .
Here's how the Bootstrap grid system works:
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. A container will contain all your divs
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
- The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
- If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Reference Links 1. http://getbootstrap.com/ 2. http://getbootstrap.com/css/