Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Similar to Stop reinventing the wheel: Build Responsive Websites Using Bootstrap (20)
Recently uploaded
Recently uploaded (20)
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
- 1. Stop Reinventing the Wheel Build Responsive Websites Using Bootstrap Framework Gaurav Gupta HighEdWeb Conference, October 5, 2015 #DPA3 @FrshBakedPixels
- 3. about me IT Analyst Division of Learning Innovation and Student Success Virginia Commonwealth University #DPA3 @FrshBakedPixels
- 4. evolution of web design
- 5. Table Div + Float Grid Responsive Web Design
- 6. float:none float:left float: right Table Div + Float Grid Responsive Web Design
- 7. 12 columns 4 columns 6 columns 6 columns 4 columns 4 columns Table Div + Float Grid Responsive Web Design
- 8. 1 2 3 Table Div + Float Grid Responsive Web Design
- 9. 1 2 3 Table Div + Float Grid Responsive Web Design
- 11. Media queries Responsive grid Responsive images
- 12. desktop mobile
- 13. Media queries Responsive grid Responsive images
- 18. CSS and JavaScript framework Originally developed by Twitter Made open source in October 2011 Currently Version 3.3.5 #DPA3 @FrshBakedPixels
- 20. wide browser and device support
- 24. thoroughly tested and debugged #DPA3 @FrshBakedPixels
- 35. Repeal Bootstrap
- 37. what’s included in Bootstrap #DPA3 @FrshBakedPixels
- 38. Responsive grid system 12 column grid 4 different screen sizes nestable #DPA3 @FrshBakedPixels
- 39. Responsive grid system Pre-styled elements Navigation bar Drop-down menus Forms Buttons Tables Labels and Badges #DPA3 @FrshBakedPixels
- 40. 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>
- 42. Responsive grid system Pre-styled elements Icon font Glyphicons 180 icons #DPA3 @FrshBakedPixels
- 43. 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
- 45. 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
- 47. you can choose and customize #DPA3 @FrshBakedPixels
- 49. you will also need jQuery For IE8 and below respond.js (media queries) html5shiv.js (HTML5 support) #DPA3 @FrshBakedPixels
- 50. let’s build something #DPA3 @FrshBakedPixels
- 52. 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>
- 53. <!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">
- 54. responsive grid 101 #DPA3 @FrshBakedPixels
- 55. Breakpoint
- 56. Breakpoint
- 57. Breakpoint
- 58. Breakpoint
- 59. Breakpoint
- 60. Breakpoint
- 61. Bootstrap has 3 breakpoints 992px 1200px768px extra-small small medium large .col-xs- .col-lg-.col-md-.col-sm-
- 62. <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>
- 63. <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>
- 64. small screen medium screen “about me” section
- 65. really large screen “about me” section
- 66. <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>
- 67. 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>
- 69. 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>
- 70. 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>
- 71. 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
- 72. responsive images <img src="... " class="img-responsive">
- 73. responsive tables <div class="table-responsive"> <table class="table"> ... </table> </div>
- 75. 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>
- 76. 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
- 77. collapse navigation on extra-small screens <nav class="navbar navbar-default"> <ul class="nav nav-justified collapse navbar-collapse"> ... </ul> </nav>
- 78. 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>
- 79. 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>
- 80. small – large screens extra-small screen
- 81. adding your own styles #DPA3 @FrshBakedPixels
- 82. /* myCustomStylesheet.css */ .navbar-default { background-color: #74716a; border-color: #FFF; } /* bootstrap.css */ .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; }
- 83. use web developer tools »
- 85. Affix: fix position of elements on page $('nav').affix({offset: {top: ($('nav').offset().top), bottom: 200} }); nav.affix { top: 0; width: 100%;} »
- 86. Scrollspy: indicate current location <body data-spy="scroll" data-target=".nav"> nav .nav > li.active > a { background-color: #514F4A; } »
- 87. tabs
- 88. 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>
- 89. 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>
- 90. tooltip <input type="text" data-toggle="tooltip" title="full name"> $('[data-toggle="tooltip"]').tooltip();
- 91. Bootstrap + 146 lines of CSS + 10 lines of JS
- 94. more examples on Bootstrap website
- 95. retrofitting an existing website #DPA3 @FrshBakedPixels
- 96. Apple page built with Bootstrap http://tiny.cc/heweb2 8-10 hours
- 97. other ways to use Bootstrap #DPA3 @FrshBakedPixels
- 98. prototyping
- 101. third party add-ons
- 102. Fontello »
- 104. pros and cons of Bootstrap #DPA3 @FrshBakedPixels
- 105. The easy way of building websites, not the ideal way Overstyled components Unused CSS
- 108. Dropped IE 8 support Use of Em and Rem instead of pixels Added one more breakpoint Flexbox layout support
- 114. my selection criteria responsive browser support features popularity
- 115. 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