CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ?· CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3 ...…

  • Published on
    13-Sep-2018

  • View
    212

  • Download
    0

Transcript

<ul><li><p>CREATING RESPONSIVE WEB PAGES WITHBOOTSTRAP 3</p><p>Dana OuelletteInformation Services Librarian </p><p>Concordia University College of Alberta</p></li><li><p>WHAT I WILL COVERResponsive DesignWhy Bootstrap?</p><p>My circuitous discovery of BootstrapFeatures of BootstrapGetting started with BootstrapEpic Fail!!/lessons learned</p></li><li><p>RESPONSIVE DESIGNDesign philosophyBest possible user interface regardless of screen size</p><p>One site for every screenNot really achievable until 2012</p><p>W3C recommendation of CSS3 media queriesHTML5</p><p>Oops I missed that boat! Why did I launch a site in 2013?</p></li><li><p>WHAT IS BOOTSTRAP?Front End FrameworkBasically just CSS and JSCreated by Twitter for Consistency in internal projectsAs bootstrap 2 has supported responsive design grids</p></li><li><p>WHY BOOTSTRAP?Mobile-first responsive designEasy to use</p><p>Even for the non-developerPerfect for small colleges without much IT support</p><p>ConsistencyComplex responsive features and Javascript features withonly basic knowledge of html and css</p></li><li><p>MY CIRCUITOUS DISCOVERY OF BOOTSTRAPAccessyyt 2013CRDBNeeded consistancyModern login forms</p></li><li><p>OLD FORM</p></li><li><p>NEW FORM</p></li><li><p>FEATURESLet's check out the features visually on the</p><p>bootstrap website</p><p>http://getbootstrap.com/examples/theme/</p></li><li><p>FEATURESExcellent documentationEasy to follow examplesEasy copy and paste template</p><p>http://getbootstrap.com/components/#navbarhttp://getbootstrap.com/getting-started/#exampleshttp://getbootstrap.com/getting-started/#template</p></li><li><p>USING BOOTSTRAPDownload bootstrapSet up site in the same directory</p></li><li><p>HEADERThe essentials</p></li><li><p>LINK TO CSS AND JS FILESbetween head tags</p><p>In the footer</p></li><li><p>LETS GIVE IT A QUICK TRYhttp://getbootstrap.com</p><p>http://getbootstrap.com/</p></li><li><p>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</p></li><li><p>IT'S HARD TO EXPLAIN LETS TAKE A LOOK</p></li><li><p>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</p><p>learned that one the hard wayLook at my fail</p><p>http://library.dev.concordia.ab.ca/</p></li><li><p>QUESTIONS?dana.ouellette@concordia.ab.ca</p></li></ul>

Recommended

View more >