Twitter Bootstrap
-
Upload
muhammad-amir -
Category
Technology
-
view
282 -
download
0
description
Transcript of Twitter Bootstrap
![Page 1: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/1.jpg)
Twitter BootstrapMUHAMMAD AMIR – XAVOR LAHORE
![Page 2: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/5.jpg)
What's included - Precompiled Bootstrap
![Page 6: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/6.jpg)
What's included - source code
![Page 7: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/8.jpg)
What is Less - Variables
![Page 9: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/9.jpg)
What is Less - Mixins
![Page 10: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/15.jpg)
Let’s Do the trickThis is how it looks like
![Page 16: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/20.jpg)
Let’s Do the trick
![Page 21: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/21.jpg)
Let’s Do the trickAdd the footer!
<hr>
<div class="footer">
<p>© Muhammad Amir - Xavor Lahore. 2013</p>
</div>
![Page 22: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/22.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/23.jpg)
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>
![Page 24: Twitter Bootstrap](https://reader033.fdocuments.in/reader033/viewer/2022061203/546d6389af7959693c8b62ed/html5/thumbnails/24.jpg)
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