Get the complete Tutorial On Nyxinfotech.in
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. To solve this fundamental problem we have “Responsive web design”.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, BlackBerry, netbook or Kindle the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Twitter Bootstrap is one of the most popular front end frameworks for responsive design. This tutorial will get you started with Twitter Bootstrap v3.0.0.
What is Twitter Bootstrap?
Twitter Bootstrap is a front end framework for fast development of web sites and applications. There are several components which are required in almost all web projects such as Forms, buttons, grids, tables, typography. Bootstrap provides you with all those basic modules. Besides, there are many other useful front end components like Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal, Breadcrumb, Tab, Thumbnails, Headers etc. With these you can make a web project up and running quickly and easily.
Twitter Bootstrap can be easily customized to meet one’s needs thanks to its module based framework.
Download Bootstrap: https://github.com/twbs/bootstrap/archive/v3.0.0.zip
After you download and extract the package you will get the following:
The bootstrap.css and bootstrap.js are non-minified versions of the CSS and JS files and may be deleted unless you want to customize any of the bootstrap code. The minified versions are smaller in size and ready for deployment.
Copy the css, img and js folders into the root directory/folder (root= the folder where all the html files will be stored).
This is what the root will look like once we have created an index.html (homepage) of our site.
Getting Started: Following is the basic structure of our project
Note the JS files are put at the bottom of the HTML because they don’t block page rendering and CSS loading time. You can check the ySlow and Google PageSpeed rules for fast loading websites and page optimization.
Check Out the Complete Tutorial and More info on nyxinfotech Twitter Bootstrap Tutorials
IamShastri 