Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Presentation of bootstrap

•Download as PPTX, PDF•
•
1amitgupta
1amitgupta

This document provides an overview and introduction to responsive design using Bootstrap. It defines responsive design as designs that work on any resolution and are user friendly. It explains Bootstrap's grid system and standard device resolutions for extra small, small, medium, and large devices. Key Bootstrap components are summarized like the grid system, Glyphicons, and JavaScript plugins. The basic differences between HTML, CSS, and Bootstrap are outlined. Finally, the main purposes of using Bootstrap are listed as decreasing costs and code while providing an excellent and understandable user experience.

1 of 16
RESONSIVE DESIGN with BOOTSTRAP Presented by: Amit Kumar Gupta Design Group
INTRODUCTION • Bootstrap is an Open-Source front-end Frame-work. • Bootstrap 4.0.0 is the current version of bootstrap • It is for creating responsive websites and web applications. • It contains HTML ,CSS and Javascript. • Bootstrap Official Address (https://getbootstrap.com/). • Mobile-first approach • Single (responsive) grid system
What is Responsive Design ?  The design that works properly on any resolution .  It majorly concerns with standard devices resolutions.  User friendly approach.
Bootstrap standard devices resolution?  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).
RESPONSIVE DESIGN ALL DEVICES
What is the most 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.
Bootstrap Grid System Example :
Bootstrap Glyphicons :  These are SVG , scalable vectors graphics .  Around 260 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>
For more Bootstrap Glyph-icons, visit : http://getbootstrap.com/components/#glyphicons
Bootstrap other components :  Dropdown  Button Group  Navigations  Pagination  Thumbnails  Alerts  Progress Bars  Panels … etc. for all components visit(http://getbootstrap.com/components/)
Bootstrap CSS:  Tables  Forms  Buttons  Images  Helper Classes .. etc. for more (http://getbootstrap.com/css/).
Bootstrap JavaScript:  Bootstrap all JavaScript components require jQuery. These are :  Modals  Dropdown  Popover  Alert  Collapse  Carousal  Tool tip .. etc. for more visit (http://getbootstrap.com/javascript/).
Basic Difference between HTML,CSS,BOOTSTRAP I AM HTML I AM HTML AND CSS I AM HTML,CSSJAVASCRIPT (BOOTSTRAP) EXAMPLE BELOW
EXAMPLE OF HTML,CSS,BOOTSTRAP I AM BOOSTRAP
Purpose of Bootstrap  Decrease cost of website  Save time  Excellent look and fell  Decrease code of line  Maximum use of code  It is easy and not complex code (it is understood non programmer)  It consume low space which help to execute fast in server
THANK YOU ??

More Related Content

Presentation of bootstrap

  • 1. RESONSIVE DESIGN with BOOTSTRAP Presented by: Amit Kumar Gupta Design Group
  • 2. INTRODUCTION • Bootstrap is an Open-Source front-end Frame-work. • Bootstrap 4.0.0 is the current version of bootstrap • It is for creating responsive websites and web applications. • It contains HTML ,CSS and Javascript. • Bootstrap Official Address (https://getbootstrap.com/). • Mobile-first approach • Single (responsive) grid system
  • 3. What is Responsive Design ?  The design that works properly on any resolution .  It majorly concerns with standard devices resolutions.  User friendly approach.
  • 4. Bootstrap standard devices resolution?  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 the most 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.
  • 8. Bootstrap Glyphicons :  These are SVG , scalable vectors graphics .  Around 260 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 Bootstrap Glyph-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:  Bootstrap all JavaScript components require jQuery. These are :  Modals  Dropdown  Popover  Alert  Collapse  Carousal  Tool tip .. etc. for more visit (http://getbootstrap.com/javascript/).
  • 13. Basic Difference between HTML,CSS,BOOTSTRAP I AM HTML I AM HTML AND CSS I AM HTML,CSSJAVASCRIPT (BOOTSTRAP) EXAMPLE BELOW
  • 15. Purpose of Bootstrap  Decrease cost of website  Save time  Excellent look and fell  Decrease code of line  Maximum use of code  It is easy and not complex code (it is understood non programmer)  It consume low space which help to execute fast in server