• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Twitter Bootstrap Presentation
 

Twitter Bootstrap Presentation

on

  • 1,610 views

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.

Statistics

Views

Total Views
1,610
Views on SlideShare
1,596
Embed Views
14

Actions

Likes
0
Downloads
75
Comments
0

2 Embeds 14

http://aneesh.co 8
http://www.aneesh.co 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Twitter Bootstrap Presentation Twitter Bootstrap Presentation Presentation Transcript

    • Twitter BootstrapA powerful front-end framework for faster and easierweb development and web apps.Aneesh Alidinawww.aneesh.co@aneeshalidina
    • Developed Aug 2011 by small group of Twitter employees(Mark Otto and Jacob Thornton)Most popular Github project on the webBackground
    • 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?
    • 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
    • Customise and downloadhttp://twitter.github.io/bootstrap/
    • 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
    • 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”>…</div></div>Scaffolding: The Grid System
    • 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
    • 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
    • Playground for bootstrap:http://www.bootply.com/Saving the world from default bootstrap:http://www.bootswatch.comWordpress Bootstrap:http://320press.com/wpbs/Cool Resources
    • Questions?