Twitter Bootstrap

Twitter BootstrapMUHAMMAD AMIR – XAVOR LAHORE

Why Bootstrap?Effort/skills required in Website frontend designing

Difficulty in CSS based layout development/maintenance

Render differently across different browsers

What is Bootstrap?Boon for web developers with zero designing knowledge

Front end framework to develop web apps and sites really fast

Covers all basic & common modules used in web projects

Easy to customize

Built to work best in the latest desktop and mobile browsers

Very lightweight – it can be as little as just one CSS and one JS file

Very low learning curve

Getting Started!Download according to skills level and requirement

Download Precompiled Bootstrap

Download Source Code containing latest Bootstrap Less & Javascript

Version Used: Boorstrap2.3.2

What's included - Precompiled Bootstrap

What's included - source code

What is Less?The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

What is Less - Variables

What is Less - Mixins

Supported BrowsersChrome (Mac, Windows, iOS, and Android)

Safari (Mac and iOS only, as the Windows version is being abandoned)

Firefox (Mac, Windows)

Internet Explorer IE 8 & IE 9 don’t support some CSS3 properties and HTML5 elements, use Respond.js for them

Opera (Mac, Windows)

Supported BrowsersChrome (Mac, Windows, iOS, and Android)

Safari (Mac and iOS only, as the Windows version is being abandoned)

Firefox (Mac, Windows)

Internet Explorer IE 8 & IE 9 don’t support some CSS3 properties and HTML5 elements, use Respond.js for them

Opera (Mac, Windows)

Let’s Do the trickLet us divide the demo page into five major parts:

1. The header

2. The marketing area

3. The left side bar

4. The contents area

5. The footer

Header

Marketing Area

Left Side Bar Content Area

Footer

Let’s Do the trick Add container to wrap everything

<div class="container">

Add hearer

<h1><a href="#">Bootstrap Site</a></h1>

Let’s Do the trick Add navigation <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>

Let’s Do the trickThis is how it looks like

Let’s Do the trick Add marketing stuff <div class="hero-unit">

<h1>Marketing stuff!</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<a href="#" class="btn btn-large btn-success">Get Started</a>

</div>

Let’s Do the trickTwelve span concept!

<div class="row">

<div class="span4">

<p>Dummy Text</p>

</div>

<div class="span8">

<p>Dummy Text</p>

</div>

</div>

Let’s Do the trickNavigation list, and content area <div class="span4"> <ul class="nav nav-list"> <li class="nav-header">What we are?</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li class="nav-header">Our Friend</li> <li><a href="#">Google</a></li> <li><a href="#">Yahoo!</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Microsoft</a></li> <li><a href="#">Gadgetic World</a></li> </ul> </div>

Let’s Do the trickMore we can add! <div class="row"> <div class="span4"> <h4 class="muted text-center">Meet Our Clients</h4> <p>Donec id elit.</p> <a href="#" class="btn"><i class="icon-user"></i>Our Clients</a> </div> <div class="span4"> <h4 class="muted text-center">Know Our Employees</h4> <p>Donec id elit non.</p> <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i>Our Employees</a>

</div> <div class="span4"> <h4 class="muted text-center">Reach Us</h4> <p>Donec id elit non mi.</p> <a href="#" class="btn btn-info">Contact Us</a> </div> </div>

Let’s Do the trick

Let’s Do the trickAdd the footer!

<hr>

<div class="footer">

<p>&copy; Muhammad Amir - Xavor Lahore. 2013</p>

</div>

Some more Important ComponentsLead Paragraphs - add class “lead”

Emphasis Tags - use the default Emphasis tags like <small>, <strong> and <em>

Text aligning - using the classes: “text-left”, “text-center” and “text-right”

Text colors - “muted” for grey, “text-warning” for red, “text-error” for deep maroon, “text-info” for light blue and “text-success” for green color

Styling Tables – add class “table”

Playing with images - “img-rounded” for rounded corners, “img-circle” for circling the image and “img-polaroid” to give box-shadow and border radius to the image.

Some more Important Components

Drop down menu

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

<i class="icon-th-large"></i>Drop Down

<b class="caret"></b>

</a>

<ul class="dropdown-menu">

<li><a href="#">Item1</a></li>

<li><a href="#">Item2</a></li>

<li><a href="#">Item3</a></li>

</ul>

</li>

Linkshttp://getbootstrap.com/getting-started/

http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

http://getbootstrap.com/2.3.2/getting-started.html

http://www.w3resource.com/twitter-bootstrap/tutorial.php

http://www.lesscss.org