creating responsive web pages with bootstrap 3 · creating responsive web pages with bootstrap 3...
TRANSCRIPT
![Page 1: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/1.jpg)
CREATING RESPONSIVE WEB PAGES WITHBOOTSTRAP 3
Dana OuelletteInformation Services Librarian
Concordia University College of Alberta
![Page 2: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/2.jpg)
WHAT I WILL COVERResponsive DesignWhy Bootstrap?
My circuitous discovery of BootstrapFeatures of BootstrapGetting started with BootstrapEpic Fail!!/lessons learned
![Page 3: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/3.jpg)
RESPONSIVE DESIGNDesign philosophyBest possible user interface regardless of screen size
One site for every screenNot really achievable until 2012
W3C recommendation of CSS3 media queriesHTML5
Oops I missed that boat! Why did I launch a site in 2013?
![Page 4: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/4.jpg)
WHAT IS BOOTSTRAP?Front End FrameworkBasically just CSS and JSCreated by Twitter for Consistency in internal projectsAs bootstrap 2 has supported responsive design grids
![Page 5: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/5.jpg)
WHY BOOTSTRAP?Mobile-first responsive designEasy to use
Even for the non-developerPerfect for small colleges without much IT support
ConsistencyComplex responsive features and Javascript features withonly basic knowledge of html and css
![Page 6: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/6.jpg)
MY CIRCUITOUS DISCOVERY OF BOOTSTRAPAccessyyt 2013CRDBNeeded consistancyModern login forms
![Page 7: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/7.jpg)
OLD FORM
![Page 8: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/8.jpg)
NEW FORM
![Page 9: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/9.jpg)
FEATURESLet's check out the features visually on the
bootstrap website
![Page 10: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/10.jpg)
FEATURESExcellent documentationEasy to follow examplesEasy copy and paste template
![Page 11: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/11.jpg)
USING BOOTSTRAPDownload bootstrapSet up site in the same directory
![Page 12: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/12.jpg)
HEADERThe essentials
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head></html>
![Page 13: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/13.jpg)
LINK TO CSS AND JS FILESbetween head tags
<link href="css/bootstrap.min.css" rel="stylesheet">
In the footer
<script src="js/bootstrap.min.js"></script>
![Page 15: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/15.jpg)
GRID SYSTEM12 column grid systemUse divs with a class formated like .col-*size-*width in columsSizes are: xs, sm, md, lgNumber in each row must add up to 12
![Page 16: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/16.jpg)
IT'S HARD TO EXPLAIN LETS TAKE A LOOK<div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div></div>
![Page 17: CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 · CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ... GRID SYSTEM 12 column grid ... You can't just use bootstrap as new skin over an](https://reader031.vdocuments.net/reader031/viewer/2022022611/5b99820709d3f207308c1cb4/html5/thumbnails/17.jpg)
FAIL/LESSONS LEARNEDIf it's so easy, why isn't our library site responsiveMobile first responsive requires complete redesignYou can't just use bootstrap as new skin over an old site
learned that one the hard wayLook at my fail