Your SlideShare is downloading. ×
Twitter Bootstrap Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Twitter Bootstrap Presentation

1,499
views

Published on

Twitter Bootstrap presentation by Aneesh Alidina …

Twitter Bootstrap presentation by Aneesh Alidina
21st June 2013.
Learn how you can use Twitter Bootstrap to build beautiful websites and web apps.

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,499
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
114
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Twitter BootstrapA powerful front-end framework for faster and easierweb development and web apps.Aneesh Alidinawww.aneesh.co@aneeshalidina
  • 2. Developed Aug 2011 by small group of Twitter employees(Mark Otto and Jacob Thornton)Most popular Github project on the webBackground
  • 3. Provides a clean and uniform solution for building aninterface for developers.User Interface Framework (JS, CSS and Images)Open Source projectSupports all major browsers incl. IE7Supports HTML5 and CSS3Beautiful and functional built-in components whichare easy to customiseWhy should I use bootstrap?
  • 4. Twitter Bootstrap can be used to speed up website/appdevelopment process. It utilises LESS CSS (http://lesscss.org/)Dropdown menusButtonsNavbarsBreadcrumbsPaginationLabel and badgesThumbnailsCarouselAlerts and moreBootstrap Features
  • 5. Customise and downloadhttp://twitter.github.io/bootstrap/
  • 6. Bootstrap package whats includedScaffolding – background, link styles, grid systemBase CSS files – common style for HTML elements liketypography, code, tables, forms and icon setComponents – basic styles for common interface, liketabs, navbars, page headers etc.Javascript plugins – interactive components likepopovers, modals and more
  • 7. Bootstrap examples - homepage
  • 8. Bootstrap examples – landing page
  • 9. Bootstrap examples – forms
  • 10. Responsive 12 column grids, layouts and components<div class= “row”><div class = “span4”>…</div><div class = “span8”>…</div></div>Scaffolding: The Grid System
  • 11. To start, navbars are static (not fixed to the top) andinclude support for a project name and basic navigation.Place one anywhere within a .container, which sets thewidth of your site and content.<div class="navbar"><div class="navbar-inner"><a class="brand" href="#">Title</a><ul class="nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul></div></div>Using bootstrapBasic Navbar example
  • 12. Toyota.comNASA (http://code.nasa.gov/)1000’s websites and it’s also great for prototypingBootstrap with Joomla 3.0Personal websites: www.aneesh.coBuilt with bootstrap – who uses it
  • 13. Playground for bootstrap:http://www.bootply.com/Saving the world from default bootstrap:http://www.bootswatch.comWordpress Bootstrap:http://320press.com/wpbs/Cool Resources
  • 14. Questions?