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.

Stop reinventing the wheel: Build Responsive Websites Using Bootstrap

8,336 views

Published on

Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.

Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI

Published in: Design
  • Be the first to comment

Stop reinventing the wheel: Build Responsive Websites Using Bootstrap

  1. 1. Stop Reinventing the Wheel Build Responsive Websites Using Bootstrap Framework Gaurav Gupta HighEdWeb Conference, October 5, 2015 #DPA3 @FrshBakedPixels
  2. 2. #DPA3
 
 @FrshBakedPixels

  3. 3. about me IT Analyst Division of Learning Innovation and Student Success Virginia Commonwealth University #DPA3 @FrshBakedPixels
  4. 4. evolution of web design
  5. 5. Table Div + Float Grid Responsive
 Web Design
  6. 6. float:none float:left float: right Table Div + Float Grid Responsive
 Web Design
  7. 7. 12 columns 4 columns 6 columns 6 columns 4 columns 4 columns Table Div + Float Grid Responsive
 Web Design
  8. 8. 1 2 3 Table Div + Float Grid Responsive
 Web Design
  9. 9. 1 2 3 Table Div + Float Grid Responsive
 Web Design
  10. 10. Media queries Responsive grid Responsive images
  11. 11. desktop mobile
  12. 12. Media queries Responsive grid Responsive images
  13. 13. responsive navigation desktop mobile
  14. 14. responsive forms desktop mobile
  15. 15. responsive media embed desktop mobile
  16. 16. #DPA3 @FrshBakedPixels
  17. 17. CSS and JavaScript framework Originally developed by Twitter Made open source in October 2011 Currently Version 3.3.5 #DPA3 @FrshBakedPixels
  18. 18. why Bootstrap #DPA3 @FrshBakedPixels
  19. 19. wide browser and
 device support
  20. 20. re-usable components
  21. 21. standardized code
  22. 22. open-source and
 customizable
  23. 23. thoroughly tested 
 and debugged #DPA3 @FrshBakedPixels
  24. 24. Source: http://trends.builtwith.com/docinfo/Twitter-Bootstrap
  25. 25. #DPA3 @FrshBakedPixels
  26. 26. Source: http://us.pg.com
  27. 27. Source: http://statefarm.com
  28. 28. Source: http://centralusa.salvationarmy.org/
  29. 29. Source: http://www.washington.edu
  30. 30. Source: http://www4.uwm.edu/
  31. 31. Source: http://arkansas.gov http://arkansas.gov/
  32. 32. Source: http://www.nps.gov//
  33. 33. Repeal Bootstrap
  34. 34. what’s included in Bootstrap #DPA3 @FrshBakedPixels
  35. 35. Responsive grid system 12 column grid 4 different screen sizes nestable #DPA3 @FrshBakedPixels
  36. 36. Responsive grid system Pre-styled elements Navigation bar Drop-down menus Forms Buttons Tables Labels and Badges #DPA3 @FrshBakedPixels
  37. 37. pre-styled buttons <a class="btn btn-default">Default button</a> <a class="btn btn-primary btn-lg">Large button</a> <a class="btn btn-primary">Primary button</a> <a href="#">Button</a>
  38. 38. pre-styled form elements → → →
  39. 39. Responsive grid system Pre-styled elements Icon font Glyphicons 180 icons #DPA3 @FrshBakedPixels
  40. 40. icon font <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-envelope"></span> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-refresh"></span> <span class="glyphicon glyphicon-shopping-cart"></span> <span class="glyphicon glyphicon-cog"></span> #DPA3 @FrshBakedPixels
  41. 41. icon font 16px 48px 96px #DPA3 @FrshBakedPixels
  42. 42. what’s included Responsive grid system Pre-styled elements Icon font JavaScript plugins Modal Drop-down Tab Collapse Tooltip and Popover Carousel Scrollspy Affix #DPA3 @FrshBakedPixels
  43. 43. http://getbootstrap.com/
  44. 44. you can choose and customize #DPA3 @FrshBakedPixels
  45. 45. Bootstrap folder structure
  46. 46. you will also need jQuery For IE8 and below respond.js (media queries) html5shiv.js (HTML5 support) #DPA3 @FrshBakedPixels
  47. 47. let’s build something #DPA3 @FrshBakedPixels
  48. 48. http://tiny.cc/heweb1
  49. 49. Start with HTML5 document <!DOCTYPE HTML> <html> <head> </head> <body> <header></header> <nav></nav> <section></section> <section></section> <section></section> <section></section> <footer></footer> </body> </html>
  50. 50. <!DOCTYPE HTML> <html> <head> </head> <body> <header></header> <nav></nav> <section></section> <section></section> <section></section> <section></section> <footer></footer> </body> </html> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/myCustomStylesheet.css">
  51. 51. responsive grid 101 #DPA3 @FrshBakedPixels
  52. 52. Breakpoint
  53. 53. Breakpoint
  54. 54. Breakpoint
  55. 55. Breakpoint
  56. 56. Breakpoint
  57. 57. Breakpoint
  58. 58. Bootstrap has 3 breakpoints 992px 1200px768px extra-small small medium large .col-xs- .col-lg-.col-md-.col-sm-
  59. 59. <div class="col-md-3">col-md-3</div> <div class="col-md-9">col-md-9</div> screen size prefixes relative width of columns numbers must add up to 12 .col-­‐md-­‐3 .col-­‐md-­‐9 <div class="row"> </div>
  60. 60. <section class="row"> <div class="col-md-3"> </div> <div class="col-md-9"> </div> </section> “about me” section <h2>about me</h2> <p>I work as an …</p> <p>My area of interest …</p>
  61. 61. small screen medium screen “about me” section
  62. 62. really large screen “about me” section
  63. 63. <div class="row"> <div class="col-md-8">col-md-8</div> <div class="col-md-4">col-md-4</div> </div> sets maximum width center aligns the container really large screen <div class="container"> </div>
  64. 64. header <header class="container"> <div class="row"> <div class="col-sm-5"> <img src="images/gaurav.png"> </div> <div class="col-sm-7"> <h1>Gaurav Gupta</h1> <p>web designer, developer</p> </div> </div> </header>
  65. 65. change column order <header class="container"> <div class="row"> </div> </header> <div class="col-sm-5 col-sm-pull-7 "> <img src="images/gaurav.png"> </div> <div class="col-sm-7 col-sm-push-5 "> <h1>Gaurav Gupta</h1> <p>web designer, developer</p> </div>
  66. 66. change column order <header class="container"> <div class="row"> </div> </header> <div class="col-sm-5 col-sm-pull-7 "> <img src="images/gaurav.png"> </div> <div class="col-sm-7 col-sm-push-5 "> <h1>Gaurav Gupta</h1> <p>web designer, developer</p> </div>
  67. 67. mix and match grid columns column  1 column  2 column  3 <div class="row"> <div class="col-md-6 col-sm-12">column 1</div> <div class="col-md-4 col-sm-6" >column 2</div> <div class="col-md-2 col-sm-6" >column 3</div> </div> column  1 column  2 column  3 » medium screens small screens
  68. 68. responsive images <img src="... " class="img-responsive">
  69. 69. responsive tables <div class="table-responsive"> <table class="table"> ... </table> </div>
  70. 70. responsive navigation #DPA3 @FrshBakedPixels
  71. 71. start with basic markup <nav> <ul> <li><a href="#home">home</a></li> <li><a href="#about">about me</a></li> <li><a href="#projects">recent projects</a></li> <li><a href="#presentations">presentations</a></li> <li><a href="#contact">contact me</a></li> </ul> </nav>
  72. 72. add classes <nav class="navbar navbar-default"> <ul class="nav nav-justified"> <li><a href="#home">home</a></li> <li><a href="#about">about me</a></li> <li><a href="#projects">recent projects</a></li> <li><a href="#presentations">presentations</a></li> <li><a href="#contact">contact me</a></li> </ul> </nav> small – large screens extra-small screen
  73. 73. collapse navigation on extra-small screens <nav class="navbar navbar-default"> <ul class="nav nav-justified collapse navbar-collapse"> ... </ul> </nav>
  74. 74. add toggle button <nav> <div class="navbar-header visible-xs"> <button class="navbar-toggle" data-toggle="collapse"
 data-target=".my-navbar"> <span class="glyphicon glyphicon-align-justify"></span> </button> </div> <ul class="nav nav-justified collapse navbar-collapse my-navbar" > ... </ul> </nav>
  75. 75. add header text <div class="navbar-header visible-xs"> <button class="navbar-toggle" data-toggle="collapse" data-target=".my- navbar"> <span class="glyphicon glyphicon-align-justify"></span> <h3 class=" text-center">Gaurav Gupta</h3> </button> </div>
  76. 76. small – large screens extra-small screen
  77. 77. adding your own styles #DPA3 @FrshBakedPixels
  78. 78. /* myCustomStylesheet.css */ .navbar-default { background-color: #74716a; border-color: #FFF; } /* bootstrap.css */ .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; }
  79. 79. use web developer tools »
  80. 80. JavaScript components #DPA3 @FrshBakedPixels
  81. 81. Affix: fix position of elements on page $('nav').affix({offset: {top: ($('nav').offset().top), bottom: 200} }); nav.affix { top: 0; width: 100%;} »
  82. 82. Scrollspy: indicate current location <body data-spy="scroll" data-target=".nav"> nav .nav > li.active > a { background-color: #514F4A; } »
  83. 83. tabs
  84. 84. tabs <ul class="nav nav-tabs"> <li><a href="#contactme" data-toggle="tab">Contact me</a></li> <li><a href="#twitter" data-toggle="tab">Twitter</a></li> <li><a href="#services" data-toggle="tab">Services</a></li> </ul>
  85. 85. tabs <div class="tab-content"> <div class="tab-pane" id="contactme">...</div> <div class="tab-pane" id="twitter">...</div> <div class="tab-pane" id="services">...</div> </div>
  86. 86. tooltip <input type="text" data-toggle="tooltip" title="full name"> $('[data-toggle="tooltip"]').tooltip();
  87. 87. Bootstrap + 
 146 lines of CSS + 
 10 lines of JS
  88. 88. #DPA3 @FrshBakedPixels
  89. 89. more examples on Bootstrap website
  90. 90. retrofitting an existing website #DPA3 @FrshBakedPixels
  91. 91. Apple page built with Bootstrap http://tiny.cc/heweb2 8-10 hours
  92. 92. other ways to use Bootstrap #DPA3 @FrshBakedPixels
  93. 93. prototyping
  94. 94. Wordpress plugins
  95. 95. third party add-ons
  96. 96. Fontello »
  97. 97. Bootsnipp: button builder http://bootsnipp.com/buttons »
  98. 98. pros and cons of Bootstrap #DPA3 @FrshBakedPixels
  99. 99. The easy way of building websites, not the ideal way Overstyled components Unused CSS
  100. 100. version 4.0 #DPA3 @FrshBakedPixels
  101. 101. Dropped IE 8 support Use of Em and Rem instead of pixels Added one more breakpoint Flexbox layout support
  102. 102. other frameworks #DPA3 @FrshBakedPixels
  103. 103. Source: http://usablica.github.io/front-end-frameworks/compare.html
  104. 104. my selection criteria responsive browser support features popularity
  105. 105. other resources 50 Must-have Bootstrap plugins http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/ Bootply http://www.bootply.com/ Bootstrap CDN http://www.bootstrapcdn.com/ More resources http://bootsnipp.com/resources Inspect structure and style with Chrome Developer Tools https://developers.google.com/web/tools/iterate/inspect-styles/basics
  106. 106. questions? #DPA3
 
 @frshbakedpixels

×