View
226
Download
2
Category
Preview:
Citation preview
CREATING RESPONSIVE WEB PAGES WITHBOOTSTRAP 3
Dana OuelletteInformation Services Librarian
Concordia University College of Alberta
WHAT I WILL COVERResponsive DesignWhy Bootstrap?
My circuitous discovery of BootstrapFeatures of BootstrapGetting started with BootstrapEpic Fail!!/lessons learned
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?
WHAT IS BOOTSTRAP?Front End FrameworkBasically just CSS and JSCreated by Twitter for Consistency in internal projectsAs bootstrap 2 has supported responsive design grids
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
MY CIRCUITOUS DISCOVERY OF BOOTSTRAPAccessyyt 2013CRDBNeeded consistancyModern login forms
OLD FORM
NEW FORM
FEATURESLet's check out the features visually on the
bootstrap website
FEATURESExcellent documentationEasy to follow examplesEasy copy and paste template
USING BOOTSTRAPDownload bootstrapSet up site in the same directory
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>
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>
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
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>
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
QUESTIONS?dana.ouellette@concordia.ab.ca
Recommended