© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Building Responsive Websites with Bootstrap
@WinWire
Wired2Win Webinar Series
© 2010 WinWire Technologies
Who We Are
IT solutions company
making information
actionable for the
enterprises in the
mobile-cloud world
Collaborative and
Analytics solutions
leveraging pre-built
solution accelerators
Cloud,
Collaboration &
Analytics Technologies
Mobility,
© 2010 WinWire Technologies
Session Speaker
Building Responsive Websites with
Bootstrap
Heemanshu Dave Technical Architect
WinWire Technologies
© 2010 WinWire Technologies
Agenda
Introduction to Bootstrap
Introduction to Responsive Web Design (RWD)
Demo
© 2010 WinWire Technologies
Introduction Responsive Web Design (RWD)
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.
What is RWD?
© 2010 WinWire Technologies
Elements in Responsive Web Design (RWD)
Media
Queries
Flexible
Images
Flexible
Layouts
© 2010 WinWire Technologies
Introduction Bootstrap
Developed by Mark Otto and
Jacob Thornton at Twitter
History
Framework to encourage
consistency across internal tools
© 2010 WinWire Technologies
Introduction Bootstrap
• Bootstrap is an CSS framework that provides many interface
elements, layouts, and jQuery plugins.
• Bootstrap is open source.
• It contains HTML and CSS-based design templates for typography,
forms, buttons, navigation and other interface components, as well as
optional JavaScript extensions.
What is Bootstrap
© 2010 WinWire Technologies
Features of Bootstrap
Mobile-FirstSupport useful
jQuery plugins
Easy to
Customize
Encourages using
LESS
Cross-Browser
Support
© 2010 WinWire Technologies
Bootstrap download
http://getbootstrap.com/
© 2010 WinWire Technologies
Demo
© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential
Reach out to us at [email protected]
Visit us: www.winwire.com
http://www.winwire.com/winwire-blog/
www.twitter.com/winwire
Thank You
Recommended
