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 Er der noget, der har drillet med opgaverne? Noget vi skal tage op?
I gang med bootstrap
Hva’ er twitter bootstrap? Twitter bootstrap 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! Twitter bootstrap er baseret på HTML5, CSS 2 og 3, jQuery og et responsivt grid Bootstrap findes på http://twitter.github.io/bootstrap/
Dagens site… Jeg har lavet eksempelsite, som vi skal kigge nærmere på. Det har: Et responsivt layout, herunder også navigation En carousel slider på toppen af forsiden En masse billeder – og ikke så meget tekst! Se eksemplet på: file:///Users/keareserve8/Documents/KEA- Digital%C3%86stetik/Dag5- Bootstrap/twitter_bootstrap/index.html Og download en samlet zip-fil på: file:///Users/keareserve8/Documents/KEA- DigitalÆstetik/Dag5-Bootstrap/twitter_bootstrap.zip
Klargøring til Twitter bootstrap Opret et nyt html-site i en ny mappe Tilføj <head>, <section>, <nav>, <header>, <article> tags mm. som normalt Husk at inkludere <meta name="viewport" content="width=device-width, initial-scale=1.0"> I <head>- delen af dit dokument Download og udpak Twitter bootstrap på http://twitter.github.io/bootstrap/
Inkluder Bootstrap på dit site Inkluder Twitter Bootstrap CSS på dit site – se mit eksempel, linje 9-11, lige under: <!-- Twitter bootstrap CSS --> Opret en Custom CSS til egne styles – se eksempel linje 13- 14 for inkludering af custom.css Inkluder jQuery fra CDN, se linje 191-192 lige før </body> slut-taget. Inkluder bootstrap javascript, se linje 193-194 192 lige før </body> slut-tagget, men efter jQuery. (Bootstrap bruger jQuery-funktioner)
Bootstrap grid’et
940px grid…? Eller 100%? Bootstrap er baseret på et 940px bredt, 12-kolonnet layout. Præcis som 960.gs – minus 10px venstremargen på første kolonne, og 10px højremargen på sidste kolonne Kan gøres adaptivt – men vi vil arbejde med responsivt…: 12-kolonnet, fluid grid, 100% bredden af viewporten – en række SKAL bestå af 12 kolonner For flere informationer om bootstrap gridet: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Scaffolding – brugen af grid’et Alt indholdet af et responsivt site pakkes ind i: <div class=”container-fluid”></div> Dernæst laves alle rækker – de SKAL bestå af 12 kolonner! En række består af en <div class=”row-fluid”>…</div> I hver række kan kolonner defineres som <div class=”span1- 12”>…indhold…</div> For at lave tomme kolonner, kan man bruge offset klassen, eks.: <div class=”span6 offset6”>…indhold…</div> Man kan bruge strukturelle elementer fra HTML5 I stedet for <div>’er til alle elementer…
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> <div class=”row-fluid”> <div class=”span4”>indhold</div> <div class=”span8”>indhold</div> </div> </section>
Pull-right og pull-left Klasserne pull-right og pull-left kan bruges til at floate et element til højre el. venstre.
Responsive features
Responsive utility classes Der er en række Responsive Utility Classes, der kan bruges til at vise/skjule indhold på forskellige enheder. 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ække på mobilenheder Classerne er baseret på @media-queries - altså udelukkende CSS!
Diverse bootstrap indhold
Hero-unit En hero Unit er en “stor appetizer.” Den kan tilføjes som en klasse class=“hero-unit”. Eksempel, linje 53-89: <section class="row-fluid hidden-phone"> <div class="span12 hero-unit"> <h1>Hero unit her. Ikke synlig på tlf.</h1> </div> </section>
Thumbnail galleri Der er markup til at lave gallerier i Bootstrap Der bruges en <ul class=“thumbnails”> til det. <li> elementerne i listen tilføjes en class span1-12 til kolonnerne i galleriet. Deri placeres articles for hvert billede med class=“thumbnail” + billedfilen + header og tekst... Eksempler: Linjerne 91-113, 115-136, 138-160 og 162-183
Custom.css Twitter bootstrap kommer med noget standard styling, der er meget minimalistisk... Men der er en række classes og html-elementer i bootstrap, der allerede er defineret. Eksempelvis: Knapper: Eksempel linje 58: <a href="#" class="btn btn- primary">kontakt mig</a> Billeder: Eksempel linje 95: <a class="thumbnail img- polaroid"><img src="uploads/myg07.jpg" alt="Myggie"></a> Man kan lave et custom stylesheet. Det er egentlig blot at lave et stylesheet, der hedder custom.css, og inkludere det i ens html-fil EFTER bootstrap stylesheetene. Derpå: Skriv style-regler! (Eksempel: Se custom.css)
Responsiv navigationsmenu
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=“nav nav-tabs” til pills --> <li><a href=”#”>Link</a></li> <li class=”active”><a href=”#”>Link</a></li> </ul> </div> </nav>
Hvordan gør vi den responsiv? Bootstrap har en række jQuery-baserede plugins To HTML5 attributter: Data-toggle og data-target Data-toggle bruges til at angive hvilket element, der skal sørge for at der sker noget Data-target angiver hvilket element handlingen skal udføres på Dem bruger vi…
<div class="container-fluid"> <header class="row-fluid"> <nav class="navbar"> <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <!-- kollapser menuen --> 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> </nav> </header>
Indskudt dropdown i menuen <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>
Carousel slider
Indskudt dropdown i menuen Se linjerne 56-82 i eksemplet!
Dagens opgave
Dagens opgave Lav et responsivt Twitter Bootstrap site! HJÆLP! Se det korte intro-dokument, jeg har uploadet til keaweb: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag5/ GodtIGangMedBootstrap.doc Afleveres på fronter senest fredag kl. 23.59