Twitter Bootstrap Presentation

14
Twitter Bootstrap A powerful front-end framework for faster and easier web development and web apps. Aneesh Alidina www.aneesh.co @aneeshalidina

description

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

Transcript of Twitter Bootstrap Presentation

Page 1: Twitter Bootstrap Presentation

Twitter BootstrapA powerful front-end framework for faster and

easier web development and web apps.

Aneesh Alidinawww.aneesh.co@aneeshalidina

Page 2: Twitter Bootstrap Presentation

Developed Aug 2011 by small group of Twitter employees (Mark Otto and Jacob Thornton)

Most popular Github project on the web

Background

Page 3: Twitter Bootstrap Presentation

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?

Page 4: Twitter Bootstrap Presentation

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

Page 5: Twitter Bootstrap Presentation

Customise and download

http://twitter.github.io/bootstrap/

Page 6: Twitter Bootstrap Presentation

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

Page 7: Twitter Bootstrap Presentation

Bootstrap examples - homepage

Page 8: Twitter Bootstrap Presentation

Bootstrap examples – landing page

Page 9: Twitter Bootstrap Presentation

Bootstrap examples – forms

Page 10: Twitter Bootstrap Presentation

Responsive 12 column grids, layouts and components

<div class= “row”><div class = “span4”>…</div><div class = “span8”>…</div></div>

Scaffolding: The Grid System

Page 11: Twitter Bootstrap Presentation

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

Page 12: Twitter Bootstrap Presentation

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

Page 13: Twitter Bootstrap Presentation

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

Page 14: Twitter Bootstrap Presentation

Questions?