Working with Twitter Bootstrap

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 https://github.com/twitter/bootstrap.

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

<html lang="en">
<head>

<title>Page Title</title>

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

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>

Examples
------------------------------
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

top_menu

Wednesday, 13 March 2013

Working with Twitter Bootstrap - Simple Lessons

1 comment: