Download præsentationen
Præsentation er lastning. Vent venligst
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… Responsiv navigationsmenu Carousel slider Dagens opgave(r)
3
Men først… I går Er der noget, der har drillet med opgaverne?
Noget vi skal tage op?
4
I gang med bootstrap
5
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å
6
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
7
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å
8
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 for inkludering af custom.css Inkluder jQuery fra CDN, se linje lige før </body> slut-taget. Inkluder bootstrap javascript, se linje lige før </body> slut-tagget, men efter jQuery. (Bootstrap bruger jQuery-funktioner)
9
Bootstrap grid’et
10
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:
11
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…
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> <div class=”row-fluid”> <div class=”span4”>indhold</div> <div class=”span8”>indhold</div> </div> </section>
13
Pull-right og pull-left
Klasserne pull-right og pull-left kan bruges til at floate et element til højre el. venstre.
14
Responsive features
15
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 - altså udelukkende CSS!
16
Diverse bootstrap indhold
17
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>
18
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 , , og
19
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)
20
Responsiv navigationsmenu
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=“nav nav-tabs” til pills --> <li><a href=”#”>Link</a></li> <li class=”active”><a href=”#”>Link</a></li> </ul> </div> </nav>
22
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…
23
<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>
24
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>
25
Carousel slider
26
Indskudt dropdown i menuen
Se linjerne i eksemplet!
27
Dagens opgave
28
Dagens opgave Lav et responsivt Twitter Bootstrap site!
HJÆLP! Se det korte intro-dokument, jeg har uploadet til keaweb: GodtIGangMedBootstrap.doc Afleveres på fronter senest fredag kl
Lignende præsentationer
