Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Så goddag til alle, der ser her,
eller ser online, eller fjernt.
Mit navn er Neel, det er CS50.
Og dagens seminar er Responsive Web Design med Bootstrap.
Det er et emne, der er meget tæt på mit hjerte.
Forhåbentlig vil det være tæt på dit hjerte
samt ved udgangen af dagens seminar.
Så Bootstrap.
Hvor mange af jer har gjort noget form for web-udvikling før?
En god mængde?
En lille smule.
>> Så Bootstrap er verdens mest populære, front-end rammer.
Det bruges by-- jeg har valgt en par tilfældige websites--
Lyft, Newsweek, og Vogue.
Den bruges af en række hjemmesider.
Det er en web-design ramme, vil lade dig gøre dine hjemmesider
både smuk og lydhør.
Og jeg vil gå over disse to begreber her.
Smuk.
Så du har normal hjemmeside på venstre, som er lavet ved blot HTML.
Du har lært HTML i klassen og i afsnit udførligt.
Bootstrap er en måde at gøre dine hjemmesider smukke.
Du kan tage hvad der er på venstre side af skærmen
og gøre det til hvad der er på højre side af skærmen med meget,
meget, meget lidt kode.
>> Du får den flot blå knap, får du fancy, afrundede kanter på skærmen,
du får listevisningen, får du kort, og så videre med meget lidt kode.
Der er faktisk ikke noget CSS som du nødt til at skrive selv.
Så Bootstrap tillader dig at have disse præ-bygget CSS
komponenter, du kan sætte indersiden af din webside
at gøre det ser smukke uden meget meget arbejde på egen hånd.
Det er virkelig en bootstrap, et udgangspunkt,
til dine webudvikling eventyr.
Og så når du bare spottende en hjemmeside,
det er et meget godt sted at komme i gang.
Du kan få en god leder hjemmeside med meget, meget lidt arbejde.
Og ja, vi vil at gøre dette selv
i løbet af fem lignende minutes-- inden for 10 minutter.
Så det er ret nemt at gøre nogle gode hjemmesider.
Så det er den første del.
>> Den anden part-- lydhør.
Folk i dag, ikke bare adgang til internettet på deres bærbare pc'er.
Faktisk, som af 2014, flere mennesker adgang til internettet via mobile enheder,
ligesom telefoner eller tabletter, eller tjenester eller så videre end hjemmesider.
Og hjemmesider har traditionelt været designet med bærbare eller stationære computere
i tankerne.
Og så de hjemmesider er ofte ikke meget velegnet til din telefon.
Hvis du nogensinde besøgt harvard.edu på din telefon,
det er sådan en irriterende erfaring, ikke?
Det er fordi det ikke er lydhør.
Vi prøver at gøre websteder, der er lydhør,
at reagere på folks skærmstørrelser.
>> Så hvis det er en telefon, det er vil gå på telefon.
Hvis det er en tablet, er det kommer til at gå på tablet.
Det justerer at matche skærm, der bliver brugt.
Og så Bootstrap giver også nogle meget, meget nyttige hjælpeprogrammer til det.
Og vi vil diskutere, at så godt.
Så igen, der er to dele til Bootstrap-- smuk og ansvarlige.
Vi kommer til at tale om dem.
Først, smukke.
Og så lydhør.
>> Så al den kode, vi er vil tale om today--
vi kommer til at have en masse eksempler, en masse udfordringer, og så on-- det
alt liv på denne hjemmeside her.
Denne slide er, hvad vi sendt ud.
Så hvis du er her, kan du føle fri til at ikke at skrive det ned.
Og hvis du ser på afstand, føler fri til at trække dette op på din computer
samt.
Du skal nok bruge det i løbet af løbet af dette seminar.
>> Så vi kommer til at bruge en hjemmeside kaldet CodePen,
som er et samarbejde kodning miljø, i løbet af dette seminar.
Og CodePen-- og jeg vil vise dig her rigtig fast--
det giver dig mulighed for at skrive HTML fællesskab.
Jeg kan skrive det, jeg kan sende det til gutter, kan du fyre redigere den.
Selv hvis du er remote, du kan stadig få adgang til det på den måde.
Du kan skrive HTML-kode på top og det vil automatisk
omdannes til webside nederst.
Så det er en måde for dig til hurtigt at afprøve kode
uden at skulle gøre nogen form for ting på din IDE, eller din egen hjemmeside,
eller hvad.
>> Så gå videre og trække op dette hjemmeside, hvis du er remote
eller hvis du er her, især hvis du er fjernbetjening.
is.gd/cs50boostrap.
Ingen caps, ingen understregninger, ingen intet.
Så dem af jer, der er her, bare giv mig en thumbs
op, når du har trukket op at web-side.
God?
>> Publikum: Ja.
>> NEEL MEHTA: Så vi får til, at på bare et sekund.
Så først, vi vil komme til, hvordan gør du dine hjemmesider smuk?
Vi kommer til at lære at tage kedeligt, gamle HTML, som jeg viste dig før,
og vende det til virkelig rart komponenter,
Ligesom pæne widgets, nice, farvet knapper og etiketter, og tabeller,
og alle, idet Bootstrap.
Så hvis vi kunne alle gå over til CodePen, du lige har trukket op.
Det skal se lidt ligesom dette.
Er det se sådan ud for alle?
>> Publikum: Ja.
>> NEEL MEHTA: Hvis du er remote, det skal se sådan ud så godt.
Hvis ikke, vil jeg vise dig snart, hvordan du kan få det til at se sådan ud
i en fremtidig del af videoen.
Så her har vi skrevet en meget grundlæggende HTML,
som den slags, du har brugt i klassen.
Det er temmelig grundlæggende.
Ingen dikkedarer.
Og vi har nogle ting.
Vi har designet en meget, meget grundlæggende opstart
kalder Yalp! som du kan finde restauranter i området,
og find anmeldelser og retninger på alle dem.
Det er en meget god koncept.
Det har aldrig været gjort før.
Det er en meget unikt navn, også.
>> Så det, vi kommer til at prøve at gøre, er at hjælpe ejeren
af Yalp! gøre hans hjemmeside ser virkelig, virkelig cool.
Så til at begynde med, ejeren af Yalp! har lavet en lille søgning
boks og en lille knap, og så måske lidt
fremhævede område for en fremhævede restaurant, og derefter
en liste over andre restauranter der er i området.
Så kan vi bare gå igennem HTML-koden virkelig hurtigt.
Hvor behageligt er du fyre med HTML?
Vi har gjort en lille smule sektion og også i klassen.
Anstændig?
>> Så lige som et resumé, HTML handler om at have
tags eller elementer, der fortæller computer hvordan man lægge ud websiden.
Så denne h1 her-- starte h1, Velkommen til Yalp !, ende h1-- fortæller computeren,
tegne en stor overskrift det siger, Velkommen til Yalp!
inde der.
Vi har også former.
Vi kan indgange som dette, tekst input, som vil gøre som tekstbokse
du skriver i.
Du har også knapper.
Du får en flot, klikbare knap.
Det gør ikke gøre noget rigtigt nu, men du får en knap.
Du kan have divs eller skillevægge, til bryde op din side i forskellige grupper.
>> Du kan have stykker, du har knapper.
Hvis du har stykker, derefter du har uordnede lister, ul,
og lister inde i det, li.
Så dette er det meget grundlæggende byggeklodser af en webside.
Og ja, temmelig meget hvert websted, du ser
vil blive bygget anvendelse af disse samme værktøjer.
Selvfølgelig gør de ikke alle ser denne dårlige, fordi vi er
kommer til at spice den op en lille smule.
Så lad os denne kedelige gamle HTML og starten omdanne den til den smukke sted
at vi bare så et par minutter siden.
>> Så lad os starte meget enkel.
Så vi har på denne knap her.
I Bootstrap, som vi så, vi kan har en dejlig, smuk, blå knap.
Og det gøres ikke ved at gøre brugerdefinerede CSS.
Der er ingen brugerdefinerede CSS her.
Det er gjort ved at tilføje klasser til dine HTML-elementer.
Hvis du har prøvet klasser, eller HREF'er, eller ankre, eller type = "text" for inputs--
HTML-elementer kan have disse egenskaber.
De kan have ekstra information at du kan give dem.
>> Og så, i dette tilfælde, klasser er attributtet.
Så du ville skrive, knap class = noget inde i strenge.
Og det attribut vil fortælle computer, er dette ikke noget, gamle knap.
Det er en knap, der er i denne klasse af knapper.
Og så Bootstrap, hvis du giver det en bestemt stil på dit element,
det vil trække det på en bestemt måde.
Så jeg skriver "Btn btn-primære.
btn er en forkortelse for knappen.
Du vil bemærke nu, at min grimme knap vendt
ind i en dejlig, smuk, blå knap.
Det ser meget rart, når vi klikker på den.
>> Og så sker der det, at vi har btn klasse og btn-primære klasse
på vores element.
Og Bootstrap vil gå ind og sige, OK, jeg ved, at der er disse to klasser.
Ethvert element, der har disse to bør udarbejdes klasser som denne.
Så det er kernen i, hvordan du vedhæfter typografier til elementer i Bootstrap.
Du skal bare vedhæfte klasser til dem og det vil vægte det ud efter eget forgodtbefindende.
Så her er et andet eksempel.
I input, kan vi tilføje en class = "formular-kontrol".
Og jeg vil vise snart, hvor du kan finde ud af, hvilke klasser
er tilgængelige for hver type element.
Men den klasse, som vi lige Tilføjet har nice, afrundede hjørner,
Det har nice polstring, har det en dejlig, blå glød til det.
>> Vi kan også gå ind i denne form.
Og class = "formular-inline", hvilket vil gøre vores, som du måske forestiller dig, inline.
Så det ser en lille smule mere lige hvad vi havde før allerede.
Så før vi går på at style resten af siden, spørgsmål om, hvad vi
gjorde?
Vi har lige vedhæftede klasser til vores forskellige elementer.
Og jeg vil vise dig senere hvordan du kan regne ud, hvad klasser er tilgængelige.
Vi lagde klasser, har visse stilarter.
Og der fortæller browseren hvordan at layout siden ved hjælp af
Bootstrap er forudsat stilarter.
Eventuelle spørgsmål fra publikum?
>> Godt hidtil?
Afkøle.
En masse af de udfordringer, med Bootstrap er bare
at vide, hvad komponenter er rådighed, og hvordan du bruger dem.
Og det er alle lært med erfaring og også
gennem læsning af dokumentationen, som vi vil tale om snart.
Så vi har denne div.
Det er bare en kedelig, gammel ting.
Vi ønsker at understrege det på en måde.
Så i Bootstrap, der er en masse komponenter til rådighed.
Og det er getbootstrap.com.
Det er en meget nyttig reference.
Den indeholder ting like-- her er hvordan du gør en knap.
Og du kan gøre nav barer, kan du etiketter, kan du fremskridt barer,
du kan gøre listen grupper.
Dybest set, det er alle former af jer måske se en webside.
>> Her er en, som vi skal prøve lige nu.
Det hedder panel.
Hvis du nogensinde bruger Google Nu har de kort.
Eller enhver Android-enhed har kort.
De har lille hvide kasser der har stuff inde i den.
Og så vil vi forsøge at gøre at selv her ved hjælp af en ting
kaldes et panel.
Så hvis vi lægger class = "panel panel-default "til vores ydre div,
så lægger vi en div class = - lad os lige tjekke denne dokumentation.
div class = "panel-overskriften" og derefter div class = "paneler-krop".
Igen, ikke bekymre dig om huske denne kode.
Det vil være tilgængelige online.
>> Så vi gjorde dette og nu vores kedelige, gamle div forvandlet til denne nice, lille kort.
Det har dejlig polstring, er det har grænser, det skiller sig ud
fra resten af siden, som er temmelig cool.
Så lad os gå ind og ændre dette Get retninger knappen for at se godt ud.
Hvem i publikum vil fortælle mig, hvad jeg kan gøre for at knappen
at gøre det ser godt bruge Bootstrap?
Ja?
>> PUBLIKUM: Vi kunne tilføje en klasse.
Og vi kunne gøre class = "Btn btn-primær".
NEEL MEHTA: Ja.
Der er en masse andre farver til buttons--
eller om noget, for den sags skyld.
Vi kan gøre btn-fare og gøre den rød.
Der vi går.
Vi kan gøre btn-succes at gøre det grønne.
Vi kan gøre btn-info-- der er en flok af ting, der er tilgængelige for dig.
Så jeg har lidt udfordring for dig nu.
Så der er en ting mere at jeg har forladt un-stylet.
Denne top restauranter.
>> Og vi ønsker at bruge en ting kaldes en liste gruppe til at style det.
Så min udfordring til dig er gå videre til getbootstrap.com--
Jeg vil trække det op her.
getboostrap.com.
Gå til getbootstrap.com, finde den sektion, hvor de går i gruppelisten.
Og du vil se her et eksempel og de rigtige klasser
som du kan bruge til at gøre din lister i disse nice liste grupper.
Disse er udarbejdet eksempler af kode eksempler, hvad
kode, du bruger, hvad HTML-kode du bruger, og hvad der udskriver.
>> Så min udfordring at du-- gå på getbootstrap.com,
uanset om du er her eller i hjemmet, og at forsøge at tilføje typografier til dette ul
at gøre det ser nice.
Og bruge en liste gruppe stil.
Du ønsker at tage et par minutter, og søg dokumentationen,
prøve dette selv?
Fordi som du laver web-udvikling, vil du indse en masse af dit arbejde
vil være at læse denne dokumentation.
Så jeg synes, det er godt at blive fortrolig med, hvordan man læser dokumentationen,
hvordan man finde ud af, hvad der er hvor, hvad kode eksempler, du kan bruge,
hvad du kan udnytte.
>> Så igen, getbootstrap.com, gå til fanen Komponenter,
og derefter rulle ned til List Group.
Og du vil se eksempler på kode, du kan bruge til at gøre din HTML passer det.
Så tag et par minutter og forsøge at udforske det selv,
uanset om du er her eller derhjemme.
Hvis du er hjemme, pause videoen, måske, og prøv det selv.
Hvis du er her, hvis du går til vores website-- hvis du opdaterer siden,
vil du se dette på der.
Denne meget samme kode er bare tilføje nye stilarter lige der.
Så tage et par minutter.
Lad mig vide, når du føler god om det, eller når du er helt tabt.
Lyder godt?
Afkøle.
Hurtigt til side til dem af jer derhjemme, mens vi venter,
hvis du går videre til GitHub webstedet at jeg sætter op et par dias siden,
mod begyndelsen af videoen, Jeg har en GitHub repo, repository,
for denne snak.
Alle disse kode eksempler, som vi vil være taler om gemmes her.
Så hvis du går til at udfordre-1.html, dette er al den kode, som vi har lige nu
på vores CodePen.
Så du kan bare gå videre, og kopiere dette, og indsæt det i dit eget CodePen.
Og på den måde, kan du holde op med det, vi laver her.
Så har denne side åbne såvel som vi gå gennem resten af seminaret.
Igen, du vil have det til at ligne det, du se ned i bunden af skærmen
der.
Føle sig godt tilpas?
Solid.
Lad os vente for alle andre til slutte op med, hvad de laver.
>> Ja?
>> PUBLIKUM: Antag, at jeg ønskede at bruge Bootstrap på home--
NEEL MEHTA: Ja.
PUBLIKUM: Jeg ser, på hjemmesiden, Kom godt i gang siden.
De giver mig muligheder Bootstrap, kildekode, eller Sass.
Hvilken af disse skal jeg have?
>> NEEL MEHTA: Ja.
Så spørgsmålet er, hvordan får du begyndte at bruge Bootstrap af os selv?
Det bare sker for at magisk arbejder lige her.
Så hvis vi har tid på afslutningen af seminaret,
Jeg vil vise dig, hvordan du kan få det på din egen webside.
Ligesom her, jeg har faktisk sendte nogle indstillinger,
får den automatisk indlæst, men jeg vil
vise dig til at gøre det fra ridse på dine egne websider.
>> PUBLIKUM: Tak.
>> NEEL MEHTA: Ja.
Godt spørgsmål.
Føle sig godt tilpas?
Føle sig godt tilpas?
Afkøle.
Så der ønsker at fortælle mig, hvordan de lavede denne ting ser pæn og Boostrappy?
Hvad er den første klasse, vi føje til ul?
PUBLIKUM: class = "liste-gruppen".
NEEL MEHTA: Ja. liste-gruppe.
Og hvad skal vi tillægger lis?
En anden?
PUBLIKUM: Og så, efter at class = "liste-gruppe-post".
>> NEEL MEHTA: Ja.
>> PUBLIKUM: Og det er det samme for den næste.
>> NEEL MEHTA: li class = "liste-gruppe-post".
Værsgo.
Vi har vores pæn liste gruppe, ligesom vi havde forventet.
Så der du går.
I 10 minutter har vi gjort denne kedelige, gamle Yalp! side
ser nice og professionel.
Og det er kun begyndelsen.
Så nu, at du føler dig godt om det, lad os
bare gå videre og taler om et par flere komponenter,
kunne komme i handy som du gå hele dit eventyr.
>> Selvfølgelig er der en masse dem her.
Og nu, hvor du har lært hvordan man gør gruppelisten,
du kan stort set undervise hvordan til at gøre nogen af disse.
Men, selvfølgelig, lad os bare prøve og gøre et par mere os selv,
bare så du får en fornemmelse for hvordan du kan bruge dem.
Jeg er bare kommer til at gå dette eksempel her.
Igen, den kode, jeg bare klistret herinde er til rådighed lige her.
Så er du velkommen til at trække den op.
>> Så vi har allerede været igennem et par af disse eksempler.
Så vi har knapper, som vi har allerede set, hvordan man gør.
Vi kan gøre knapper større.
Ved knap class-- det går, Btn btn-lg og btn-standard gør det hvide.
Så det gør vores knap større , end det ellers ville være.
Det kan komme i praktisk, hvis du har store indsende knap eller noget.
Vi så eksempel gruppelisten, vi så formen eksempel.
>> Et meget vigtigt er ikoner.
Og ikoner er en måde for dig at tilføje interessante ting, ligesom check
mærker, eller plusser eller ven ikoner, eller genstart ikoner,
eller hvad til din web-app.
Så igen, hvis vi ind her, de komponenter, glyphicons,
er ikonerne rådighed for Bootstrap.
Der er en udtømmende liste over alle dem, der her.
Så bare som et eksempel, lad os prøve og tilføje en.
>> Så som Facebook, er vi til at forsøge at have en Add Friend knap.
Lad os først tilføje nogle stil.
knap class = "Btn btn-succes".
Og der går vi.
Lad os tilføje et ikon her.
Hvad ikon, tror du, måske give mening at sætte her?
Du har sikkert set på nogle web-sider eller hvad,
men hvad er et eksempel på et ikon, kunne gå godt inde i denne knap?
Du er velkommen til at gennemse dette synspunkt, hvis du har brug inspiration.
Der er en masse nyttige dem tilgængelige her.
Ja?
>> PUBLIKUM: Måske glyphicon bruger en?
NEEL MEHTA: OK.
Denne.
Det er temmelig godt.
Ja.
På Facebook, jeg synes, det ville se lidt ligesom det.
Så her er, hvordan vi går om tilføje ikoner til vores sider.
Vi skal bare have en span-- en spændvidde er en neutral beholder til noget.
En div er en beholder til noget, en spændvidde er en anden beholder.
divs har linjeskift omkring dem, spænd ikke.
Så der er forskellige måder at der generiske beholdere.
Ligesom det ikke giver mening at sætte det inde i et afsnit eller noget.
Vi har fået til at sætte det inde noget om,
så vi bare sætte indersiden af en spændvidde.
Så span class = glyphicon glyphicon-user "tæt spændvidde.
Og vi har nu ikon inde i knappen.
>> Så det ser ikke helt ulig hvad du kan se på facebook.com.
Og så det er rart, at disse kan faktisk placeres hvor som helst, du ønsker.
I din header barer, på din liste grupper.
Hvad end.
Det behøver ikke at være indersiden af en knap.
Så som et eksempel, kan jeg sætte den samme klasse her.
"glyphicon glyphicon-bruger".
Og det ser ud på samme måde.
Så disse icons-- du kan bruge span class = "glyphicon glyphicon-hvad".
Og der vil lade dig tilføje ikoner hvor du vil.
Og ikoner er en meget vigtig del af at gøre en hjemmeside udseende
professionel og godt gået.
Så du skal ikke overdrive det, men det er ofte en god ting at vide.
>> Paneler, igen.
Jeg vil bare gøre det igen som et resumé fordi de er slags involveret.
Du vil bemærke, at der i dreje din normale HTML
websted i en Bootstrap-afied websted, har du
at tilføje ekstra struktur til hjemmesiden.
For eksempel har vi ekstra divs her bare fordi dem
er nødvendige for at gøre et panel.
Så bare holde det i tankerne, at du bliver nødt til at have ekstra struktur.
Så "panel panel-default".
Måske er det panel-header.
Jeg synes det er panel-overskrift.
Ja.
Der vi går.
Så igen, er der vores panel.
>> En ting mere, at vi dækkede ikke endnu, borde.
Tabeller, som standard udseende slags grimme.
Sådan her.
Men tabeller er naturligvis, en meget vigtig del
af, hvad du vil gøre i webudvikling.
I Pset7 f.eks CS50 Finans, som vil komme ud snart,
du skal bruge en masse af tabeller.
Og en masse af web dev bruge en masse af tabeller til at vise oplysninger,
som aktier, eller score, eller hvad.
>> Så styling tabeller er faktisk meget let.
Du tilføjer bordet klasse til dit bord.
Og, jeg tør sige, det ser temmelig nice.
Du kan gøre ekstra ting, lignende "table table-stribede".
Og du vil se resultaterne her.
Du kan gøre table-omkranset.
Der er en masse muligheder, du kan.
Men dybest set, at tilføje et tabel, bordet klassen,
vil gøre dine tabeller ser ret nice.
Så det er en kort gennemgang af nogle af de mere vigtige stilarter
og komponenter, du vil nødt til at bruge for Bootstrap.
Så jeg tror, at wraps op på vores smukke del.
Eventuelle spørgsmål lige nu om, hvordan at gøre dine hjemmesider smuk?
Hvordan du kan bruge disse komponenter til din fordel?
Føle sig godt tilpas?
Ja?
PUBLIKUM: Måske er et dumt spørgsmål,
men du kan bruge Bootstrap på Wikipedia?
Hvis du redigerer en Wikipedia side?
NEEL MEHTA: Ja.
Så spørgsmålet var, jeg er redigering af en Wikipedia side,
kan jeg inkludere Bootstrap stilarter derinde?
>> Publikum: Ja.
>> NEEL MEHTA: Og så Bootstrap er dybest set en stor CSS style sheet.
En CSS style sheet bare siger, når Jeg har denne klasse, vedhæfte disse stilarter.
Så CSS style sheet for Bootstrap kommer til at være noget i retning .btn,
knappen klassen, får som en afrundet hjørne grænse eller hvad.
Så dybest set, Bootstrap det bare et flok af klasser og en flok af stilarter
specificeret for disse klasser.
Så så længe du har denne CSS, denne liste over regler i din side,
du vil få Bootstrap styling.
Det er naturligvis betinget af have bootstrap stilarter i din side
til at begynde med.
>> Og så i Wikipedia, du sandsynligvis ikke kunne
gøre, fordi Wikipedia ikke har Bootstrap i det.
Men hvis det havde Bootstrap, du sandsynligvis kunne gøre det.
Og hvis du ville, kunne du omfatter det, men der kan
bryde eksisterende layout af siden.
Men meget godt spørgsmål.
Du kan bruge Bootstrap hvor det er inkluderet,
men det er ikke bygget på som standard.
>> PUBLIKUM: Tak.
>> NEEL MEHTA: Ja.
Flere spørgsmål?
Ja.
Så uanset om du er her eller derhjemme, bare huske getboostrap.com-- igen,
getboostrap.com-- er din ven.
Når du bruger Bootstrap, vil dette give dig
instruktioner om, hvordan du får gang, hvordan man bruger komponenter.
Der er nogle cool JavaScript plug-ins, som vi ikke vil gå over her,
men de er værd at tjekke ud så godt.
Så dette er din ven.
Det er bare vigtigt at få bruges til, hvordan man bruger dette.
>> Så lad os snakke lidt om gør responsive hjemmesider.
Så som jeg sagde før, brugte folk deres bærbare computere, de bruger deres telefoner.
Og som du måske godt forestille mig, det er en meget anderledes skærmstørrelse end det.
Og så den samme hjemmeside der ser godt ud på min telefon
kommer ikke til at se godt ud, nødvendigvis, på en computer.
Så hvad du skal gøre er gøre dit website tilpasse sig.
Det har til at tilpasse sig de forskellige skærmstørrelser, at det er på.
>> Det har at sige, jeg ved, jeg er på en computer, en stor bærbar computer, skal jeg udvide.
Jeg ved, jeg er på en telefon, skal jeg skrumpe.
Og så Bootstrap giver nogle meget, meget nyttige værktøjer til at gøre dette.
Så Bootstrap lader dig pause en hjemmeside i 12 kolonner.
Du kan lave rækker og har 12 kolonner.
Og du kan partitionere dem, men du vil.
Du kan have én, store ting, hvilket er 12 kolonner bred.
Du kan have to ting som er seks hver.
Du kan gøre én ting, der er fire, en, der er to, eller en, der er seks.
Du kan gøre tre, tre, tre, tre.
Du kan gøre, hvad opdeling, som du ønsker.
>> Så måske din webside skal have en venstre kolonne, der er en tredjedel af bredden.
Så det ville være fire kolonner bred og resten af siden
ville være otte kolonner bred.
Så dette er et eksempel.
Lad os trække op et andet eksempel.
>> PUBLIKUM: Er det altid nødt til at være en endnu split?
Kunne det være en syv, fem split?
>> NEEL MEHTA: Ja.
Det kunne være syv, fem.
Ja.
Så længe det tilføjer til 12, er det fint.
Så lad os gå tilbage her.
Igen kode, der er her er også tilgængelige her,
under responsiv eksempel.
Så jeg bare trukket op nogle eksempel reagerer kode.
Så du gøre dette ved hjælp en ting kaldet række.
Row er blot en anden klasse.
Det er en anden stil, du tilføjer på din DIVS at gøre dem deres egne komponenter.
>> Så du siger, div class = "række" at lave en række,
at give dig selv 12 kolonner af rummet.
Og så er du sætte kolonner inde i det.
Så her er vi col-xs-6.
Må ikke bekymre dig om xs.
Vi vil tale om i et sek.
Men dybest set, har vi en ting, der er seks brede.
Vi kalder det efterlod.
Og så det er venstre ramme.
Vi har én ting, der er seks af de 12 kolonner brede.
Og at man er på rette.
>> godt bare giver mærker din div fylde det op grå.
Så det er bare så vi kan se, at de er forskellige.
Og så dette det første eksempel.
Det er et meget simpelt eksempel på, hvordan du ville bruge dine rækker og kolonner her.
Du definerer træk med class = "række".
Og så skal du gøre class = "col-XS-6" gør halvdelen, "COL-xs-6" til at gøre den anden halvdel.
Her er en mere kompliceret eksempel.
Lad os se på den lille, Kæmpe, Resten én.
>> Vi kan gøre Tiny to kolonner bred, vi kan gøre Kæmpe seks kolonner bred,
og resten fire kolonner bred.
Der tilføjer op til 12.
Og så disse ender spænder over bredden på siden.
Igen har vi en række udenfor.
Så har vi div class = "col-xs-2" og derefter 6, og derefter 4.
Og det vil give strukturen for os.
Og så vi kan sætte hvad dælen vi ønsker inde her.
I stedet for Tiny, kan vi sætte en knap.
knap class = "Btn btn-primær".
Og så mærke til, at vores knap ikke tager op hele bredden,
men i det mindste det er begrænset til så meget plads.
>> Så det er alt sammen meget godt.
Så kan vi nu bryde op vores web side i stykker, bredde klogt.
Vi kan sige, at vi ønsker at have en venstre kolonne, og en højre søjle, og så videre.
Men vi har ikke gået over hvordan du gør det lydhør.
Og så Bootstrap lad os gøre det så godt.
Det har disse ting kaldet breakpoints.
Så det har en mulighed for at vide, om du er på en bærbar computer, du er på en tablet,
du er på en telefon vandret, eller du er på en telefon lodret.
Den kender skærmstørrelsen.
Og bryder dette i fire categories-- stor eller lg, som er bærbare, normalt.
md eller medium, der er tabletter.
sm, lille.
Eller xs, ekstra lille.
Og så når du angiver en kolonne, du siger,
det bør være seks kolonner bred på en ekstra lille enhed.
Det er derfor, vi gjorde COL-xs-6.
Vi siger, at det skal være seks af de 12 kolonner brede
på en ekstra lille enhed.
Og hvis det er noget større, vi bare standard bruge den ekstra lille størrelse.
Hvis det er noget større end ekstra lille, vil det være seks brede.
Og så vi kan udnytte disse til at gøre vores kolonner
optager forskellig mængde kolonner baseret på skærmstørrelsen.
Lad os gå til denne lydhør resizing.
Så vi har vores kolonner.
Og det siger, "col-lg-6 col-xs-12".
Så givet, hvad du ved indtil videre, hvad gør du
tror vil ske på en stor skærm?
Tja, det er lidt given måde, men hvad gør
du tror det vil se gerne på en stor skærm?
Og hvorfor er det?
>> PUBLIKUM: Er det, at på en stor skærm, er det
kommer til at tage kun del af den fulde rum?
Ligesom halvdelen af det, jeg gætte?
>> NEEL MEHTA: Ja.
>> PUBLIKUM: Og på mindre skærmen, går det
at tage hele skærmen, det 12.
NEEL MEHTA: Ja.
Højre.
Så som et eksempel, lad os bare se hernede.
Ja.
Så på noget, der er LG eller bigger-- så min computer sker
skal lg fordi det er temmelig wide-- det vil gøre
det ved siden af hinanden, fordi det er col-Ig-6.
Så fordi det er på store, det gør det seks kolonner bred og seks søjler bred.
Lad os se hvad der sker, hvis jeg gøre dette til et mindre.
Jeg bare at un-fuld skærm dette.
Og jeg har tænkt mig at skrumpe skærmen.
Jeg har tænkt mig at skrumpe skærmen, så det ser ud som jeg er på en mindre enhed.
Så jeg har tænkt mig at skrumpe det på denne måde.
>> Og voila.
Det er nu stablet fordi nu er vi gået
fra store at-- dette er sandsynligvis en ekstra lille skærm størrelse.
Og så nu siger, OK, vi er ikke i store, vi er i ekstra lille land.
Så vi kommer til at bruge den ekstra lille størrelse.
Og vi vil xs-12, xs-12.
Så det kommer til at blive stablet.
Og bare bemærke, at der er en ting kaldet et breakpoint.
Et breakpoint er, hvor du har lavet overgangen
fra ekstra små til små, små til store, og så videre.
>> Så bare bemærke, at da jeg glider denne ud, til sidst vil du komme til det punkt
hvor de vil hoppe til at være ved siden af hinanden.
Værsgo.
Så der er den breakpoint lige der.
Så vi kan gøre det endnu mere kompliceret.
Nu kan vi sige, disse tingene skal være fire brede.
Det vil sige, de skal tage omkring en tredjedel
af talen på meget store enheder.
På et medium anordning, skal det ske op halvdelen af skærmen, fordi det er md-6.
På en meget lille enhed, det bør tage op 12.
Og så dette ser temmelig naturligt.
Lad os bare prøve det ud for os selv.
>> Så på en stor skærm, de er fire brede.
Shrink det en lille smule.
Og de er nu seks brede.
Så dette er seks, seks, seks.
Shrink det endnu mere og derefter vil de være helt stables.
Så det for eksempel giver mening, hvis du har kort, som nyhedsartikler kort,
for eksempel hvor hvis det er på en meget stor skærm,
det er OK, hvis du har flere ved siden af hinanden fordi de alle ville få plads nok.
Men de har brug for at have plads nok.
Så på en mindre skærm, du gerne vil give dem
mere plads, proportionalt, på siden.
>> Så som en virkelige verden eksempel lad os sige, vi har Twitter.
Og vi har tekstfeltet, så du kan tweete på siden.
Og vi har en liste over trending emner på højre side.
Så på en stor skærm, vi skal har dem være ved siden af hinanden,
så du kan se dem på et glas.
Men på en mindre skærm, vi skal gøre 12 og 12,
således at de emner Trendvisning er under tweet-området.
Fordi tweet område er det vigtigste ting, og på en lille skærm,
emner Trendvisning ikke sagen helt så meget.
Og så vi sætter dem lige under, så at de begge kan få plads nok.
Mening indtil nu?
>> Publikum: Ja.
>> NEEL MEHTA: Fast stof.
Så det er alle de eksempler, jeg har her.
Lad os forsøge at gøre en udfordring.
Så igen, det er udfordring-2.html for dem af jer følgende sammen derhjemme.
Så min kammerat, Mark Zuckerberg, kom til mig den anden dag.
Og han er ligesom, Neel, jeg har fået ret god til webdesign.
Jeg kan gøre HTML.
Jeg har lavet denne lille, ny redigering på Facebook.
Jeg har en ny idé til, hvordan vi skal style Facebook.
Og her er det.
Lige her.
Her er nogle eksempler kode.
Så det hedder Fancybook.
>> Vi har nogle statusopdateringer.
Vi har Nemo, Mike Kosowski, ***-- tre statusopdateringer.
Og så har vi en liste over online venner lige under det.
Så han har gjort sit hjemmearbejde.
Han kender en lille smule om Bootstrap, han gjort listen visning,
han har gjort en lille smule af HTML.
Så han har websiden.
Men han er ligesom, Neel, det gør jeg ikke forstå lydhør design overhovedet.
Har du nogen eksperter, der kunne hjælpe mig med det?
Og heldigvis, du er nu eksperter i reagerende design.
>> Så hvad han fortalte mig, var, at han ønsker Fancybook at se sådan ud.
På en meget lille enhed, som en telefon, alt
bør stables, som her.
Så du har tidslinjen forhånd, op øverst, og derefter
du skal have chat nederst.
Men på en tablet eller et medium enhed, bør det være halvt,
som i tidslinjen bør være halvdelen og listen over chat venner
bør være på den anden halvdel.
>> Så på en bærbar computer, tidslinjen bør tage op tre fjerdedele
og derefter chatten hækken skal tage en anden kvartal.
Og så han er ligesom, Neel, jeg har denne kode her, men det er ikke lydhør.
Det har brug for at opføre sig som dette.
Så min udfordring til dig gives denne kode her--
Hvis du opdaterer din CodePens, vil du se dette.
Eller hvis du bare indsætte i koden på udfordringen-2, vil du se dette.
>> Her er dette eksempel kode.
Du vil se nogle XXXS.
Jeg vil have dig til at ændre XXXS, således at tidslinjen og listen over venner
følger disse specs her.
Må ikke bekymre dig om, hvad der er inde tidslinjen for nu.
Vi får at i det næste trin.
Men for nu, lad os se om vi får disse ting til at splitte det op på denne måde.
Så gør det mening?
Så hvis du er hjemme, pause videoen og prøv
for at gøre din webside se lydhør som denne.
Hvis du er her, tage som to, tre minutter.
Du er velkommen til at chatte med en nabo, og prøve, og reparere Mr. Zuckerberg
responsive design problem.
Hvis du har spørgsmål, velkommen til at lade mig vide.
Føle sig godt tilpas?
Færdig?
Pæn.
>> PUBLIKUM: [uhørligt].
NEEL MEHTA: Hvad?
>> PUBLIKUM: Jeg er god.
>> NEEL MEHTA: Åh, godt.
Pæn.
PUBLIKUM: De ting om de 12, er det, at Bootstrap
behandler en given skærmplads som 12 enheder på tværs og derefter opdeler at op?
Hvordan præcist gør proportionering arbejde for dette?
>> NEEL MEHTA: Ja.
Så spørgsmålet er, hvordan gør proportionering
arbejde for Bootstrap, ikke?
>> Publikum: Ja.
NEEL MEHTA: Så når du har en div class = "række",
uanset hvor stor skærmen er, Bootstrap vil give dig 12 enheder
af samme størrelse for at tage så meget størrelse.
Så i col 1, er det altid 8,33% af størrelsen af skærmen,
uanset om det er denne brede eller det er denne brede.
Og så, selvfølgelig, på en mindre skærmen, hver kolonne er mindre.
Du har stadig 12 kolonner bred, er det en mindre.
Så det er op til dig at sørge for at tingene fylder mere kolonne,
proportionalt at kompensere denne mangel på plads.
Giver det mening?
>> Publikum: Ja.
Tak.
NEEL MEHTA: Godt spørgsmål.
PUBLIKUM: På en stor skærm, kan du få
tidslinjen tage op tre fjerdedele?
>> NEEL MEHTA: Ja.
NEEL MEHTA: Hvordan fyre føler?
God?
Afkøle.
Så lad os komme tilbage.
Og lad os forsøge at løse denne del Mr. Zuckerberg hjemmeside.
Så de tidslinjer er heroppe, på toppen, og listen over venner
er i bunden.
Og så vi bare nødt til at tildele søjler, med dimensionering proportional,
i hver af disse.
Så denne første *** er for tidslinjen.
Hvilke klasser gør vi sætte i her?
Hvad har du fyre sætte i her?
Så husk, på en stor skærm, den har brug for at tage tre fjerdedele af bredden.
Og så hvad stil ville give dig det?
På en stor skærm, tre fjerdedele af bredden.
Hvilken klasse bruger vi der?
PUBLIKUM: Så vi bare kommer til at være redigere den første instans af klassen.
NEEL MEHTA: For nu.
Ja.
>> PUBLIKUM: Vi er ikke redigerer hver, individuelle træk tidslinjen?
NEEL MEHTA: Ikke nu, i hvert fald.
Så det hele er en blok.
Vi er bare at ændre udformningen af blokken.
Så her vi col-lg-9, fordi det er ni ud af de 12 bred på en stor skærm.
Og så på en mellemlang skærm, hvor mange kolonner jeg få?
PUBLIKUM: Det er meningen at være halvt af.
NEEL MEHTA: Right.
Så hvor mange er der?
>> PUBLIKUM: Så seks.
NEEL MEHTA: Seks.
Og så ekstra lille bør være-- hvis det fylder hele bredden af rækken,
hvor mange skal det være?
PUBLIKUM: 12.
NEEL MEHTA: 12.
Ja.
Og nu vi er nødt til at ændre denne andre dem,
så det fylder resten af rummet.
Så col-lg--
PUBLIKUM: Det kommer til at tage op hele skærmen?
NEEL MEHTA: Det tager op en fjerdedel på skærmen på en stor enhed,
som vi viste her.
>> PUBLIKUM: Tre.
>> NEEL MEHTA: Tre.
Og så col-md-6 til at tage udgør resten af rummet.
COL-xs-12.
Så nu har vi tidslinjen optage tre fjerdedele
på siden i den store skærm og derefter en fjerdedel på siden.
Og derefter, hvis størrelse skærmen ned, det skal ændre størrelse i overensstemmelse hermed.
Så det er stablet nu, på en meget lille skærm.
Og hvis vi størrelse det op en lille smule, de skal være nøjagtigt halvt.
Så vi har gjort det hidtil.
Meget sejt.
Og så vil vi ikke gøre det anden del af udfordringen.
Du kan gøre det selv.
Men dybest set, er du nødt til forsøge at gøre disse lydhør
som well-- gør tidslinjen elementer, selv, lydhør.
Så nu har vi været igennem alt du behøver at vide
om lydhør side af Bootstrap.
Eventuelle spørgsmål om lydhør design med Bootstrap
og hvordan du kan gå om at gøre det?
Ja?
>> PUBLIKUM: Er det samme, hvis vi havde et indbygget video
og vi ønskede at styre skalaen ved hvilke video was--
størrelsen af videoen går fra laptop til telefonen.
NEEL MEHTA: Ja.
Mere eller mindre.
Du er nødt til at fortælle video til fylder så meget plads som det er givet,
hvilket er lidt irriterende nogle gange.
Men den centrale idé er den samme.
En video, som enhver anden genstand i siden, ligesom en knap eller hvad,
så længe du bruger kolonner og rækker, de
du kan give det en vis mængde plads.
Og så at få det til at ære, der er en forskellige spørgsmål, fordi som YouTube
indlejrer har en vis, foretrukne størrelse.
Men teoretisk på mindst, vil det arbejde.
Afkøle?
>> PUBLIKUM: Jeg formoder da, for et billede, gør du faktisk
nødt til at have forskellige versioner af det samme billede i forskellige størrelser
til laptop versus iPhone?
Ja Spørgsmålet er, har vi brug for at har billeder, der er lydhør så godt.
Og ja, kan du gøre det.
Jeg synes det er i CSS.
Men Bootstrap tillader dig at gøre det så godt.
Du kan have responsive billeder.
Du kan få dine billeder resize i forhold til størrelsen af siden.
Og der er en meget ny ting HTML5, den nyeste version af HTML,
og CSS3, den nyeste version af CSS, der
vil lade du anmoder forskellige billeder baseret på skærmstørrelsen du er på.
Normalt er det godt nok til bare have dit billede bare krympe eller vokse til
dog stor den skal være.
Men du kan, hvis du vil at have en 32 med 32
for meget små skærme, og 64 af 64 for en stor skærm,
og derefter tjene dem selektivt.
Du kan gøre det.
Det sker af nogle mennesker.
Det er stadig temmelig forkant.
Men kort svar, lydhør images-- Bootstrap kan redde dagen der.
Afkøle?
>> PUBLIKUM: Tak.
>> NEEL MEHTA: Så lad os taler virkelig hurtigt om, hvordan
at få dette i din egen webside.
Lad os sige, du ønsker at gøre din egen hjemmeside ved hjælp Bootstrap.
Og så lad os bare lige gå igennem det sammen.
Lad os sige, du gør bare en normal HTML-side.
Du er velkommen til at følge med i hvad din favorit editor er.
Så vi bare have nogle HTML-side.
Vi kan gøre! DOCTYPE html.
Dette er også html, vores side.
Intet nyt.
Vi har gjort det før.
Så her har vi vores HTML og vi kan sætte ting inde her.
Vi kan have vores knap.
Og som jeg sagde før, dette ikke nødvendigvis at gå på arbejde.
Hvorfor kan det ikke virker?
Hvorfor vil vi ikke få vores flot, farverig knap?
>> PUBLIKUM: Fordi vi ikke knytte det til Bootstrap projekt eller filen?
NEEL MEHTA: Ja.
Korrekt.
Fordi Bootstrap-- det er bare en fancy CSS-fil.
Det er en serie af stilarter, er knyttet til dine elementer.
Her har vi at vide det, at vi vil bruge disse stilarter.
Jeg vil størrelse, at en lille smule op.
Vi har fortalt det, vi ønsker at bruge disse stilarter, men vi aldrig
fortalte den, hvad de stilarter er.
Og det er, hvad din spørgsmål fra tidligere var.
Det er svaret på det.
Vi er nødt til at finde en måde at få de stilarter og inkludere dem i vores side eller anden måde.
Og så Bootstrap vilje vise os, hvordan man gør det.
>> Så hvis du går til toppen her, Kom godt i gang.
Der er forskellige måder at hente den.
Det er måske ikke give mening nødvendigvis.
Bootstrap-- det vil lade du fat i CSS-fil selv.
Og du indgår det i din egen side.
Source Code er, hvis du ønsker at hacke den ved dig selv.
Du behøver ikke det virkelig.
Sass er et sprog der kompilerer i CSS.
Tænk på det som en præprocessor.
Meget gerne PHP er et præprocessor af HTML, Sass er en præprocessor til CSS.
Så hvis du ønsker at gøre det på den måde, kan du gøre det.
>> Den nemmeste måde er at bruge en CDN, eller levering af indhold netværk.
Det er en hjemmeside, der bare serverer en kopi af Bootstrap
meget hurtigt for dig at medtage i din egen side.
Så her er et eksempel.
Det vil give dig dette link element.
Et link element fortæller din browser, tage de filer gemmes her
og medtage den i vores web-side.
Og i dette tilfælde, er det bootstrap CSS-fil.
Så vi vil bare kopiere denne webadresse, eller denne tekst, og vi vil smide det inde
af vores hoved.
>> Og jeg vil ikke starte siden for dette, men du kan stole på, at det virker.
Linket vil få dig CSS.
Medtage den i din side, og så vil du være
i stand til at bruge al den Bootstrap klasser, som du kender og elsker.
Hvis du ønsker at holde det lokalt og har det på dit eget filsystem
i stedet for at skulle gå til internettet til at få fat i det,
ligesom hvis du ønsker at bruge sitet offline,
kan du bruge download mulighed.
Men for det meste, ved hjælp af CDN er temmelig hurtigt, fordi den måde,
det er holdes opdateret for dig så godt.
Du er nødt til manuelt at opdatere det heller.
Give mening?
>> Så en masse værktøjer vil have denne indbyggede i som standard. I dit Pset7 og Pset8,
Jeg tror Bootstrap er automatisk inkluderet.
Og CodePen, for eksempel, er det allerede
medtaget, fordi jeg tilføjede tilføje, at indstillingen.
Så hvis du nogensinde ønsker at spille rundt med det, kan du bare gå på CodePen,
eller gå på dit id, eller hvad.
Og du kan være i stand til at adgang Bootstrap der,
men det er ikke altid bygget i, som standard, til internettet.
Give mening?
>> Ja.
ligesom en recap-- vi har som fem minutter tilbage.
Men som et resumé, i nye web-sider, du kan medtage Bootstrap som denne.
Og når du har det inkluderet, du kan gøre alle de sjove ting her.
Du kan gå på, og du kan bare bladre CSS, kan du tilføje nogle seje stilarter,
du kan have komponenter ligesom knapper,
og tabeller, og listen elementer, som vi nævnte.
Der er nogle seje JavaScript plugins, som du måske ønsker at udforske.
De tilføjer nogle cool interaktivitet til websiden.
Som denne gør en modal dialog.
>> Så der er nogle sjove ting du kan gøre med Bootstrap.
Så mit råd til dig er at gå videre og bruge det i dine egne projekter,
følg instruktionerne vi lige gjorde, hvordan man får det,
og lige læst Bootstrap, fordi du vil lære mere om, hvad de skal gøre.
Og så vi har gået i dag, hvordan man bruger
dokumentationen, hvad bygningen blokke er, og hvordan det er konceptuelt.
Så nu er min udfordring til dig er lave en hjemmeside ved hjælp af Bootstrap.
Gå ind i docs.
Og bruge de værktøjer, som vi har lært indtil nu at forsøge at analysere dem
og forstå dem.
Og bruge disse stilarter og værktøjer du ser der i dit websted.
Og det er bare en stor, eksperimentel proces.
>> Prøv en bestemt stil.
Virker det?
Er er ikke?
Prøv at sætte ting sammen.
Se hvad der sker.
Det er i høj grad en selvstændig vejledt, discovery proces.
Men i dag har vi lært meget grundlæggende i, hvad der er Bootstrap?
Hvorfor virker det?
Hvordan virker det?
Hvordan kan vi begynde at bruge det, i første omgang?
Og så nu, at du er over den pukkel, du
bør være i stand til at gøre det temmelig jævnt ved dig selv.
>> Så endnu en gang, hele kode, vi gjorde, er her.
Så hvis du nogensinde ønsker at få en børste op på,
lignende, hvad er en hurtig snyde ark til alle de stilarter?
Du kan gå ind i denne prøve her.
Vi har nogle eksempler stilarter her.
Hvis du ønsker at prøve det udfordringer igen ved dig selv,
du kan prøve dem her og tjek de løsninger.
Så dette link vil være inkluderet på de dias, der
vil blive sendt ud til dig selvfølgelig.
Men det er også op her.
Du kan holde pause i videoen, hvis du ønsker.
Alle de oplysninger, du behøver, er kommer til at være lige her, på dette websted.
Så hvis nogen har spørgsmål, kan vi tage dem for de næste par minutter.
Ellers tak alle meget til at se.