Designing a website is always a challenge for any web developer or individual. But in recent times the evolution of good software editors like Eclipse and Dreamweaver has changed the web designing process with its advanced features. Nowadays developers won’t need to write(hard coded) whole HTML or JavaScript code to develop web applications. The drag and drop feature in editors has completely changed the coding behavior for developers. Now developers can develop beautiful websites,blogs with just few clicks. Even this is a useful feature for any non-technical person.
But the variations in display devices poses few challenges in front of developers. Nowadays clients demands more responsive and easy navigational web applications. They demands to reach wide audience with their flexible web layouts, which can adapt itself according to display devices. So to overcome this issue developers coined few front-end framework for web applications. In this article i mentioned Bootstrap which is the most popular front-end framework and widely used by developers to develop responsive web applications.
Note: Bootstrap is a fully CSS driven front-end framework. It allows responsive web design and 12-column, 940px wide grid.
Bootstrap in nutshell:
Bootstrap is a open source front-end framework developed by Mark Otto and Jacob Thornton. Both were the employees of twitter. This framework was designed to give responsive touch and better user interface to web layouts. Bootstrap is compatible with all browsers, which means anyone can create cross browser user interface with bootstrap.
How bootstrap works
Bootstrap comes in .zip file with three folders named as css,js and img. Each folder contains required files for web layouts to work smoothly. Users need to understand the bootstrap directory structure to use in any project. Bootstrap directory structure contains three folders such as:
a) css: This folder contains required styles to customize bootstrap according to the project needs. It contains bootstrap.css and bootstrap.min.css. Among of them we use bootstrap.css to customize the properties of the web layouts.
Note: Use minified version of all files in real time(when web application is live), as it increases downloading speed of website.
b) js: Boostrap uses several JavaScript components in the form of jquery plugins. So as resulted this folder contains two javascript files such as bootstrap.js and bootstrap.min.js. It provides and extends the existing functionality of some existing components. It also provides additional user interface components such as dialog boxes,carousels,tooltips and many more.
c) img: This folder includes two .png files, which is used by bootstrap by default. User can customize this folder according to their project needs.
Note: Use “<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>” in any bootstrap project to give responsive touch to web layouts.
Bootstrap default styles:
Bootstrap comes with few default behavior for any project. Developers can change these default styles, according to the their project needs.
- Bootstrap uses the @baseFontSize, @baseFontFamily and @baseLineHeight attributes by default.
- @linkColor is the global link color with link underlines(on hover) in bootstrap.
- “White” is the default background color in bootstrap. Developers can easily change this according to their required colors.
- In bootstrap “margin” property has been removed so as resulted all content touch browser edges by default.
Note: Users can download latest version of bootstrap at: http://getbootstrap.com/ . Users are also advised to stay updated with the latest versions of bootstrap to embed extra features in your web projects.
Uploaded by: Author