Responsive web-design through bootstrap

Responsive web-design through bootstrap

• 1.
  RESONSIVE DESIGN with BOOTSTRAP ZUNAIRZAKIR Presented By & TAHA SHAHID
• 2.
  INTRODUCTION • Bootstrap isan Open-Source front-end Frame-work. • Bootstrap 3.1.1 is the current version of bootstrap • It is for creating responsive websites and web applications. • It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. • It is the No.1 project on Github with 65,000+ stars and 23,800 forks (as of March 2014)(http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)). • Bootstrap Official Address (http://getbootstrap.com/ ).
• 3.
  What’s new inBootstrap 3.1.1 ?  Mobile-first approach  Single (responsive) grid system  Dropping support for IE7 and FF 3.6  Now supporting IE8 and higher  Font icons
• 4.
  What is ResponsiveDesign ?  The design that works properly on any resolution .  It majorly concerns with standard devices resolutions.  User friendly approach.
• 5.
  Bootstrap standard devicesresolution?  Extra small devices i.e Phones (<768px),Symbol (-xs-),column width(Auto).  Small devices i.e Tablets (≥768px),Symbol (-sm-),column width(60px).  Medium devices i.e Desktop (≥992px),Symbol (-md-),column width(78px).  Large devices i.e Desktop (≥1200px),Symbol (-lg-),column width(95px).
• 6.
  What is themost important thing to understand in Bootstrap? Grid System  Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.  Grid systems are used for creating page layouts through a series of rows and columns that house your content.  Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any - md- class to an element will not only affect its styling on medium devices but also on large devices if a -lg- class is not present.
• 7.
  Bootstrap Grid SystemExample :
• 8.
  Bootstrap Glyphicons : These are SVG , scalable vectors graphics .  Around 200 icons are available for free with bootstrap.  How to use  For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding. <div> <span class="glyphicon glyphicon-search"></span> </div>
• 9.
  For more BootstrapGlyph-icons, visit : http://getbootstrap.com/components/#glyphicons
• 10.
  Bootstrap other components:  Dropdown  Button Group  Navigations  Pagination  Thumbnails  Alerts  Progress Bars  Panels … etc. for all components visit(http://getbootstrap.com/components/)
• 11.
  Bootstrap CSS:  Tables Forms  Buttons  Images  Helper Classes .. etc. for more (http://getbootstrap.com/css/).
• 12.
  Bootstrap JavaScript:  Bootstrapall JavaScript components require jQuery. These are :  Modals  Dropdown  Popover  Alert  Collapse  Carousal  Tool tip .. etc. for more visit (http://getbootstrap.com/javascript/).
• 13.
  Starting Demo ..
• 14.
  CONTACT INFORMATION: ZUNAIR ZAKIR •0313-7194488 •zunair_zakir@yahoo.com TAHASHAHID •03332577562 •m.tahashahid@yahoo.com THANK YOU