twitter bootstrap

24
Twitter Bootstrap MUHAMMAD AMIR – XAVOR LAHORE

Upload: muhammad-amir

Post on 20-Nov-2014

282 views

Category:

Technology


0 download

DESCRIPTION

Twitter Bootstrap

TRANSCRIPT

Page 1: Twitter Bootstrap

Twitter BootstrapMUHAMMAD AMIR – XAVOR LAHORE

Page 2: Twitter Bootstrap

Why Bootstrap?Effort/skills required in Website frontend designing

Difficulty in CSS based layout development/maintenance

Render differently across different browsers

Page 3: Twitter Bootstrap

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

Page 4: Twitter Bootstrap

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

Page 5: Twitter Bootstrap

What's included - Precompiled Bootstrap

Page 6: Twitter Bootstrap

What's included - source code

Page 7: Twitter Bootstrap

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).

Page 8: Twitter Bootstrap

What is Less - Variables

Page 9: Twitter Bootstrap

What is Less - Mixins

Page 10: Twitter Bootstrap

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)

Page 11: Twitter Bootstrap

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)

Page 12: Twitter Bootstrap

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

Page 13: Twitter Bootstrap

Let’s Do the trick Add container to wrap everything

<div class="container">

Add hearer

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

Page 14: Twitter Bootstrap

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>

Page 15: Twitter Bootstrap

Let’s Do the trickThis is how it looks like

Page 16: Twitter Bootstrap

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>

Page 17: Twitter Bootstrap

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>

Page 18: Twitter Bootstrap

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>

Page 19: Twitter Bootstrap

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>

Page 20: Twitter Bootstrap

Let’s Do the trick

Page 21: Twitter Bootstrap

Let’s Do the trickAdd the footer!

<hr>

<div class="footer">

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

</div>

Page 22: Twitter Bootstrap

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.

Page 23: Twitter Bootstrap

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>