Twitter BootstrapA powerful front-end framework for faster and easierweb development and web apps.Aneesh Alidinawww.aneesh...
Developed Aug 2011 by small group of Twitter employees(Mark Otto and Jacob Thornton)Most popular Github project on the web...
Provides a clean and uniform solution for building aninterface for developers.User Interface Framework (JS, CSS and Images...
Twitter Bootstrap can be used to speed up website/appdevelopment process. It utilises LESS CSS (http://lesscss.org/)Dropdo...
Customise and downloadhttp://twitter.github.io/bootstrap/
Bootstrap package whats includedScaffolding – background, link styles, grid systemBase CSS files – common style for HTML e...
Bootstrap examples - homepage
Bootstrap examples – landing page
Bootstrap examples – forms
Responsive 12 column grids, layouts and components<div class= “row”><div class = “span4”>…</div><div class = “span8”>…</di...
To start, navbars are static (not fixed to the top) andinclude support for a project name and basic navigation.Place one a...
Toyota.comNASA (http://code.nasa.gov/)1000’s websites and it’s also great for prototypingBootstrap with Joomla 3.0Personal...
Playground for bootstrap:http://www.bootply.com/Saving the world from default bootstrap:http://www.bootswatch.comWordpress...
Questions?
Upcoming SlideShare
Loading in...5
×

Twitter Bootstrap Presentation

1,636

Published on

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,636
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
116
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Twitter Bootstrap Presentation

  1. 1. Twitter BootstrapA powerful front-end framework for faster and easierweb development and web apps.Aneesh Alidinawww.aneesh.co@aneeshalidina
  2. 2. Developed Aug 2011 by small group of Twitter employees(Mark Otto and Jacob Thornton)Most popular Github project on the webBackground
  3. 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. 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. 5. Customise and downloadhttp://twitter.github.io/bootstrap/
  6. 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. 7. Bootstrap examples - homepage
  8. 8. Bootstrap examples – landing page
  9. 9. Bootstrap examples – forms
  10. 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. 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. 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. 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. 14. Questions?
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×