top_menu

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

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">
<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
Twitter Bootstrap Labels and Badges

7 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Wow. This really made my day. Thanks a lot!

    JavaScript Online Training JavaScript Online Training JQuery Online Training JQuery Online Training
    JavaScript Course | HTML5 Online Training

    ReplyDelete
  3. Responsive Web Design Twitter Bootstrap Mobile First Development Bootstrap Training Bootstrap Training in Chennai Bootstrap Training in Chennai Bootstrap Online Training Bootstrap Online Training JavaScript Training Courses JavaScript Training Courses

    ReplyDelete

  4. الشرق الاوسط من اهم شركات نقل العفش بالدمام متحصصه فى نقل عفش واثاث بالدمام ونقل العفش بالخبر كما انها توفر شركة نقل عفش بالجبيل والخبر وشركة نقل عفش بالقطيف والاحساء وجميع خدمات نقل العفش والاثاث بالمنطقة الشرقية بارخص اسعار نقل عفش بالدمام وتقدم ايضا شركة تخزين عفش بالدمام والخبر
    شركة الشرق الاوسط
    شركة نقل اثاث بالدمام
    شركة نقل اثاث بالخبر
    شركة نقل اثاث بالجبيل
    شركة نقل عفش بالخبر
    شركة نقل عفش بالقطيف
    شركة نقل اثاث بالاحساء
    شركة نقل عفش الجبيل
    شركة نقل عفش بالدمام

    ReplyDelete
  5. كما انها متخصصه فى النظافة وتنظيف المنازل ونظافة بالدمام والشقق والبيوت والفلل والكنب بالدمام
    شركة غسيل كنب بالدمام
    شركة تنظيف كنب بالدمام
    شركة غسيل خزانات بالدمام
    شركة مكافحة حشرات بالدمام
    شركة نظافه عامه بالدمام

    ReplyDelete