Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive web design bootstrap and media queries

5,031 views

Published on

This slide contain a brief introduction about
1. Responsive web design
2. Bootstrap
3. Media queries

Published in: Software
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive web design bootstrap and media queries

  1. 1. RESPONSIVE WEB DESIGN TWITTER BOOTSTRAP 3 CSS MEDIA QUERIES
  2. 2. CONTENTS • What is Responsive Web Design? • What is Twitter Bootstrap 3? • Why Twitter Bootstrap 3? • What is Twitter Bootstrap grid system? • What is Media Queries? • Why to use media queries? • How to use media queries? • What are the standard responsive screen resolutions?
  3. 3. WHAT IS RESPONSIVE WEB DESIGN? • Ethan Marcotte. • Fluid grids, flexible images, and media queries. • Better accessibility and optimal viewing experience. • Target a wide range of devices with much less efforts.
  4. 4. WHAT IS TWITTER BOOTSTRAP 3? • Most popular HTML, CSS, and JS framework. • Create responsive layout with much less efforts. • Four tiers grids classes. • Mobile first. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  5. 5. WHY TWITTER BOOTSTRAP 3? • Mobile first approach. • Browser support. • Easy to get started. • Responsive web design. Google Chrome Mozilla Firefox Internet Explorer Apple Safari Opera
  6. 6. WHAT IS TWITTER BOOTSTRAP GRID SYSTEM? • The fastest and easy way to create layouts of web pages. • Create page layouts through a series of rows and columns. • The responsive mobile first fluid grid system. • .col-xs- * Smartphone • .col-sm- * Tablet • .col-md-* Desktop • .col-lg-* Large desktop screen
  7. 7. BASIC GRID STRUCTURE <div class=“container”> <div class=“row”> <div class=“col-lg-3 col-md-4 col-sm-6 col-xs-12”> </div> </div> </div>
  8. 8. <div class="container">...</div> .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } <div class="row">...</div> <div class="col-md-*"></div> • Every row in the grid is made up of 12 units. • Experiment and make sure that the sum always needs to be 12.
  9. 9. WHAT IS MEDIA QUERIES? • Customize the presentation. • An excellent way to create responsive layout.
  10. 10. @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : portrait) {} @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : landscape) {} IPHONE 5 iPhone 5 Landscape iPhone 5 Portrait
  11. 11. @media screen and (min-width: 360px) and (max-width: 736px) and (orientation : portrait) {} @media screen and (min-width: 360px) and (max-width: 736px) and (orientation : landscape) {} IPHONE 6 iPhone 6 Portrait iPhone 6 Landscape
  12. 12. SAMSUNG TAB @media screen and (min-width: 533px) and (max-width: 768px) and (orientation : portrait) {} @media screen and (min-width: 533px) and (max-width: 768px) and (orientation : landscape) {} Samsung Tab Portrait Samsung Tab Landscape
  13. 13. @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) { } @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) { } IPAD iPad Portrait iPad Landscape
  14. 14. /*Desktop View*/ /*Header*/ /*End Header*/ /*Navigation bar*/ /*End Navigation bar*/ /*Body*/ /*End Body*/ /*Footer*/ /*End Footer*/ /*End Desktop View*/
  15. 15. /*For smartphone portrait*/ @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : portrait) { /*Header*/ /*End Header*/ /*Body*/ /*End Body*/ /*Footer*/ /*End Footer*/ } /*For smartphone landscape*/ @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : landscape) { /*Header*/ /*End Header*/ /*Body*/ /*End Body*/ /*Footer*/ /*End Footer*/ }
  16. 16. @media screen and (min-width: 800px) and (max-width: 1280px) and (orientation : portrait) {} @media screen and (min-width: 800px) and (max-width: 1280px) and (orientation : landscape) {} @media screen and (min-width: 900px) and (max-width: 1440px) {} @media screen and (min-width: 600px) and (max-width: 1024px) {} @media screen and (min-width: 1025px) and (max-width: 1280px) {} @media screen and (min-width: 1281px) and (max-width: 1366px) {} @media screen and (min-width: 1367px) and (max-width: 1440px) {} @media screen and (min-width: 1441px) and (max-width: 1600px) {} @media screen and (min-width: 1601px) and (max-width: 1680px) {} @media screen and (min-width: 1681px) and (max-width: 1920px) {} MEDIA QUERIES DECLARATIONS FOR LARGE SCREEN DEVICES
  17. 17. Thank You!
  18. 18. Any Questions?

×