Smartphones and tablets have strongly inundated the talk of the town! Once a delightful possession of gizmo freaks, mobiles and tablets are commonplace today and their sales are only growing untamed! In this era, it becomes imperative to restructure websites and pave way for prolific mobile responsive outlook.
Bootstrap - An Open Source Framework!
Now keep these files in a folder 'bootstrap3' and create a sub-folder called 'Includes'; create two more sub-folders inside and name them 'bootstrap' and 'jquery'.
Finally, create a blank index.html file within the folder 'bootstrap3'.
Create A Responsive HTML Document
It is important to set a proper character encoding, so as to prevent issues pertaining to texts displayed, first. Then, you need to code aptly so that the mobile or tab gauges and understands how to display a web-page!
Creating Header and Navigation Bar With BootStrap
Twitter Bootstrap 3 comes with predefined CSS classes that help in creation of Navigation menus and bars. In the code, you must use HTML5 tags for header and navigation tags. A navbar-toggle class is present that helps to toggle a menu, thus saving space! Moreover, there is a container class that wraps the holistic header content is resized with accordance to the variable widths obtained through the queries, based on the detected viewport sizes.
Coding the container class in apt ways helps in adding banners to the web-templates, quite easily.
Generating Responsive Content Areas Using Bootstrap
Twitter Bootstrap deftly uses a 12-column-grid system, allowing the developer to create a wide gamut of responsive grids and column-designs. The Container class keeps contents inline.
Screens are created using 'md-medium for narrower desktops';'sm-small for tablets'; 'xs-extra small for phones'; 'lg-large for desktops larger than 1200px' grid options.
Stacked navigation menus can be produced using nav, nav-pills and nav-stacked classes.
Using this grid system, responsive three-sectioned footers can be added to the template.
You can also add your own style or theme to the style.css file and use it to generate stunning responsive designs using Twitter Bootstrap.