1 / 28

Interaktion 4

Interaktion 4. Stefan Grage. DAGENS MÅL. I gang med Twitter Bootstrap Bootstrap grid’et Responsivt web med Bootstrap Diverse bootstrap indhold : Hero-unit, buttons, thumbnails… Responsiv navigationsmenu Carousel slider Dagens opgave (r). Men først … I går.

abbott
Download Presentation

Interaktion 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interaktion 4 Stefan Grage

  2. DAGENS MÅL • I gang med Twitter Bootstrap • Bootstrap grid’et • Responsivt web med Bootstrap • Diverse bootstrap indhold: Hero-unit, buttons, thumbnails… • Responsivnavigationsmenu • Carousel slider • Dagensopgave(r)

  3. Men først… I går • Er der noget, der hardrillet med opgaverne? • Noget vi skaltage op?

  4. I gang med bootstrap

  5. Hva’ er twitter bootstrap? Twitterbootstrap er et frontend framework lavet af en række kode-nørder fra Twitter Et framework er en samling af koder/kodestumper/klasser mm., der bruges til at speede udviklingshastigheden op! Twitterbootstrap er baseret på HTML5, CSS 2 og 3, jQuery og et responsivtgrid Bootstrap findes på http://twitter.github.io/bootstrap/

  6. Dagens site… • Jegharlaveteksempelsite, som vi skalkiggenærmerepå. Dethar: • Et responsivt layout, herunderogså navigation • En carousel slider påtoppenafforsiden • En masse billeder – ogikkesåmegettekst! • Se eksempletpå: file:///Users/keareserve8/Documents/KEA-Digital%C3%86stetik/Dag5-Bootstrap/twitter_bootstrap/index.html • Og download en samlet zip-filpå: file:///Users/keareserve8/Documents/KEA-DigitalÆstetik/Dag5-Bootstrap/twitter_bootstrap.zip

  7. Klargøringtil Twitter bootstrap • Opret et nyt html-site i en nymappe • Tilføj <head>, <section>, <nav>, <header>, <article> tags mm. somnormalt • Husk at inkludere <meta name="viewport" content="width=device-width, initial-scale=1.0"> I <head>-delenafditdokument • Download ogudpak Twitter bootstrap påhttp://twitter.github.io/bootstrap/

  8. Inkluder Bootstrap pådit site • Inkluder Twitter Bootstrap CSS pådit site – se miteksempel, linje 9-11, lige under: <!-- Twitter bootstrap CSS --> • Opret en Custom CSS tilegne styles – se eksempellinje 13-14 for inkluderingafcustom.css • InkluderjQueryfra CDN, se linje 191-192 ligefør </body> slut-taget. • Inkluder bootstrap javascript, se linje 193-194 192 ligefør </body> slut-tagget, men efterjQuery. (Bootstrap brugerjQuery-funktioner)

  9. Bootstrap grid’et

  10. 940px grid…? Eller 100%? • Bootstrap erbaseretpå et 940px bredt, 12-kolonnet layout. Præcissom 960.gs – minus 10px venstremargenpåførstekolonne, og 10px højremargenpåsidstekolonne • Kangøresadaptivt – men vi vilarbejde med responsivt…: • 12-kolonnet, fluid grid, 100% breddenafviewporten – en række SKAL beståaf 12 kolonner • For flereinformationerom bootstrap gridet: • http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

  11. Scaffolding – brugenafgrid’et • Alt indholdetaf et responsivt site pakkesindi: <div class=”container-fluid”></div> • Dernæst laves allerækker – de SKAL beståaf 12 kolonner! • En rækkebeståraf en <div class=”row-fluid”>…</div> • I hverrækkekankolonnerdefineressom<div class=”span1-12”>…indhold…</div> • For at lave tommekolonner, kan man bruge offset klassen, eks.: <div class=”span6 offset6”>…indhold…</div> • Man kanbrugestrukturelleelementerfra HTML5 I stedet for <div>’ertilalleelementer…

  12. Nesting af rows • Man kan “neste” en row-fluid I en row, så man kan lave uendeligt med layouts… <section class="row-fluid"> <article class="span6"> <h1>Indhold....</h1> </article> <article class="span6"> <div class=”row-fluid”> <div class=”span4”>indhold</div> <div class=”span8”>indhold</div> </div> </article> </section>

  13. Pull-right og pull-left • Klasserne pull-right og pull-left kanbrugestil at floate et element tilhøjre el. venstre.

  14. Responsive features

  15. Responsive utility classes • Der er en række Responsive Utility Classes, der kanbrugestil at vise/skjuleindholdpåforskelligeenheder. F.eks: • .visible-phone, .visible-tablet, .visible-desktop, .hidden-phone, .hidden-tablet, .hidden-desktop - eksempel: <section class="row-fluid hidden-phone"> pålinje 115, fjerner en rækkepåmobilenheder • Classerneerbaseretpå @media-queries - altsåudelukkende CSS!

  16. Diverse bootstrap indhold

  17. Hero-unit • En hero Unit er en “stor appetizer.” • Den kantilføjessom en klasseclass=“hero-unit”. Eksempel, linje 53-89: <section class="row-fluid hidden-phone"> <div class="span12 hero-unit"> <h1>Hero unit her. Ikkesynligpåtlf.</h1> </div> </section>

  18. Thumbnail galleri • Der er markup til at lave gallerieriBootstrap • Der bruges en <ul class=“thumbnails”> tildet. • <li> elementernei listen tilføjes en class span1-12 tilkolonnerneigalleriet. • Deriplaceres articles for hvertbillede med class=“thumbnail” + billedfilen + header ogtekst... • Eksempler: Linjerne 91-113, 115-136, 138-160 og 162-183

  19. Custom.css • Twitter bootstrap kommer med noget standard styling, der ermegetminimalistisk... • Men der er en række classes og html-elementeri bootstrap, der alleredeerdefineret. Eksempelvis: • Knapper: Eksempellinje 58: <a href="#" class="btnbtn-primary">kontaktmig</a> • Billeder: Eksempellinje 95: <a class="thumbnail img-polaroid"><imgsrc="uploads/myg07.jpg" alt="Myggie"></a> • Man kanlave et custom stylesheet. Deteregentlig blot at lave et stylesheet, der heddercustom.css, oginkluderedetiens html-fil EFTER bootstrap stylesheetene. Derpå: Skriv style-regler! (Eksempel: Se custom.css)

  20. Responsivnavigationsmenu

  21. Standard navigationsmenu • Bootstrap navigation bar: Bootstrap kommer med en standard navigation bar: <nav class=”navbar”> <div class=”navbar-inner”> <a class=”brand” href=””>Sitenavn</a> <ul class=”nav”> <!– class=“navnav-tabs” til pills --> <li><a href=”#”>Link</a></li> <li class=”active”><a href=”#”>Link</a></li> <li><a href=”#”>Link</a></li> </ul> </div> </nav>

  22. Hvordangør vi den responsiv? • Bootstrap har en rækkejQuery-baserede plugins • To HTML5 attributter: Data-toggle og data-target • Data-toggle brugestil at angivehvilket element, der skalsørge for at der skernoget • Data-target angiverhvilket element handlingenskaludførespå • Dem bruger vi…

  23. <div class="container-fluid"> <header class="row-fluid"> <nav class="navbar"> <div class="navbar-inner"> <a class="btnbtn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <!-- kollapsermenuen --> Navigation </a> <a href="#" class="brand">Stud</a> <div class="nav-collapse collapse"> <!-- Collapse nr. 2 unødvendig?--> <ul class="nav"> <li><a href="#" alt="">Gøgl</a></li> <li><a href="#" alt="">Knas</a></li> <li><a href="#" alt="">Knus</a></li> </ul> </div> </div> </nav> </header>

  24. Indskudt dropdown imenuen <ul class="nav"> <li class="dropdown"><a href="#" alt="" class="dropdown-toggle" data-toggle="dropdown">Foto <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Portræt</a></li> <li><a href="#">Produkt</a></li> <li><a href="#">Fest/begivenhed</a></li> <li><a href="#">Reportage</a></li> </ul> </li> <li><a href="#" alt="">Video</a></li> <li><a href="#" alt="">Kontakt</a></li> </ul>

  25. Carousel slider

  26. Indskudt dropdown imenuen Se linjerne 56-82 ieksemplet!

  27. Dagensopgave

  28. Dagensopgave • Lav et responsivt Twitter Bootstrap site! • HJÆLP! Se detkorte intro-dokument, jegharuploadettilkeaweb: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag5/GodtIGangMedBootstrap.doc • Afleverespåfrontersenestfredag kl. 23.59

More Related