Embed Size (px)
DESCRIPTION
Building a responsive site adds new challenges for web designers and developers. They need to consider various aspects while building the framework, such as image scaling, and user interface components such as column shrinks and shifts, navigation bars, tabs, and carousels responding to varying screen sizes. Web designers and developers look for a solution that will make front-end web development faster and easier; and is made for devices of all shapes, and projects of all sizes. Bootstrap is solution to that. This session covers the following - Responsive Web Design - Bootstrap - Using Bootstrap with MVC/ASP.Net
Citation preview
© 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
