Twitter Bootstrap Presentation
-
Upload
aneeshalidina -
Category
Technology
-
view
1.431 -
download
1
description
Transcript of Twitter Bootstrap Presentation
Twitter BootstrapA powerful front-end framework for faster and
easier web 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 web
Background
Provides a clean and uniform solution for building an interface for developers.
User Interface Framework (JS, CSS and Images)
Open Source project Supports all major browsers incl. IE7 Supports HTML5 and CSS3 Beautiful and functional built-in components which
are easy to customise
Why should I use bootstrap?
Twitter Bootstrap can be used to speed up website/app development process. It utilises LESS CSS (http://lesscss.org/)
Dropdown menus Buttons Navbars Breadcrumbs Pagination Label and badges Thumbnails Carousel Alerts and more
Bootstrap Features
Customise and download
http://twitter.github.io/bootstrap/
Bootstrap package whats included
Scaffolding – background, link styles, grid system
Base CSS files – common style for HTML elements like typography, code, tables, forms and icon set
Components – basic styles for common interface, like tabs, navbars, page headers etc.
Javascript plugins – interactive components like popovers, 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) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width 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.com NASA (http://code.nasa.gov/) 1000’s websites and it’s also great for
prototyping Bootstrap with Joomla 3.0 Personal websites: www.aneesh.co
Built with bootstrap – who uses it
Playground for bootstrap: http://www.bootply.com/
Saving the world from default bootstrap: http://www.bootswatch.com
Wordpress Bootstrap: http://320press.com/wpbs/
Cool Resources
Questions?