Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Så hei til alle som er å se her,
eller ser på nettet, eller eksternt.
Mitt navn er Neel, dette er CS50.
Og dagens seminar er Responsive Web Design med Bootstrap.
Det er et tema som er svært nær hjertet mitt.
Forhåpentligvis vil det være nær hjertet ditt
samt ved slutten av dagens seminar.
Så Bootstrap.
Hvor mange av dere har gjort noe slags webutvikling før?
En god mengde?
En liten bit.
>> Så Bootstrap er verdens mest populært, front-end rammer.
Det er brukt by-- jeg har valgt en par tilfeldig websites--
Lyft, Newsweek, og Vogue.
Den brukes av en rekke nettsteder.
Det er en web-design rammeverk som vil la deg gjøre nettsteder
både vakker og følsom.
Og jeg skal gå over disse to begreper her.
Vakker.
Så du har normal nettside på til venstre, som er laget av bare HTML.
Du har lært HTML i klassen og i snitt på lengden.
Bootstrap er en måte å gjøre nettsteder vakkert.
Du kan ta hva som skjer på venstre side av skjermen
og slå den inn i hva som skjer på høyre side av skjermen med veldig,
veldig, veldig lite kode.
>> Du får den fin blå knappen, får du fancy, avrundede kanter på skjermen,
du får listevisningen, får du kort, og så videre med svært lite kode.
Det er faktisk ingen CSS som du må skrive selv.
Så Bootstrap lar deg har disse pre-bygget CSS
komponenter du kan sette inne på nettsiden din
slik at den ser vakker uten veldig mye arbeid på egen hånd.
Det er virkelig en bootstrap, et utgangspunkt,
for webutvikling eventyr.
Og så når du er bare tentamen opp en nettside,
det er et veldig godt sted å komme i gang.
Du kan få en god leter nettsted med svært, svært lite arbeid.
Og ja, vi skal å gjøre dette selv
i løpet av fem like minutes-- innen 10 minutter.
Så det er ganske lett å gjøre noen gode nettsteder.
Så det er den første delen.
>> Den andre part-- responsive.
Folk nå til dags, ikke bare tilgang til Internett på sine bærbare datamaskiner.
Egentlig, så fra 2014, flere personer tilgang til Internett via mobile enheter,
som telefoner eller tabletter, eller tjenester, eller så videre enn nettsteder.
Og nettsteder har tradisjonelt vært utformet med bærbare eller stasjonære PCer
i tankene.
Og så nettstedene er ofte ikke meget godt egnet til telefonen.
Hvis du noen gang besøkt harvard.edu på telefonen,
det er slags en irriterende erfaring, ikke sant?
Det er fordi det ikke er responsive.
Vi prøver å gjøre nettsteder som er responsive,
som reagerer på skjermstørrelser folks.
>> Så hvis det er en telefon, er det kommer til å gå på telefonen.
Hvis det er en tablett, er det kommer til å gå på tablet.
Den justerer for å matche skjerm som blir brukt.
Og så Bootstrap gir også noen svært, svært nyttige verktøy for det.
Og vi kommer til å diskutere det også.
Så igjen, det er to deler til Bootstrap-- vakker og ansvarlig.
Vi kommer til å snakke om dem.
Først vakker.
Og så forståelsesfull.
>> Så alt koden som vi er skal snakke om today--
vi kommer til å ha en rekke eksempler, mange utfordringer, og så on-- det
alt liv på denne nettsiden her.
Dette lysbildet er det vi sendte ut.
Så hvis du er her, kan du føle fritt til ikke å skrive det ned.
Og hvis du ser eksternt, føler fritt til å trekke denne opp på datamaskinen din
også.
Du vil sannsynligvis trenger det i løpet av I løpet av dette seminaret.
>> Så vi kommer til å bruke en nettside som heter CodePen,
som er et samarbeids koding miljø, i løpet av dette seminaret.
Og CodePen-- og jeg skal vise deg her real fast--
det tillater deg å skrive HTML samarbeide.
Jeg kan skrive det, jeg kan sende den til dere kan dere redigere det.
Selv om du er ekstern, du kan fortsatt få tilgang til det på den måten.
Du kan skrive HTML-kode på topp og det vil automatisk
omdannes til web side nederst.
Så det er en måte for deg til raskt å prøve ut kode
uten å gjøre noen form for ting på IDE, eller din egen nettside,
eller hva.
>> Så gå videre og trekke opp dette nettside, hvis du er fjern
eller hvis du er her, spesielt hvis du er ekstern.
is.gd/cs50boostrap.
Ingen caps, ingen understrek, ikke noe.
Så de av dere som er her, bare gi meg en tommel
opp når du har trukket opp denne websiden.
God?
>> PUBLIKUM: Ja.
>> NEEL Mehta: Så vi får til at i løpet av et sekund.
Så først, skal vi få til, hvordan du gjøre nettsteder vakker do?
Vi kommer til å lære å ta kjedelig, gamle HTML, som jeg viste deg før,
og slå den inn i virkelig fine komponenter,
som hyggelige widgets, fint, farget knapper og etiketter og tabeller,
og det hele tatt, ved hjelp av Bootstrap.
Så hvis vi kunne alle gå over til CodePen at du bare trakk opp.
Det skal se litt ut som dette.
Ser det ut som dette for alle?
>> PUBLIKUM: Ja.
>> NEEL Mehta: Hvis du er ekstern, det bør se slik ut også.
Hvis ikke, vil jeg vise deg snart hvordan du kan få det til å se slik ut
i en fremtidig del av videoen.
Så her har vi skrevet en helt enkel HTML,
som den typen du har brukt i klassen.
Det er ganske basic.
Uten frills.
Og vi har noen ting.
Vi har utviklet en veldig, helt grunnleggende starte opp
kalle Yalp! som du kan finne restauranter i området,
og finne anmeldelser og retninger på alle disse.
Det er et veldig godt konsept.
Det har aldri blitt gjort før.
Det er et veldig unikt navn, også.
>> Så det vi kommer til å prøve å gjøre er å hjelpe eieren
av Yalp! gjøre sin nettside ser virkelig, virkelig kult.
Så til å begynne med, eieren av Yalp! har gjort et lite søk
boks, og en liten knapp, og så kanskje litt
uthevede området for en uthevede restaurant, og deretter
en liste over andre restauranter som befinner seg på området.
Så vi kan bare gå gjennom HTML-koden virkelig fort.
Hvor komfortabel er du gutta med HTML?
Vi har gjort en liten bit seksjon og også i klassen.
Skikkelig?
>> Så akkurat som en oppsummering, HTML handler om å ha
koder eller elementer som forteller datamaskin hvordan du legger ut på nettsiden.
Så dette h1 her-- starte h1, Velkommen å Yalp !, slutten h1-- forteller datamaskinen,
tegne en stor header den sier: Velkommen til Yalp!
inni der.
Vi har også former.
Vi kan innganger som dette, tekst innganger, som vil gjengi som tekstbokser
du skriver inn.
Du har også knapper.
Du får en fin, klikkbar knapp.
Det gjør ikke noe rett nå, men du får en knapp.
Du kan ha divs, eller skillevegger, til bryte opp siden din inn i ulike grupper.
>> Du kan ha avsnitt, du har knapper.
Hvis du har ledd, deretter du har sorterte lister, ul,
og lister innsiden av det, li.
Så disse er det helt grunnleggende byggesteinene i en web-side.
Og ja, ganske mye hvert nettsted du se
kommer til å bli bygget bruker de samme verktøyene.
Selvfølgelig gjør de ikke alle ser dette dårlig fordi vi er
kommer til å krydre det opp litt.
Så la oss denne kjedelige gamle HTML og start transformere det til det vakre området
at vi bare så et par minutter siden.
>> Så la oss starte veldig enkelt.
Så vi har denne knappen her.
I Bootstrap, som vi så, kan vi ha en fin, vakker, blå knappen.
Og det er gjort ikke ved å gjøre egendefinert CSS.
Det er ingen tilpasset CSS her.
Det er gjort ved å legge klasser til HTML-elementer.
Hvis du har prøvd klasser, eller HREF-ene, eller ankere, eller type = "text" for inputs--
HTML-elementer kan ha disse egenskapene.
De kan ha ekstra informasjon at du kan gi dem.
>> Og så, i dette tilfellet klasser er attributtet.
Så du ville skrive, knapp class = noe på innsiden av strenger.
Og som attributt vil fortelle datamaskin, er dette ikke noe, gamle knapp.
Det er en knapp som er i denne klassen av knapper.
Og så Bootstrap, hvis du gir den en viss stil på ditt element,
det vil trekke det en bestemt måte.
Så jeg skriver "btn btn-primære.
btn å være en forkortelse for knapp.
Du vil merke nå at min stygge knappen slått
inn i en fin, vakker, blå knappen.
Det ser veldig fint når vi klikker på det.
>> Og så hva som skjer er at vi har det btn klasse og btn-primære klassen
på vår element.
Og Bootstrap vil gå inn og si, OK, jeg vet at det er disse to klassene.
Ethvert element som har disse to klasser bør trekkes som dette.
Så det er kjernen i hvordan du kobler stiler til elementer i Bootstrap.
Du bare feste klasser til dem og det vil veie det ut som det ser passe.
Så her er et annet eksempel.
I input, kan vi legge til en class = "form-kontroll".
Og jeg vil vise snart der du kan finne ut hvilke klasser
er tilgjengelige for hver type av element.
Men den klasse som vi bare Lagt har fine, avrundede hjørner,
det har fin padding, det har en fin, blå glød til det.
>> Vi kan også gå inn i dette skjemaet.
Og class = "form-inline", noe som vil gjøre vår form, som du kan forestille deg, inline.
Så det ser litt mer som det vi hadde før allerede.
Så før vi går på å style resten av siden, noen spørsmål om hva vi
gjorde?
Vi festet klasser til våre ulike elementer.
Og jeg vise deg senere hvordan du kan finne ut hvilke klasser er tilgjengelige.
Vi festet klasser som har visse stiler.
Og som forteller nettleseren hvordan å layout siden ved hjelp
Bootstrap er gitt stiler.
Eventuelle spørsmål fra publikum?
>> Bra så langt?
Kjølig.
Mange av utfordringene med Bootstrap er bare
vite hvilke komponenter som er tilgjengelig og hvordan du bruker dem.
Og det er alle lært med erfaring og også
gjennom å lese dokumentasjonen, som vi skal snakke om snart.
Så vi har denne div.
Det er bare en kjedelig, gamle ting.
Vi ønsker å understreke det liksom.
Så i Bootstrap, er det en Mange komponenter.
Og dette er getbootstrap.com.
Det er et veldig nyttig referanse.
Den inneholder ting like-- her er hvordan du gjør en knapp.
Og du kan gjøre nav barer, kan du etiketter, kan du fremgang barer,
du kan gjøre liste grupper.
I utgangspunktet er det alle typer av dere kanskje se en nettside.
>> Her er en som vi vil prøve akkurat nå.
Det kalles panel.
Hvis du noen gang bruke Google Nå har de kort.
Eller noen Android-enhet har kort.
De har små hvite bokser som har ting på innsiden av det.
Og så vi kommer til å prøve og gjøre som oss her ved hjelp av en ting
kalles et panel.
Så hvis vi legger class = "panel panel-default "til vår ytre div,
da vi legger en div class = - la oss bare sjekk denne dokumentasjonen.
div class = "panel rubrikken" og deretter div class = "paneler-body".
Igjen, ikke bekymre deg om memorere denne koden.
Det vil være tilgjengelig på nettet.
>> Så vi gjorde dette og nå vår kjedelig, gammel div forvandlet til dette fint, lite kort.
Det har fin padding, det har grenser, står det ut
fra resten av siden, som er ganske kult.
Så la oss gå inn og endre denne Get retninger knappen for å se fint.
Hvem i publikum ønsker å fortelle meg hva jeg kan gjøre for å knappen
å gjøre det ser fint hjelp Bootstrap?
Ja?
>> PUBLIKUM: Vi kan legge til en klasse.
Og vi kunne gjøre class = "btn btn-primær".
NEEL Mehta: Ja.
Det finnes en haug med andre farger tilgjengelig for buttons--
eller for noe, for den saks skyld.
Vi kan gjøre btn-fare og gjøre det rødt.
Det vi går.
Vi kan gjøre btn-suksess å gjøre det grønne.
Vi kan gjøre btn-info-- det er en haug av ting som er tilgjengelige for deg.
Så jeg har liten utfordring for deg nå.
Så det er en ting at jeg har igjen un-stylet.
Denne topp restauranter.
>> Og vi ønsker å bruke en ting kalles en liste gruppe å style den.
Så min utfordring til deg er går på å getbootstrap.com--
Jeg skal trekke den opp her.
getboostrap.com.
Gå til getbootstrap.com, finne delen der de går over liste grupper.
Og du vil se her en eksempel og de riktige klassene
som du kan bruke til å lage din lister i disse fine gruppelisten.
Disse er utarbeidet eksempler av kode eksempler, hva
koden du bruker, hva HTML kode du bruker, og hva som utganger.
>> Så min utfordring til you-- gå på getbootstrap.com,
enten du er her eller hjemme, og å prøve og legge stiler til denne ul
å gjøre det ser fint.
Og bruke en liste gruppe stil.
Du ønsker å ta et par minutter, og søke i dokumentasjonen,
prøve dette selv?
Fordi som du gjør webutvikling, vil du innse mye av arbeidet ditt
kommer til å bli lest denne dokumentasjonen.
Så jeg tror det er bra å bli kjent med hvordan å lese dokumentasjon,
hvordan å finne ut hva som er der, hvilken kode eksempler du kan bruke,
hva du kan utnytte.
>> Så igjen, getbootstrap.com, gå til kategorien Components,
og bla ned til gruppelisten.
Og du vil se eksempler på kode som du kan bruke til å lage din HTML passe det.
Så ta et par minutter og prøve og utforske det selv,
enten du er her eller hjemme.
Hvis du er hjemme, sette videoen kanskje, og prøve det ut selv.
Hvis du er her, hvis du går til vår website-- hvis du oppdaterer siden,
vil du se dette på det.
Denne svært samme koden er bare legge til nye stiler der.
Så ta et par minutter.
La meg vite når du føler deg bra om det, eller når du er helt tapt.
Høres bra?
Kjølig.
Hurtig til side for de av dere hjemme, mens vi venter,
hvis du går videre til GitHub nettstedet at jeg satt opp et par lysbilder siden,
mot begynnelsen av videoen, Jeg har en GitHub repo, depotet,
for denne talen.
Alle disse kode eksempler på at vi vil være snakker om er lagret her.
Så hvis du går til å utfordre-1.html, dette er all koden som vi har akkurat nå
på vår CodePen.
Så du kan bare gå videre, og kopiere dette, og lim den inn i din egen CodePen.
Og på den måten kan du holde opp med hva vi gjør her.
Så har denne siden åpen så godt som vi gå gjennom resten av seminaret.
Igjen, vil du det å se ut som det du se ned på bunnen av skjermen
der.
Føles godt?
Fast.
La oss vente for alle andre å avslutte med hva de gjør.
>> Ja?
>> PUBLIKUM: Anta at jeg ønsket å bruke Bootstrap at home--
NEEL Mehta: Ja.
PUBLIKUM: Jeg ser på nettsiden, Komme i gang siden.
De gir meg alternativene Bootstrap, Source Code, eller Sass.
Hvilke av disse vil jeg?
>> NEEL Mehta: Ja.
Så spørsmålet er, hvordan får du begynte å bruke Bootstrap av oss selv?
Det skjer bare for å magisk arbeide her.
Så hvis vi har tid på slutten av seminaret,
Jeg skal vise deg hvordan du kan få det på din egen nettside.
Som her, har jeg faktisk satt i noen innstillinger som
vil ha det automatisk lastet, men jeg vil
vise deg å gjøre det fra klø på dine egne nettsider.
>> PUBLIKUM: Takk.
>> NEEL Mehta: Ja.
Godt spørsmål.
Føles godt?
Føles godt?
Kjølig.
Så som ønsker å fortelle meg hvordan de gjorde denne tingen ser fin og Boostrappy?
Hva er det første klassen vi legge til ul?
PUBLIKUM: class = "list-gruppen".
NEEL Mehta: Ja. list-gruppen.
Og så hva gjør vi feste til lis?
Noen andre?
PUBLIKUM: Og så, etter at class = "list-gruppe-element".
>> NEEL Mehta: Ja.
>> PUBLIKUM: Og det er den samme for den neste.
>> NEEL Mehta: li class = "list-gruppe-element".
Det du går.
Vi har vår fin liste gruppe, akkurat som vi hadde forventet.
Så det du går.
I 10 minutter, har vi gjort dette kjedelig, gammel Yalp! side
ser hyggelig og profesjonelt.
Og det er bare begynnelsen.
Så nå at du føler deg bra om det, la oss
bare gå videre og snakke om et par flere komponenter som
kan komme til nytte når du gå gjennom hele eventyret.
>> Selvfølgelig, det er mye som her.
Og nå som du har lært hvordan du gjør liste grupper,
du kan ganske mye å lære selv hvordan du gjør noen av disse.
Men, selvfølgelig, la oss bare prøve og gjøre et par mer oss selv,
bare så du får en følelse for hvordan du kan bruke dem.
Jeg bare kommer til å gå til dette eksempel.
Igjen, den koden som jeg bare limt her er tilgjengelig her.
Så gjerne å trekke den opp.
>> Så vi har allerede gått gjennom et par av disse eksemplene.
Så vi har knapper, som vi har allerede sett hvordan du gjør.
Vi kan lage knapper større.
Ved knappen class-- det går, btn btn-lg og btn-standard gjør det hvitt.
Så dette gjør vår knappen større enn det ellers ville være.
Det kan komme godt med, hvis du har big send-knappen eller noe.
Vi så et eksempel gruppelisten, vi så eksempel form.
>> En svært viktig en er ikoner.
Og ikoner er en måte for deg å legge interessante ting, som sjekk sjekk
merker eller plusser eller venn ikoner, eller starte ikoner,
eller hva din web app.
Så igjen, hvis vi inn her, komponentene, glyphicons,
er ikonene som er tilgjengelige for Bootstrap.
Det er en uttømmende liste over alle de her.
Så bare som et eksempel, la oss prøve og legge en.
>> Så som Facebook, er vi til å prøve å ha en Legg Friend knappen.
La oss først legge litt stil.
knappen class = "btn btn-suksess".
Og der vi går.
La oss legge til et ikon her.
Hva ikon, tror du, kan være fornuftig å sette her?
Du har sikkert sett på noen nettsider eller hva,
men hva er et eksempel på et ikon som kan gå bra inne denne knappen?
Føl deg fri til å bla dette synet, Hvis du trenger inspirasjon.
Det er mye nyttig de tilgjengelige her.
Ja?
>> PUBLIKUM: Kanskje glyphicon brukeren en?
NEEL Mehta: OK.
Denne her.
Det er ganske bra.
Ja.
På Facebook, tror jeg det ville se litt sånn.
Så her er hvordan vi går om legge til ikoner til våre sider.
Vi har bare en span-- et spenn er en nøytral beholder for noe.
En div er en beholder for noe, et spenn er en annen container.
divs har linjeskift rundt dem, spenn ikke.
Så det er ulike måter å ha generiske beholdere.
Som om det ikke gir mening å si det innsiden av et avsnitt eller noe.
Vi er nødt til å si det inne noe om,
så vi bare satt inne i en periode.
Så span class = glyphicon glyphicon-user "close span.
Og vi har nå ikonet inne knappen.
>> Så det ser ikke helt ulikt hva du kan se på facebook.com.
Og så det er fint at disse kan faktisk plasseres hvor du vil.
I din header barer, i listen grupper.
Samme det.
Det trenger ikke å være inne på en knapp.
Så som et eksempel, kan jeg sette samme klasse her.
"glyphicon glyphicon brukere".
Og det ser ut akkurat den samme.
Så disse icons-- du kan bruke span class = "glyphicon glyphicon-whatever".
Og som lar deg legge til ikoner hvor du vil.
Og ikoner er en svært viktig del av å lage et nettsted utseende
profesjonell og godt utført.
Så ikke overdriv, men det er ofte en god ting å vite.
>> Paneler, igjen.
Jeg skal bare gjøre dette igjen som en oppsummering fordi de er slags involvert.
Du vil merke at i snu den vanlige HTML
området til en Bootstrap-afied området, vil du ha
å legge til ekstra strukturen til nettstedet.
For eksempel har vi ekstra Divs her bare fordi de
er nødvendig for å gjøre et panel.
Så bare ha det i bakhodet at du må ha ekstra struktur.
Så "panel panel-default".
Kanskje er det panel-spissen.
Jeg tror det er panel rubrikken.
Ja.
Det vi går.
Så, igjen, det er vår panel.
>> En ting som vi dekket ikke ennå, tabeller.
Bord, som standard utseende slags stygge.
Som dette.
Men tabellene er, selvfølgelig, en meget viktig rolle
av hva du vil gjøre i webutvikling.
I Pset7, for eksempel, CS50 Finance, som vil komme ut snart,
du kommer til å bruke mye av tabeller.
Og mye av web dev bruker mye av tabeller for å vise informasjon,
som aksjer, eller score, eller hva.
>> Så styling tabeller er faktisk veldig enkelt.
Du legger bordet klassen til bordet ditt.
Og jeg tør si, det ser ganske fin.
Du kan gjøre ekstra ting, som "tabellen tabell stripete".
Og du vil se resultatene her.
Du kan gjøre tabellen-grenser.
Det finnes en rekke alternativer du kan.
Men i utgangspunktet, og legger til en tabellen tabellen klassen
vil gjøre tabellene ser ganske fin.
Så det er en kort oversikt over noen av de viktigste stiler
og komponentene du vil trenger å bruke for Bootstrap.
Så jeg tror at wraps opp vår vakre delen.
Eventuelle spørsmål akkurat nå om hvordan å gjøre nettsteder vakker?
Hvordan du kan bruke disse komponenter til din fordel?
Føles godt?
Ja?
PUBLIKUM: Kanskje dette er et dumt spørsmål,
men kan du bruke Bootstrap på Wikipedia?
Hvis du redigerer en Wikipedia-side?
NEEL Mehta: Ja.
Så spørsmålet var, er jeg redigerer en Wikipedia-side,
kan jeg ta med bootstrap stiler der inne?
>> PUBLIKUM: Ja.
>> NEEL Mehta: Og så Bootstrap er i utgangspunktet en stor CSS stilark.
En CSS stilark bare sier, når Jeg har denne klassen, feste disse stilene.
Så CSS stilark for Bootstrap kommer til å være noe som .btn,
knappen klassen, vil få som en avrundet hjørne grensen eller hva.
Så i utgangspunktet, Bootstrap det bare en haug av klasser og en haug med stiler
spesifisert for disse klassene.
Så så lenge du har som CSS, denne listen over regler i siden din,
du vil få Bootstrap styling.
Det er, selvfølgelig, avhengig ha bootstrap stiler i siden din
til å begynne med.
>> Og så i Wikipedia, har du sannsynligvis ikke kunne
gjøre det fordi Wikipedia har ikke Bootstrap i det.
Men hvis det hadde Bootstrap, du kan sannsynligvis gjøre det.
Og hvis du ville, kunne du inkludere det, men det kan
bryte eksisterende layout på siden.
Men veldig godt spørsmål.
Du kan bruke Bootstrap hvor det er inkludert,
men det er ikke bygget på som standard.
>> PUBLIKUM: Takk.
>> NEEL Mehta: Ja.
Flere spørsmål?
Ja.
Så om du er her eller hjemme, bare husk getboostrap.com-- igjen,
getboostrap.com-- er din venn.
Når du bruker Bootstrap, vil dette gi deg
instruksjoner om hvordan du får startet, hvordan du bruker komponenter.
Det er noen kule Java plug-ins som vi ikke vil gå over her,
men de er verdt å sjekke ut også.
Så dette er din venn.
Det er bare viktig å få brukes til hvordan du bruker dette.
>> Så la oss snakke litt om lage responsive nettsteder.
Så som jeg sa tidligere, brukte folk sine bærbare datamaskiner, de bruker sine telefoner.
Og som du kan godt forestille deg, er dette en helt annen skjermstørrelse enn det.
Og så den samme nettsiden som ser bra ut på telefonen min
ikke kommer til å se bra ut, nødvendigvis, på en datamaskin.
Så det du trenger å gjøre er gjøre nettstedet ditt tilpasse seg.
Den har til å tilpasse seg de ulike skjermstørrelse at det er på.
>> Det har å si, jeg vet at jeg er på en datamaskin, en stor laptop, skal jeg utvide.
Jeg vet at jeg er på en telefon, skal jeg krympe.
Og så Bootstrap gir noen svært, svært nyttige verktøy for å gjøre dette.
Så Bootstrap lar deg pause et nettsted i 12 kolonner.
Du kan lage rader og har 12 kolonner.
Og du kan partisjonere de slik du vil.
Du kan ha én, stor ting, som er 12 kolonner bred.
Du kan ha to ting som er seks hver.
Du kan gjøre en ting som er fire, en som er to, eller en som er seks.
Du kan gjøre tre, tre, tre, tre.
Du kan gjøre hva sammenbrudd som du vil.
>> Så kanskje din nettside må ha en venstre kolonne som er en tredjedel av bredden.
Så det ville være fire kolonner bred og resten av siden
ville være åtte kolonner bred.
Så dette er et eksempel.
La oss dra opp et annet eksempel.
>> PUBLIKUM: Betyr det alltid må være en enda delt?
Kan det være en sju, fem-split?
>> NEEL Mehta: Ja.
Det kan være sju, fem.
Ja.
Så lenge det legger til 12, det er greit.
Så la oss gå tilbake hit.
Igjen koden som er her er også tilgjengelig her,
henhold responsive eksempel.
Så jeg bare trakk opp noen eksempel responsive koden her.
Så du gjøre dette ved hjelp en ting som heter rad.
Row er bare en annen klasse.
Det er en annen stil du legge inn din Divs for å få dem til sine egne komponenter.
>> Så du sier, div class = "rad" for å gjøre en rad,
å gi deg selv 12 kolonner av plass.
Og du putter kolonner innsiden av det.
Så her er vi col-xs-6.
Ikke bekymre deg om xs.
Vi skal snakke om i et sekund.
Men i utgangspunktet, har vi en Det som er seks bred.
Vi kaller det igjen.
Og så det er boksen til venstre her.
Vi har en ting som er seks av de 12 kolonner bredt.
Og at man er på rett.
>> vel bare gir merker din div fylle den grå.
Så det er bare slik at vi kan se at de er forskjellige.
Og slik at dette første eksempelet.
Det er et veldig enkelt eksempel på hvordan du ville bruke rader og kolonner her.
Du definerer en rad class = "row".
Og så gjør class = "col-XS-6" gjøre halvparten, "col-xs-6" til å gjøre den andre halvparten.
Her er en mer komplisert eksempel.
La oss se på Tiny, Stor, Resten én.
>> Vi kan gjøre Tiny to kolonner bred, vi kan gjøre Enorme seks kolonner bred,
Og resten fire kolonner bred.
Som legger opp til 12.
Og så disse ender opp med spenner bredden på siden.
Igjen har vi en rad utenfor.
Da har vi div class = "col-xs-2" og deretter 6, og deretter fire.
Og det vil gi strukturen for oss.
Og så kan vi plassere hva pokker vi vil ha inne her.
I stedet for Tiny, kan vi sette en knapp.
knappen class = "btn btn-primær".
Og så merker at vår knappen tar ikke opp hele bredden,
men minst er det begrenset til så mye plass.
>> Så det er vel og bra.
Så vi kan nå bryte opp vår web side i biter, bredde klok.
Vi kan si at vi ønsker å ha en venstre kolonne, og en rett kolonne, og så videre.
Men vi har ikke gått over hvordan du gjør det responsive.
Og så Bootstrap la oss gjøre det også.
Den har disse tingene kalles stoppunkter.
Så det har en måte å vite om du er på en laptop, du er på en tavle,
du er på en telefon horisontal, eller du er på en telefon vertikal.
Det vet skjermstørrelsen.
Og dette bryter inn i fire kategorier-- stor eller lg, som bærbare datamaskiner, vanligvis.
md eller medium, som er tabletter.
sm, liten.
Eller xs, ekstra liten.
Og så når du angir en kolonne, sier du,
bør det være seks kolonner bredt på en ekstra liten enhet.
Det er derfor vi gjorde col-xs-6.
Vi sier at det skal være seks av de 12 kolonnene brede
på en ekstra liten enhet.
Og hvis det er noe større, vil vi bare standard bruke den ekstra lille størrelsen.
Hvis det er noe større enn ekstra liten, vil det være fem-wide.
Og så kan vi utnytte disse for å gjøre våre kolonner
ta opp forskjellige mengder kolonner basert på skjermstørrelsen.
La oss gå til denne responsive resizing.
Så vi har våre kolonner.
Og det sier, "col-lg-6 col-xs-12".
Så får det du vet så langt, hva gjør du
tror kommer til å skje på en stor skjerm?
Vel, det er slags vike, men hva gjør
du tror det vil se liker på storskjerm?
Og hvorfor er det?
>> PUBLIKUM: Er det at på en stor skjerm, er det
kommer til å ta bare en del av full plass?
Som halvparten av det, antar jeg?
>> NEEL Mehta: Ja.
>> PUBLIKUM: Og på mindre skjermen, kommer det til
for å ta opp hele skjermen, i 12.
NEEL Mehta: Ja.
Høyre.
Så som et eksempel, la oss bare se her nede.
Ja.
Så på alt som er lg eller bigger-- så min datamaskin skjer
å bli lg fordi det er ganske wide-- det vil gjøre
det ved siden av hverandre fordi det er col-lg-6.
Så fordi det er på store, det gjør det seks kolonner bred og seks kolonner bred.
La oss se hva som skjer hvis jeg gjøre dette til en mindre en.
Jeg skal bare un-fullskjerm dette.
Og jeg kommer til å krympe skjermen.
Jeg kommer til å krympe skjermen, så det ser ut som jeg er på en mindre enhet.
Så jeg kommer til å krympe det sånn.
>> Og voila.
Det er nå stablet fordi nå har vi gått
fra store to-- dette er trolig en ekstra liten skjermstørrelse.
Og så nå sier, OK, vi er ikke i store, vi er i ekstra lite land.
Så vi kommer til å bruke den ekstra lille størrelsen.
Og vi kommer til å xs-12, xs-12.
Så det kommer til å bli stablet.
Og akkurat merke til at det er en ting som kalles et stoppunkt.
En stoppunkt er der du gjort overgangen
fra extra small til små, små til store, og så videre.
>> Så bare merker at jeg skyver dette ut, til slutt, vil du komme til poenget
hvor de vil hoppe til å være ved siden av hverandre.
Det du går.
Så det er stoppunkt der.
Så vi kan gjøre det enda mer komplisert.
Nå kan vi si, disse ting skal være fire brede.
Det vil si, de skal ta opp om lag en tredjedel
av talen på meget store enheter.
På en mellomenhet, skal det ta opp halve skjermen fordi det er MD-6.
På en svært liten enhet, det skal ta opp 12.
Og så dette ser ganske naturlig.
La oss bare prøve ut dette for oss selv.
>> Så på en stor skjerm, er de fire store.
Krympe den litt.
Og de er nå fem bred.
Så dette er seks, seks, seks.
Krympe det enda mer, og deretter de vil være helt stablet.
Så dette, for eksempel, er fornuftig hvis du har kort, som nyhets kort,
for eksempel, der hvis det er på en veldig stor skjerm,
det er OK hvis du har flere ved siden av hverandre fordi de ville alle få nok plass.
Men de må ha nok plass.
Så på en mindre skjerm, du ønsker å gi dem
mer plass, proporsjonalt, på siden.
>> Så som en virkelig verden eksempel la oss si at vi har Twitter.
Og vi har tekstboks, så du kan tweet på siden.
Og vi har en liste over trending emner på høyre side.
Så på en stor skjerm, bør vi har de være ved siden av hverandre,
slik at du kan se dem på et glass.
Men på en mindre skjerm, vi skal gjøre 12 og 12,
slik at de trending emner er under tweet området.
Fordi tweet området er Hovedsaken og på en liten skjerm,
de trending emner ikke Uansett ganske så mye.
Og så setter vi dem rett nedenfor, så at de begge kan få nok plass.
Fornuftig så langt?
>> PUBLIKUM: Ja.
>> NEEL Mehta: Solid.
Så det er alle de eksemplene jeg har her.
La oss prøve og gjøre en utfordring.
Så igjen, er denne utfordringen-2.html for de av dere følgende sammen hjemme.
Så min kompis, Mark Zuckerberg, kom til meg her om dagen.
Og han er like, Neel, jeg har fått ganske god på webdesign.
Jeg kan gjøre HTML.
Jeg har laget denne lille, ny edit til Facebook.
Jeg har en ny idé for hvordan vi skal style Facebook.
Og her er det.
Akkurat her.
Her er noen eksempelkode.
Så det heter Fancybook.
>> Vi har noen statusoppdateringer.
Vi har Nemo, Mike Kosowski, ***-- tre statusoppdateringer.
Og så har vi en liste over online venner rett under den.
Så han har gjort leksene sine.
Han vet litt om Bootstrap, har han gjort listevisning
han har gjort en liten bit av HTML.
Så han har nettsiden.
Men han er like, Neel, gjør jeg ikke forstå responsiv design på alt.
Har du noen eksperter som kunne hjelpe meg med det?
Og heldigvis, er du nå eksperter i responsiv design.
>> Så hva han fortalte meg var at han ønsker Fancybook å se slik ut.
På en svært liten enhet, som en telefon, alt
skal stables, som her.
Så har du tidslinjen forskudd, opp toppen, og deretter
du bør ha chat linjen nederst.
Men på en tavle eller et medium enhet, bør det være halvt om halvt,
som i tidslinjen bør være halvparten og listen over chat-venner
bør være på den andre halvdelen.
>> Så på en laptop, tidslinjen bør ta opp tre fjerde
og deretter chat hekk bør ta opp en annen en fjerdedel.
Og så han er like, Neel, jeg har dette koden her, men det er ikke responsive.
Det er behov for å oppføre seg som dette.
Så min utfordring til deg gis denne koden her--
hvis du oppdaterer din CodePens, vil du se dette.
Eller hvis du bare lime inn koden på challenge-2, vil du se dette.
>> Her er denne eksempelkode.
Du vil se noen XXXS.
Jeg vil at du skal endre XXXS, slik at tidslinjen og listen over venner
følger disse specs her.
Ikke bry deg om hva som er inne i tidslinjen for nå.
Vi får det i neste trinn.
Men for nå, la oss se om vi får disse tingene for å dele den opp som dette.
Så gjør det fornuftig?
Så hvis du er hjemme, pause videoen og prøve
for å gjøre din nettside ser responsiv som dette.
Hvis du er her, ta som to, tre minutter.
Føl deg fri til å prate med en nabo, og prøve og fikse Mr. Zuckerberg
responsiv utforming problem.
Hvis du har spørsmål, gjerne gi meg beskjed.
Føles godt?
Gjort?
Fin.
>> PUBLIKUM: [uhørlig].
NEEL Mehta: Hva?
>> PUBLIKUM: Jeg er bra.
>> NEEL Mehta: Oh, bra.
Fin.
PUBLIKUM: Saken om 12, er det at Bootstrap
behandler en gitt plass på skjermen som 12 enheter på tvers og deretter deler det opp?
Hvordan akkurat gjør proporsjone arbeid for dette?
>> NEEL Mehta: Ja.
Så spørsmålet er, hvordan gjør proporsjone
arbeide for Bootstrap, ikke sant?
>> PUBLIKUM: Ja.
NEEL Mehta: Så når du har en div class = "rad",
uansett hvor stor skjermen er, Bootstrap vil gi deg 12 enheter
av samme størrelse for å ta opp så mye størrelse.
Så i col 1, er det alltid 8,33% av størrelsen på skjermen
enten det er denne brede eller det er dette stort.
Og så, selvsagt på en mindre skjermen, er hver kolonne mindre.
Du har fortsatt 12 kolonner bred, er det en mindre.
Så det er opp til deg å sørge for at at ting tar opp mer kolonne,
proporsjonalt, for å kompensere for at mangel på plass.
Gir det mening?
>> PUBLIKUM: Ja.
Takk skal du ha.
NEEL Mehta: Godt spørsmål.
PUBLIKUM: På en stor skjermen, kan du ha
tidslinje ta opp tre fjerdedeler?
>> NEEL Mehta: Ja.
NEEL Mehta: Hvordan er gutta føler?
God?
Kjølig.
Så la oss komme tilbake.
Og la oss prøve å løse denne delen Mr. Zuckerberg hjemmeside.
Så tidslinjene er her oppe, på toppen, og listen over venner
er på bunnen.
Og så trenger vi bare å tildele kolonner, med dimensjonering proporsjonal,
i hver av disse.
Så dette første *** er for tidslinjen.
Hva klasser gjør vi legger inn her?
Hva gjorde dere legge inn her?
Så husk, på en stor skjerm, det er behov å ta opp tre fjerdedeler av bredden.
Og så hvilken stil ville gi deg det?
På en stor skjerm, tre- fjerdedeler av bredden.
Hvilken klasse bruker vi det?
PUBLIKUM: Så vi skal bare være redigering som første instans av klassen.
NEEL Mehta: For nå.
Ja.
>> PUBLIKUM: Vi er ikke redigere hver, individuell funksjon av tidslinjen?
NEEL Mehta: Ikke nå, minst.
Så dette hele greia er en blokk.
Vi bare endrer utformingen av blokken.
Så her vi col-lg-9 fordi det er ni av de 12 store på en stor skjerm.
Og så på en middels skjerm, hvor mange kolonner skal jeg bli?
PUBLIKUM: Det er ment å være halvt om halvt.
NEEL Mehta: Høyre.
Så hvor mange er det?
>> PUBLIKUM: Så seks.
NEEL Mehta: Six.
Og så ekstra liten bør be-- hvis det tar opp hele bredden av rekken,
hvor mange det skal være?
PUBLIKUM: 12.
NEEL Mehta: 12.
Ja.
Og nå har vi fått til endre dette andre,
så det tar opp resten av plassen.
Så col-lg--
PUBLIKUM: Det kommer til å ta opp hele skjermen?
NEEL Mehta: Det tar opptil en fjerdedel av skjermen på en stor enhet,
som vi viste her.
>> PUBLIKUM: Tre.
>> NEEL Mehta: Tre.
Og så col-md-6 for å ta opp resten av plassen.
COL-xs-12.
Så nå har vi tidslinjen tar opp tre fjerdedeler
på siden i den store skjermen og deretter en fjerdedel på siden.
Og så hvis skjermstørrelsen ned, det skal endre størrelse tilsvarende.
Så det er stablet nå, på en meget liten skjerm.
Og hvis vi størrelsen det opp litt, de skal være nøyaktig halvparten og halvparten.
Så vi har gjort det så langt.
Veldig kult.
Og så skal vi ikke gjøre det andre del av utfordringen.
Du kan gjøre det selv.
Men i utgangspunktet, må du prøve og gjøre disse responsive
samt-- gjør tidslinjen elementer, selv, responsive.
Så nå har vi gått gjennom alt du trenger å vite
om responsive siden av Bootstrap.
Eventuelle spørsmål om responsive design med Bootstrap
og hvordan du kan gå om du gjør det?
Ja?
>> PUBLIKUM: Er det lik hvis vi hadde en innebygd video
og vi ønsket å kontrollere skala der videoen var--
størrelsen på video kommer fra laptop til telefonen.
NEEL Mehta: Ja.
Mer eller mindre.
Du må fortelle videoen til ta opp så mye plass som det er gitt,
som er litt irriterende noen ganger.
Men kjernen ideen er den samme.
En video, som alle andre objekt i siden, som en knapp eller noe,
så lenge du bruker kolonner og rader,
du kan gi den en viss plass.
Og så får det å ære som er en annet spørsmål fordi som YouTube
bygger har en viss, foretrukket størrelse.
Men teoretisk sett på minst, vil det fungere.
Kjølig?
>> PUBLIKUM: Jeg antar da, for et bilde, gjør du faktisk
må ha ulike versjoner av det samme bildet i forskjellige størrelser
for laptop kontra iPhone?
Yeah Spørsmålet er, trenger vi å har bilder som er responsive også.
Og ja, du kan gjøre det.
Jeg tror det er i CSS.
Men Bootstrap tillater du gjøre det også.
Du kan ha responsive bilder.
Du kan ha dine bilder endre størrelse i henhold til størrelsen på siden.
Og det er en veldig ny ting HTML5, den nyeste versjonen av HTML,
og CSS3, den nyeste versjon av CSS, som
vil la deg be forskjellige bilder basert på skjermstørrelse du er på.
Vanligvis er det godt nok å bare har bildet bare krympe eller vokse til
men stort det trenger å være.
Men du kan, hvis du vil til, har man 32 av 32
for svært små skjermer, og 64 av 64 for en stor skjerm,
og deretter tjene de selektivt.
Du kan klare det.
Det er gjort av noen mennesker.
Det er fortsatt ganske cutting edge.
Men korte svaret, responsive images-- Bootstrap kan redde dagen der.
Kjølig?
>> PUBLIKUM: Takk.
>> NEEL Mehta: Så la oss snakke virkelig fort om hvordan
å få dette i din egen nettside.
La oss si at du ønsker å gjøre din egen nettside ved hjelp av Bootstrap.
Og så la oss bare bare gå gjennom det sammen.
La oss si at du gjør nettopp en vanlig HTML-side.
Føl deg fri til å følge med i hva din favoritt editor er.
Så vi bare har noen HTML-side.
Vi kan gjøre! DOCTYPE html.
Dette er også html, vår side.
Ikke noe nytt.
Vi har gjort dette før.
Så her har vi vår HTML og vi kan sette ting inni her.
Vi kan ha våre knappen.
Og som jeg sa tidligere, dette er ikke nødvendigvis kommer til å fungere.
Hvorfor kan ikke dette fungere?
Hvorfor vil vi ikke få vår hyggelig, fargerik knappen?
>> PUBLIKUM: Fordi vi ikke koble den til Bootstrap prosjekt eller filen?
NEEL Mehta: Ja.
Korrekt.
Fordi Bootstrap-- det er bare en fancy CSS-fil.
Det er en rekke stiler som er knyttet til elementer.
Her har vi fortalt det at vi ønsker å bruke disse stilene.
Jeg skal størrelsen det opp litt.
Vi har fortalt det vi vil bruke disse stilene, men vi aldri
fortalte det hva stilene er.
Og det er det din Spørsmålet fra tidligere var.
Det er svaret på det.
Vi må finne en måte å få stiler og inkludere dem i vår side liksom.
Og så Bootstrap vilje vise oss hvordan du gjør det.
>> Så hvis du går til toppen her, Komme i gang.
Det finnes ulike måter å laste ned den.
Dette kan ikke være fornuftig nødvendigvis.
Bootstrap-- dette vil la du ta tak i CSS-filen selv.
Og du tatt det i din egen side.
Kildekode er hvis du ønsker å hacke på det selv.
Du trenger ikke dette egentlig.
Sass er et språk som samler inn CSS.
Tenk på det som en preprosessor.
Mye som PHP er en preprosessor av HTML, er Sass en preprosessor for CSS.
Så hvis du ønsker å gjøre det på den måten, kan du gjøre det.
>> Den enkleste måten er å bruke en CDN, eller innholdslevering nettverk.
Det er en nettside som bare serverer deg et eksemplar av Bootstrap
veldig fort for deg å inkludere i din egen side.
Så her er et eksempel.
Det vil gi deg denne linken element.
En lenke element forteller nettleseren din, ta hva filene er lagret her
og ta den med i vår nettside.
Og i dette tilfellet, er det Bootstrap CSS-fil.
Så får vi bare kopiere URL, eller som tekst, og vi vil kaste den inne
av vårt hode.
>> Og jeg vil ikke starte side for dette, men du kan stole på at dette fungerer.
Linken vil få deg til CSS.
Inkludere den i side og da vil du være
stand til å bruke alle de Bootstrap klasser som du kjenner og elsker.
Hvis du ønsker å holde det lokalt og har det på ditt eget filsystem
i stedet for å måtte gå til Internett for å hente den,
som hvis du ønsker å bruke nettstedet offline,
du kan bruke Download alternativet.
Men for det meste ved hjelp av CDN er ganske fort fordi den måten,
det er holdt oppdatert for deg også.
Du må manuelt oppdatere den heller.
Gir mening?
>> Så mye verktøy vil ha dette bygget i som standard. I din Pset7 og Pset8,
Jeg tror Bootstrap er automatisk inkludert.
Og i CodePen, for eksempel er det allerede
inkludert fordi jeg lagt legge til at innstillingen.
Så hvis du noen gang ønsker å leke seg med den, kan du bare gå på CodePen,
eller gå på din ID, eller hva.
Og du kan være i stand til å tilgang Bootstrap der,
men det er ikke alltid bygget i, som standard, til web.
Gir mening?
>> Ja.
på samme måte som vi har en recap-- som fem minutter igjen.
Men som en oppsummering, i nye nettsider, du kan inkludere Bootstrap som dette.
Og når du har det inkludert, du kan gjøre alt det morsomme her.
Du kan gå på, og du kan bare lese CSS, kan du legge noen kule stiler,
du kan ha komponenter som knappene,
og tabellene, og listen elementer som vi har nevnt.
Det er noen kule Javascript plugins, som du kanskje ønsker å utforske.
De legger til noen kule interaktivitet til websiden.
Som dette gjør en modal dialog.
>> Så det er noen morsomme ting du kan gjøre med Bootstrap.
Så mitt råd til deg er å gå videre og bruke det i egne prosjekter,
Følg instruksjonene vi gjorde bare om hvordan man skal få det,
og bare lese Bootstrap fordi du vil lære mer om hva du skal gjøre.
Og så har vi gått over, i dag, hvordan du bruker
dokumentasjonen, hva bygningen blokker er, og hvordan det er konseptuelt.
Så nå er min utfordring til deg er lage en nettside ved hjelp av Bootstrap.
Gå inn i docs.
Og bruke de verktøyene som vi har lært så langt for å prøve og analysere dem
og forstå dem.
Og bruke disse stilene og verktøy du ser det på nettstedet ditt.
Og det er bare en stor, eksperimentell prosess.
>> Prøve ut en viss stil.
Virker det?
Betyr ikke?
Prøv å sette ting sammen.
Se hva som skjer.
Det er veldig mye en selv veiledet, oppdagelsesprosessen.
Men i dag har vi lært grunnleggende for hva som er Bootstrap?
Hvorfor virker det?
Hvordan fungerer det?
Hvor skal vi begynne å bruke det, i første omgang?
Og så nå som du er over den kneika, du
bør være i stand til å gjøre det ganske greit selv.
>> Så igjen, all den koden vi gjorde er her.
Så hvis du noen gang ønsker for å få en børste opp på,
ut, hva er en rask jukse ark for alle stilene?
Du kan gå inn i denne prøven her.
Vi har noen eksempler på stiler her.
Hvis du ønsker å prøve utfordringer igjen av deg selv,
du kan prøve dem her og sjekk ut løsninger.
Så denne linken vil være inkludert på lysbildene, som
vil bli sendt ut til deg selvfølgelig.
Men det er også opp her.
Du kan sette videoen hvis du vil.
All informasjon du trenger er kommer til å være akkurat her, på dette nettstedet.
Så hvis noen har noen spørsmål, kan vi ta dem for de neste par minutter.
Ellers, takk veldig mye for å se på.