twitter bootstrap
DESCRIPTION
Twitter BootstrapTRANSCRIPT
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>© 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