Your SlideShare is downloading. ×
0
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
Twitter Bootstrap Presentation
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,595

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,595
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
116
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?

×