Wednesday, 13 March 2013

Working with Twitter Bootstrap - Simple Lessons


Twitter Bootstrap is a great tool for web designers which makes the life of a developer/designer easy by already implementing all those designing needs within it. It says designed for everyone, everywhere. It looks great as well. Most important part is it supports responsive web design for tablets and mobiles.

You may download Twitter Bootstrap Project from

Working with Twitter Bootstrap
Lets Start
We just need to include two CSS file bootstrap.css and bootstrap-responsive.css to our application.

<html lang="en">

<title>Page Title</title>

<link href="assets/css/bootstrap.css" rel="stylesheet"></link>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"></link>
// Webpage layout design.

The Javascript files to be included to enable it to add some primary javascript functionalities like validation, dropdowns and animations

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>

The bootstrap components are designed to easily integrate into our HTML coding. Lets try some of those

Labels and badges
Twitter Bootstrap Labels and Badges
Twitter Bootstrap Labels and Badges