Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Så hej till alla som tittar här,
eller titta på nätet eller på distans.
Mitt namn är Neel, är detta CS50.
Och dagens seminarium är Responsive Webbdesign med Bootstrap.
Det är ett ämne som är mycket nära mitt hjärta.
Förhoppningsvis kommer det att vara nära ditt hjärta
liksom i slutet av dagens seminarium.
Så Bootstrap.
Hur många av er har gjort något typ av webbutveckling förut?
En bra summa?
Lite grann.
>> Så Bootstrap är världens mest populär, front-end ram.
Den används by-- jag har valt en par slumpmässig websites--
Lyft, Newsweek, och Vogue.
Den används av ett antal webbplatser.
Det är en ram webbdesign som låter dig göra dina webbplatser
både vacker och lyhörd.
Och jag ska gå över dessa två begrepp här.
Vacker.
Så du har normal webbplats på vänster, som är gjord av bara HTML.
Du har lärt HTML i klassen och i snitt på längden.
Bootstrap är ett sätt att göra dina webbplatser vacker.
Du kan ta vad som är på vänster sida av skärmen
och förvandla det till vad som är på höger sida av skärmen med mycket,
mycket, mycket lite kod.
>> Du får fina blå knappen, får du fancy, rundade kanter på skärmen,
du får listvyn, får du kort, och så vidare med mycket lite kod.
Det är faktiskt ingen CSS som du måste skriva själv.
Så Bootstrap låter dig har dessa färdiga CSS
komponenter du kan sätta insidan av din webbsida
så att det ser vackert utan väldigt mycket arbete på egen hand.
Det är verkligen en bootstrap, en utgångspunkt,
för din webbutveckling äventyr.
Och så när du är bara hånade upp en webbplats,
Det är ett mycket bra ställe att komma igång.
Du kan få en snygg hemsida med mycket, mycket lite arbete.
Och faktiskt, kommer vi att göra detta själva
i samband med liknande fem minutes-- inom 10 minuter.
Så det är ganska lätt att göra några stora webbplatser.
Så det är den första delen.
>> Den andra part-- lyhörd.
Människor, nuförtiden, inte bara tillgång till webben på sina bärbara datorer.
Faktiskt, som av 2014, fler människor tillgång till webben via mobila enheter,
gillar telefoner eller tabletter, eller tjänster, eller så vidare än webbplatser.
Och webbplatser har traditionellt varit utformad med bärbara och stationära
i åtanke.
Och så webbplatser är ofta inte mycket väl lämpad till telefonen.
Om du någonsin besökt harvard.edu på din telefon,
det är typ av en irriterande erfarenhet, rätt?
Det beror på att det inte är lyhörd.
Vi försöker att göra webbplatser som är lyhörd,
att svara på människors skärmstorlekar.
>> Så om det är en telefon, det är kommer att gå på telefon.
Om det är en tablett, är det kommer att gå på tablett.
Det justerar för att matcha skärm som används.
Och så Bootstrap ger också några mycket, mycket användbara verktyg för detta.
Och vi kommer att diskutera det också.
Så återigen, det finns två delar till Bootstrap-- vackra och ansvarsfull.
Vi kommer att prata om dem.
Först, vackra.
Och sedan lyhörd.
>> Så all kod som vi är kommer att tala om today--
vi kommer att ha en hel del exempel, en hel del utmaningar, och så on-- det
allt lever på denna webbplats här.
Denna bild är vad vi skickade ut.
Så om du är här, kan du känna fri att inte behöva skriva ner det.
Och om du tittar på distans, känner fri att dra upp detta på din dator
också.
Du kommer förmodligen att behöva det under Under detta seminarium.
>> Så vi kommer att använda en hemsida som heter CodePen,
som är ett samarbete kodning miljö, under seminariet.
Och CodePen-- och jag ska visa här verklig fast--
Det gör att du kan skriva HTML samarbeta.
Jag kan skriva det, jag kan skicka det till ni kan ni redigera den.
Även om du är avlägsen, du kan fortfarande komma åt det på det sättet.
Du kan skriva HTML-kod på topp och det kommer automatiskt
omvandlas till den webbsida på botten.
Så det är ett sätt för dig att snabbt prova kod
utan att göra någon form av saker på din IDE, eller din egen hemsida,
eller vad som helst.
>> Så gå vidare och dra upp denna webbplats, om du fjärr
eller om du är här, särskilt om du är avlägset.
is.gd/cs50boostrap.
Inga mössor, inga streck, ingen ingenting.
Så de av er som är Här, bara ge mig en tummen
när du har dragit upp den webbsidan.
Bra?
>> PUBLIK: Ja.
>> NEEL Mehta: Så vi får till det på bara en sekund.
Så först, vi kommer att få, hur gör du dina webbplatser vacker?
Vi kommer att lära sig att ta tråkigt, gamla HTML, som jag visade dig innan,
och förvandla det till riktigt nice komponenter,
som trevliga widgets, trevlig, färgad knappar och etiketter, och tabeller,
och alla, med användning Bootstrap.
Så om vi alla kunde gå över till CodePen att du bara drog upp.
Det ska se lite såhär.
Ser det ut så här i alla?
>> PUBLIK: Ja.
>> NEEL Mehta: Om du är avlägsen, det bör se ut så här också.
Om inte, kommer jag visa dig snart hur du kan få det se ut så här
i en framtida del av videon.
Så här har vi skrivit en mycket grundläggande HTML,
liksom den typ du har använt i klassen.
Det är ganska grundläggande.
Inga krusiduller.
Och vi har några saker.
Vi har utformat en mycket, mycket grundläggande start
call Yalp! som du kan hitta restauranger i området,
och hitta recensioner, och riktningar på alla dem.
Det är ett mycket bra koncept.
Det har aldrig gjorts tidigare.
Det är en mycket unik namn, också.
>> Så vad vi ska försöka göra är hjälpa ägaren
av Yalp! göra sin webbplats ser riktigt, riktigt coolt.
Så till att börja med, ägare Yalp! har gjort en liten sökning
box och en liten knapp, och sedan kanske lite
markerade området för en markerade restaurang, och sedan
en lista över andra restauranger som är i området.
Så vi kan bara gå igenom HTML-koden riktigt snabbt.
Hur bekväm är ni med HTML?
Vi har gjort en lite avsnitt och även i klassen.
Anständig?
>> Så precis som en återblick, HTML handlar om att ha
taggar eller element som berättar datorn hur att lägga ut på webbsidan.
Så här h1 här-- starta h1, Welcome till Yalp !, *** h1-- talar om för datorn,
rita en stor rubrik det säger, Välkommen till Yalp!
där inne.
Vi har också former.
Vi kan ingångarna så här, text-ingångar, vilket kommer att göra som textrutor
du skriver in.
Du har också knappar.
Du får en trevlig, klickbar knapp.
Det gör inte något rätt nu, men du får en knapp.
Du kan ha divs, eller avdelare, till bryta upp din sida i olika grupper.
>> Du kan ha punkter, du har knappar.
Om du har stycken, sedan du har oordnade listor, ul,
och listor insidan av det, li.
Så dessa är de mycket grundläggande byggstenar i en webbsida.
Och faktiskt, ganska mycket varje webbplats som du ser
kommer att byggas med hjälp av dessa samma verktyg.
Naturligtvis gör de inte alla ser detta dåligt eftersom vi är
kommer att krydda upp det lite.
Så låt oss denna tråkiga gamla HTML och start förvandla den till den vackra platsen
att vi bara såg ett par minuter sedan.
>> Så låt oss börja mycket enkelt.
Så vi har den här knappen här.
I Bootstrap, som vi såg, vi kan har en fin, vacker, blå knappen.
Och det görs inte genom att göra anpassade CSS.
Det finns ingen anpassade CSS här.
Det är gjort genom att lägga till klasser dina HTML-element.
Om du har provat klasser, eller hrefs, eller ankare, eller type = "text" för inputs--
HTML-element kan ha dessa attribut.
De kan ha extra uppgifter att du kan ge dem.
>> Och så, i det här fallet, klasser är attributet.
Så du skulle skriva, knapp class = något inne i strängar.
Och det attribut kommer att berätta dator, detta är inte någon, gammal knapp.
Det är en knapp som är i denna klass av knappar.
Och så Bootstrap, om du ger det en viss stil på din del,
det kommer att dra det ett visst sätt.
Så jag skriver "btn btn-primära.
BTN är en förkortning för knapp.
Du kommer att märka nu min fula knapp vänt
i en fin, vacker, blå knappen.
Det ser mycket trevligt när vi klickar på den.
>> Så vad som händer är att vi har btn klass och btn-primär klass
på vår del.
Och Bootstrap kommer att gå in och säga, OK, jag vet att det finns dessa två klasser.
Alla element som har dessa två klasser ska dras så här.
Så det är kärnan i hur du ansluter stilar till element i Bootstrap.
Du fäster bara klasser till dem och det kommer att väga det ut som den finner lämpligt.
Så här är ett annat exempel.
I ingången, kan vi lägga en klass = "formstyrning".
Och jag ska visa snart där du kan ta reda på vilka klasser
Det finns för varje typ av element.
Men den klass som vi bara extra har fina, rundade hörn,
Det har trevligt stoppning, det har en trevlig, blå glöd till det.
>> Vi kan också gå in i detta formulär.
Och class = "form inline", som kommer att göra vårt formulär, som ni kanske förstår, inline.
Så det ser lite mer precis vad vi hade tidigare redan.
Så innan vi går på att styla resten av sidan, några frågor om vad vi
gjorde?
Vi bara bifogade klasser till våra olika element.
Och jag ska visa er senare hur du kan räkna ut vilka klasser finns tillgängliga.
Vi bifogade klasser som har vissa stilar.
Och som berättar webbläsaren hur layout sidan med
Bootstrap s tillhandahålls stilar.
Eventuella frågor från publiken?
>> Bra så här långt?
Häftigt.
En hel del av de utmaningar med Bootstrap är bara
att veta vilka komponenter som är tillgängliga och hur du använder dem.
Och som alla lärt med erfarenhet och även
genom att läsa dokumentationen som vi kommer att prata om snart.
Så vi har denna div.
Det är bara en tråkig, gamla sak.
Vi vill understryka det på något sätt.
Så i Bootstrap, det finns en *** komponenter tillgängliga.
Och detta är getbootstrap.com.
Det är en mycket användbar referens.
Det innehåller saker like-- Här är hur du gör en knapp.
Och du kan göra nav barer, kan du etiketter, kan du framsteg barer,
du kan göra-lista grupper.
I grund och botten är det alla typer av kan du se en webbsida.
>> Här är en som vi ska försöka just nu.
Det kallas panelen.
Om du någonsin använder Google Nu har de kort.
Eller någon Android-enhet har kort.
De har lilla vita rutor som har saker inne i den.
Och så ska vi försöka göra att själva här med en sak
kallas en panel.
Så om vi lägger class = "panel panel-default "till vårt yttre div,
sedan bifoga vi div class = - låt oss bara kolla denna dokumentation.
div class = "panel rubriken" och då div class = "paneler-kropp".
Återigen, oroa dig inte om memorera denna kod.
Det kommer att finnas tillgängligt på nätet.
>> Så vi gjorde detta och nu vår tråkiga, gamla div förvandlats till denna fina, lite kort.
Det har trevligt stoppning, det har gränser, står det ut
från resten av sidan, vilket är ganska coolt.
Så låt oss gå in och ändra det här inlägget Get vägbeskrivning knappen för att se bra ut.
Vem i publiken vill berätta mig vad jag kan göra för att knappen
så att det ser trevligt med hjälp av Bootstrap?
Ja?
>> PUBLIK: Vi skulle kunna lägga till en klass.
Och vi kunde göra class = "btn btn-primär".
NEEL Mehta: Ja.
Det finns en *** andra färger finns för buttons--
eller för något, för den delen.
Vi kan göra btn-fara och göra det rött.
Det går vi.
Vi kan göra btn-framgång för att göra det grönt.
Vi kan göra btn-info-- det finns ett gäng saker som är tillgängliga för dig.
Så jag har lite utmaning för dig nu.
Så det finns en sak att jag har lämnat un-stil.
Detta topprestauranger.
>> Och vi vill använda en sak kallas en lista grupp att styla det.
Så min utmaning till dig är gå vidare till getbootstrap.com--
Jag ska dra upp här.
getboostrap.com.
Gå till getbootstrap.com, hitta där de går över listgrupper.
Och du ser här ett exempel och rätt klasserna
som du kan använda för att göra din listor i dessa fina grupplistan.
Dessa utarbetas exempel av kodexempel, vad
kod du använder, vilken HTML-kod du använder och vad som matar ut.
>> Så min utmaning att du-- gå på getbootstrap.com,
oavsett om du är här eller hemma, och att försöka lägga stilar till denna ul
så att det ser trevligt.
Och använda en lista grupp stil.
Du vill ta ett par minuter, och söka på dokumentation,
prova detta själva?
Eftersom ni gör webbutveckling, du kommer att inse en hel del av ditt arbete
kommer att läsa denna dokumentation.
Så jag tycker det är bra att bekanta med hur man läser dokumentationen,
hur man kan räkna ut vad som är där, vilken kod exempel som du kan använda,
vad du kan utnyttja.
>> Så återigen, getbootstrap.com, gå till fliken Komponenter,
och rulla ned till grupplistan.
Och du kommer att se exempel på kod som du kan använda för att göra ditt HTML passar denna.
Så ta ett par minuter och prova och utforska det själv,
oavsett om du är här eller hemma.
Om du är hemma, pausa videon, kanske, och prova det själv.
Om du är här, om du går till vår website-- om du uppdaterar sidan
ser du här på det.
Denna mycket samma kod är bara lägga till nya stilar direkt.
Så ta några minuter.
Låt mig veta när du mår bra om det eller när du helt förlorad.
Låter bra?
Häftigt.
Snabb undan för dig hemma, medan vi väntar,
Om du går vidare till GitHub webbplatsen att jag satte upp ett par glider sedan,
mot början av videon, Jag har en GitHub reporäntan, förvar,
för detta samtal.
Alla dessa kodexempel som vi ska vara talar om lagras här.
Så om du går till utmana-1.html detta är all kod som vi har just nu
på vår CodePen.
Så du kan bara gå vidare, och kopiera detta, och klistra in den i ditt eget CodePen.
Och på så sätt kan du hålla dig med vad vi gör här.
Så har den här sidan öppen liksom vi gå igenom resten av seminariet.
Återigen, du vill att det ska se ut vad du se ner längst ner på skärmen
det.
Mår bra?
Fast.
Låt oss vänta för alla andra att avsluta med vad de gör.
>> Ja?
>> PUBLIK: Antag att jag ville att använda Bootstrap på home--
NEEL Mehta: Ja.
PUBLIK: Jag ser, på hemsidan, Komma igång sidan.
De ger mig alternativ Bootstrap, källkod, eller Sass.
Vilken av dessa vill jag?
>> NEEL Mehta: Ja.
Så frågan är, hur får man började använda Bootstrap själva?
Det händer bara magiskt jobbar här.
Så om vi har tid på I slutet av seminariet,
Jag ska visa dig hur du kan få det på din egen webbsida.
Som här, jag har faktiskt sätta in några inställningar som
kommer att få det automatiskt laddad, men jag ska
visar dig att göra det från skrapa på dina egna webbsidor.
>> PUBLIK: Tack.
>> NEEL Mehta: Ja.
Bra fråga.
Mår bra?
Mår bra?
Häftigt.
Så vem vill berätta för mig hur de gjorde denna sak ser bra ut och Boostrappy?
Vad är det första klass vi lägger till ul?
PUBLIK: class = "list-gruppen".
NEEL Mehta: Ja. lista-grupp.
Och vad gör vi fäster vid lis?
Någon annan?
PUBLIK: Och sedan, efter att class = "list-grupp-post".
>> NEEL Mehta: Ja.
>> PUBLIK: Och det är samma för nästa en.
>> NEEL Mehta: li class = "list-grupp-post".
Här har du.
Vi har vår fina grupplistan precis som vi hade förväntat oss.
Så där du går.
I 10 minuter, har vi gjort denna tråkiga, gamla Yalp! sida
ser trevlig och professionell.
Och det är bara början.
Så nu när du känner bra om det, låt oss
bara gå vidare och prata om ett par flera komponenter som
kan komma till hands när du gå hela ditt äventyr.
>> Naturligtvis finns det en hel del sådana här.
Och nu när du har lärt dig hur man gör listgrupper,
Du kan ganska mycket att lära själv hur man gör något av detta.
Men, naturligtvis, låt oss bara försöka och göra ett par mer oss själva,
bara så att du får en känsla för hur du kan använda dem.
Jag ska bara gå till detta exempel här.
Återigen, den kod som jag just klistrat här finns just här.
Så känn dig fri att dra upp den.
>> Så vi har redan gått igenom ett par av dessa exempel.
Så vi har knappar, som vi har redan sett hur man gör.
Vi kan göra knappar större.
Genom class-- knappen det går, BTN btn-lg och btn-standard gör det vitt.
Så detta gör vår knapp större än den annars skulle vara.
Det kan komma till hands om du har stora skicka-knappen eller något.
Vi såg grupplistan exempel vi såg formen exemplet.
>> En mycket viktig är ikoner.
Och ikoner är ett sätt för dig att lägga intressanta saker, såsom check check
märken eller plussidan, eller vän ikoner, eller starta ikoner,
eller vad din webbprogram.
Så återigen, om vi in här, komponenterna, glyphicons,
är ikonerna som Bootstrap.
Det finns en uttömmande lista över alla de som här.
Så precis som ett exempel, låt oss försöka och tillsätt en.
>> Så som Facebook, är vi till att försöka att ha en Lägg till vän-knappen.
Låt oss först lägga till några stil.
knappen class = "btn btn-success".
Och det går vi.
Låt oss lägga till en ikon här.
Vilken ikon, tror du, kan vara meningsfullt att sätta här?
Du har säkert sett på vissa webbsidor eller vad som helst,
men vad är ett exempel på en ikon som kan gå väl inom den här knappen?
Känn dig fri att bläddra denna uppfattning, om du behöver någon inspiration.
Det finns en hel del nyttig som finns här.
Ja?
>> PUBLIK: Kanske glyphicon användaren en?
NEEL Mehta: OK.
Den här.
Det är ganska bra.
Ja.
På Facebook, jag tror det skulle se lite sådär.
Så här är hur vi går om lägga till ikoner till våra sidor.
Vi har bara en span-- ett spann är en neutral behållare för något.
En div är en behållare för något, ett spann är en annan behållare.
divs har radbrytningar omkring dem, spännvidder inte.
Så det finns olika sätt att med generiska behållare.
Som om det inte vettigt att sätta det insidan av ett stycke eller något.
Vi har fått för att uttrycka det inuti något om,
så vi bara sätta inne i ett spann.
Så span class = glyphicon glyphicon-användare "stäng spännvidd.
Och nu har vi ikonen inne knappen.
>> Så det ser inte helt olik vad du kan se på facebook.com.
Och så är det skönt att dessa kan faktiskt placeras var som helst du vill.
I sidhuvudet barer, i din lista grupper.
Vad som helst.
Det behöver inte vara insidan av en knapp.
Så som ett exempel, jag kan sätta samma klass här.
"glyphicon glyphicon-user".
Och det verkar precis samma.
Så dessa icons-- du kan använda span class = "glyphicon glyphicon-whatever".
Och som låter dig lägga till ikoner var du vill.
Och ikoner är en mycket viktig del av att göra en hemsida look
professionell och bra gjort.
Så inte överdriva det, men det är ofta en bra sak att veta.
>> Paneler, igen.
Jag ska bara göra det igen som en resumé eftersom de är typ av inblandade.
Du kommer att märka att i förvandla din vanliga HTML
plats i en Bootstrap-afied webbplats, har du
att lägga till extra struktur till webbplatsen.
Till exempel har vi extra DIV här bara för att de
behövs för att göra en panel.
Så bara ha det i åtanke att du måste ha extra struktur.
Så "panel panel-default".
Kanske är det panel-header.
Jag tror att det panelrubrik.
Ja.
Det går vi.
Så, återigen, finns det vår panel.
>> En sak som vi täckte inte ännu, tabeller.
Tabeller, som standard look slags ful.
Så här.
Men tabeller är, naturligtvis, en mycket viktig del
av vad du ska göra inom webbutveckling.
I Pset7 exempelvis CS50 Finans, som kommer ut snart,
du kommer att använda en mängd tabeller.
Och en hel del webb dev använder mycket tabeller för att visa information,
som aktier, eller poäng, eller vad som helst.
>> Så styling tabeller är faktiskt väldigt enkelt.
Du lägger tabellen klassen till ditt bord.
Och jag vågar säga, det ser ganska trevligt.
Du kan göra extra saker, som "tabellen tabell randig".
Och du kommer att se resultatet här.
Du kan göra bords gränsar.
Det finns en hel del alternativ som du kan.
Men i grund och botten, lägga till en bord, bordet klassen,
kommer att göra dina tabeller ser ganska trevligt.
Så det är en kort genomgång av några av de viktigaste stilarna
och komponenter du kommer behöver använda för Bootstrap.
Så jag tror att wraps upp vår vackra del.
Eventuella frågor just nu om hur att göra dina webbplatser vacker?
Hur du kan använda dessa komponenter till din fördel?
Mår bra?
Ja?
PUBLIK: Kanske är en dum fråga,
men du kan använda Bootstrap på Wikipedia?
Om du redigerar en Wikipedia-sida?
NEEL Mehta: Ja.
Så frågan var, jag är redigerar en Wikipedia sida,
kan jag inkludera Bootstrap stilar där?
>> PUBLIK: Ja.
>> NEEL Mehta: Och så Bootstrap är i grunden en stor CSS-formatmall.
En CSS-formatmall bara säger, när Jag har den här klassen, bifoga dessa stilar.
Så CSS-formatmallen för Bootstrap kommer att bli något som .btn,
knappen klass, får som en rundade hörn gränsen eller vad som helst.
Så i grund och botten, Bootstrap det bara en gäng klasser och ett gäng olika stilar
anges för dessa klasser.
Så länge du har att CSS, denna lista över regler i din sida,
du kommer att få Bootstrap styling.
Det är, naturligtvis, beroende har de Bootstrap stilar i din sida
till att börja med.
>> Och så i Wikipedia, du förmodligen inte kunde
göra det eftersom Wikipedia inte har Bootstrap i det.
Men om det hade Bootstrap, du kan nog göra det.
Och om du ville, du kunde inkludera det, men det kanske
bryta den befintliga layouten på sidan.
Men väldigt bra fråga.
Du kan använda Bootstrap där det ingår,
men det är inte inbyggd som standard.
>> PUBLIK: Tack.
>> NEEL Mehta: Ja.
Fler frågor?
Ja.
Så oavsett om du är här eller hemma, bara ihåg getboostrap.com-- igen,
getboostrap.com-- är din vän.
När du använder Bootstrap, kommer detta att ge dig
instruktioner om hur du får började, hur man använder komponenter.
Det finns några coola JavaScript plug-ins som vi inte kommer att gå hit,
men de är värt att kolla in också.
Så det här är din vän.
Det är bara viktigt att få van vid hur man använder det här.
>> Så låt oss prata lite om gör lyhörd webbplatser.
Så som jag sade tidigare, människor som används sina bärbara datorer, använder de sina telefoner.
Och som ni kan mycket väl föreställa sig, är detta en helt annan skärmstorlek än så.
Och så samma webbplats som ser bra ut på min telefon
kommer inte att se bra ut, nödvändigtvis, på en dator.
Så vad du behöver göra är göra din webbplats anpassa sig.
Den har att anpassa sig till de olika skärmstorlekar att det är på.
>> Det har att säga, jag vet att jag är på en dator, en stor bärbar dator, ska jag expandera.
Jag vet att jag är på en telefon, skulle jag krymper.
Och så Bootstrap ger några mycket, mycket användbara verktyg för att göra detta.
Så Bootstrap låter dig paus en webbplats till 12 kolumner.
Du kan göra rader och har 12 kolumner.
Och du kan partitionera de hur du vill.
Du kan ha en, stor sak, vilket är 12 kolumner bred.
Du kan ha två saker som är sex vardera.
Du kan göra en sak som är fyra, en som är två, eller en som är sex.
Du kan göra tre, tre, tre, tre.
Du kan göra vad uppdelning som du vill.
>> Så kanske din webbsida måste ha en vänstra kolumnen som är en tredjedel av bredden.
Så det skulle vara fyra kolumner bred och resten av sidan
skulle vara åtta kolumner bred.
Så det här är ett exempel.
Låt oss dra upp ett annat exempel.
>> PUBLIK: Är det alltid måste vara en delad ännu?
Kan det vara en sju, fem split?
>> NEEL Mehta: Ja.
Det kan vara sju, fem.
Ja.
Så länge det bidrar till 12, det är bra.
Så låt oss gå tillbaka hit.
Återigen, som är koden Här finns också här,
enligt reagerar exempel.
Några så jag drog bara upp Exempelvis svarar koden här.
Så du gör detta genom att använda något som heter rad.
Row är bara en annan klass.
Det är en annan stil du lägger på din divs att göra dem sina egna komponenter.
>> Så du säger, div class = "rad" för att göra en rad,
att ge dig själv 12 kolumner av utrymme.
Och då kan du lägga kolumner inne i det.
Så här är vi COL-xs-6.
Oroa dig inte om xs.
Vi pratar om i en sekund.
Men i grund och botten har vi en sak som är sex bred.
Vi kallar det lämnade.
Och så det är den vänstra rutan här.
Vi har en sak som är sex av de 12 kolumnerna bred.
Och att man är på rätt.
>> väl bara ger fabrikat din div fylla upp grå.
Så det är bara så att vi kan se till att de är olika.
Och så detta det första exemplet.
Det är ett mycket enkelt exempel på hur man skulle använda dina rader och kolumner här.
Du definierar en rad via class = "rad".
Och sedan gör class = "col-xs-6" gör hälften, "col-xs-6" för att göra den andra halvan.
Här är en mer komplicerad exempel.
Låt oss titta på Tiny, Enorma, resten en.
>> Vi kan göra Tiny två kolumner bred, vi kan göra enorma sex kolumner bred,
Och resten fyra kolumner bred.
Som ger upp till 12.
Och så dessa hamnar spänner bredden på sidan.
Återigen har vi en rad utanför.
Då har vi div class = "col-xs-2" och sedan 6, och sedan 4.
Och det kommer att ge strukturen för oss.
Och så att vi kan sätta allt sjutton vi vill här inne.
I stället för Tiny, kan vi sätta en knapp.
knappen class = "btn btn-primär".
Och så märker att vår knapp inte tar upp alla bredden,
men åtminstone det är begränsat till så mycket utrymme.
>> Så det är allt gott och väl.
Så kan vi nu bryta upp vår hemsida sida i bitar, bredd klokt.
Vi kan säga att vi vill ha en vänster kolonn, och en höger kolumn, och så vidare.
Men vi har inte gått över hur du gör det lyhörd.
Och så Bootstrap låt oss göra det också.
Det har dessa saker som kallas brytpunkter.
Så det har ett sätt att veta om du är på en bärbar dator, du är på en tablett,
du är på en telefon horisontellt, eller om du är på en telefon vertikal.
Det vet skärmstorleken.
Och bryter detta i fyra categories-- stor eller lg, som är bärbara datorer, vanligtvis.
md eller medium, vilket är tabletter.
sm, små.
Eller xs, extra liten.
Och så när du anger en kolumn, säger du,
det ska vara sex kolumner bred på en extra liten enhet.
Det är därför vi gjorde col-xs-6.
Vi säger att det ska vara sex av de 12 kolumner breda
på en extra liten enhet.
Och om det är något större, vi ska bara standard att använda extra liten storlek.
Om det är något större än extra liten, det ska vara sex bred.
Och så att vi kan utnyttja dessa för att göra våra spalter
ta upp olika mängd kolumner baserade på skärmstorleken.
Låt oss gå till denna lyhörd storleksändring.
Så vi har våra spalter.
Och det säger, "col-lg-6 col-xs-12".
Så med tanke på vad du vet så långt, vad gör du
tror kommer att hända på en stor skärm?
Tja, det är typ av gett vika, men vad gör
du tror att det kommer att se som på en stor skärm?
Och varför är det så?
>> PUBLIK: Är det så på en stor skärm, är det
kommer att ta endast en del av hela utrymmet?
Liksom hälften av det, antar jag?
>> NEEL Mehta: Ja.
>> PUBLIK: Och på mindre skärm, det kommer
att ta upp hela skärmen, 12.
NEEL Mehta: Ja.
Höger.
Så som ett exempel, låt oss titta bara här nere.
Ja.
Så på något som är lg eller bigger-- så min dator händer
att lg eftersom det är nätt wide-- det kommer att göra
den sida vid sida eftersom det är col-lg-6.
Så eftersom det är på stor, det gör det sex kolumner bred och sex kolumner bred.
Låt oss se vad som händer om jag gör detta till en mindre en.
Jag ska bara un-helskärm detta.
Och jag kommer att krympa skärmen.
Jag kommer att krympa skärmen, så det ser ut som jag är på en mindre enhet.
Så jag kommer att krympa det så här.
>> Och voila.
Det är nu staplade eftersom vi nu har gått
från stora att-- detta är förmodligen en extra liten skärmstorlek.
Och så nu säger, OK, vi är inte i stort, vi är i extra liten land.
Så vi kommer att använda den extra liten storlek.
Och vi kommer att xs-12, XS-12.
Så det kommer att staplas.
Och bara märker att det finns en sak som kallas en brytpunkt.
En brytpunkt är där du gjort övergången
från extra små till små, små till stora, och så vidare.
>> Så bara märker att när jag skjuter detta ut, så småningom kommer du komma till saken
där de kommer att gå till att sida vid sida.
Här har du.
Så det finns brytpunkten där.
Så att vi kan göra det ännu mer komplicerat.
Nu kan vi säga, dessa det borde vara fyra breda.
Det vill säga, de bör ta upp ungefär en tredjedel
av tal om mycket stora enheter.
På ett medium enhet, bör det ta upp halva skärmen eftersom det är md-6.
På en mycket liten enhet, det bör ta upp 12.
Och så detta ser ganska naturligt.
Låt oss bara prova detta för oss själva.
>> Så på en stor skärm, är de fyra breda.
Krympa den lite.
Och de är nu sex breda.
Så det här är sex, sex, sex.
Krymp det ännu mer och sedan de kommer att vara helt staplas.
Så det här, till exempel, är vettigt om du har kort, såsom nyhets kort,
till exempel, där om det är på en mycket stor skärm,
det är OK om du har flera sida vid sida eftersom de alla skulle få tillräckligt med utrymme.
Men de måste ha tillräckligt med utrymme.
Så på en mindre skärm, du skulle vilja ge dem
mer utrymme, proportionellt, på sidan.
>> Så som ett exempel från verkliga livet, Låt oss säga att vi har Twitter.
Och vi har textrutan så Du kan tweet på sidan.
Och vi har en lista över trending ämnen på höger sida.
Så på en stor skärm, vi borde har dem vara sida vid sida,
så att du kan se dem på ett glas.
Men på en mindre skärm, vi ska göra 12 och 12,
så att trender ämnen ligger under tweet området.
Eftersom tweet området är det Huvudsaken och på en liten skärm,
de trender ämnen inte Oavsett riktigt lika mycket.
Och så sätter vi dem precis nedanför, så att de båda kan få tillräckligt med utrymme.
Vettigt hittills?
>> PUBLIK: Ja.
>> NEEL Mehta: Solid.
Så det är alla de exempel jag har här.
Låt oss försöka göra en utmaning.
Så återigen, är denna utmaning-2.html för de av er följa med hemma.
Så min kompis, Mark Zuckerberg, kom till mig häromdagen.
Och han är som, Neel, jag har blivit ganska bra på webbdesign.
Jag kan göra HTML.
Jag har gjort den här lilla, ny redigera på Facebook.
Jag har en ny idé för hur vi ska styla Facebook.
Och här är det.
Precis här.
Här är några exempel kod.
Så det heter Fancybook.
>> Vi har några statusuppdateringar.
Vi har Nemo, Mike Kosowski, ***-- tre statusuppdateringar.
Och sedan har vi en lista över online-vänner precis nedanför den.
Så han har gjort sin hemläxa.
Han vet lite om Bootstrap, han gjorde listvy,
Han har gjort en liten bit av HTML.
Så han har webbsidan.
Men han är som, Neel, det gör jag inte förstå lyhörd design på alla.
Har du några experter som kunde hjälpa mig med det?
Och lyckligtvis är du nu experter inom reagerar design.
>> Så vad han sa till mig var att han vill Fancybook att se ut så här.
På en mycket liten enhet, som en telefon, allt
kan staplas, som här.
Så du har tidslinjen förskott, där uppe, och sedan
Du bör ha chat fältet längst ner.
Men på en tablett eller ett medium enhet, bör det vara hälften och hälften,
som i tidslinjen bör vara halv och en förteckning över chatt vänner
ska vara på den andra halvan.
>> Sedan på en bärbar dator, tidslinjen bör ta upp tre fjärdedelar
och sedan chatten häck bör ta upp en annan fjärdedel.
Och så han är som, Neel, jag har denna koden här, men det är inte lyhörda.
Det måste bete sig så här.
Så min utmaning till dig ges denna kod här--
Om du uppdatera din CodePens, ser du här.
Eller om du bara klistra in koden på challenge-2, ser du här.
>> Här är det här exemplet kod.
Du kommer att se några XXXS.
Jag vill att du ska ändra XXXS, så att tidslinjen och listan över vänner
följer dessa specifikationer här.
Oroa dig inte om vad som är inuti tidsplan för nu.
Vi kommer att få det i nästa steg.
Men nu, låt oss se om vi får dessa saker att dela upp det så här.
Det gör det vettigt?
Så om du är hemma, pausa videon och försök
för att göra din webbsida ser lyhörd så här.
Om du är här, ta som två, tre minuter.
Känn dig fri att prata med en granne, och försök och åtgärda Mr Zuckerberg
lyhörd design problem.
Om du har några frågor, gärna låta mig veta.
Mår bra?
Gjort?
Fin.
>> PUBLIK: [OHÖRBAR].
NEEL Mehta: Vad?
>> PUBLIK: Jag är bra.
>> NEEL Mehta: Åh, bra.
Fin.
PUBLIK: Grejen 12, är det som Bootstrap
behandlar ett givet utrymme på skärmen som 12 enheter över och sedan delar upp det?
Hur exakt fungerar proportione arbete för detta?
>> NEEL Mehta: Ja.
Så frågan är, hur gör proportione
arbeta för Bootstrap, eller hur?
>> PUBLIK: Ja.
NEEL Mehta: Så när du har en div class = "rad",
oavsett hur stor skärmen är, Bootstrap kommer att ge dig 12 enheter
av samma storlek till ta upp så mycket storlek.
Så i kolumn 1, det är alltid 8,33% av storleken på skärmen,
oavsett om det är detta breda eller det är denna breda.
Och så, naturligtvis, på ett mindre skärm, är varje kolumn mindre.
Du har fortfarande 12 kolumner bred, det är en mindre.
Så det är upp till dig att se till att att saker tar upp mer kolonn,
proportionellt, för att kompensera för att bristen på utrymme.
Betyder det vettigt?
>> PUBLIK: Ja.
Tack.
NEEL Mehta: Bra fråga.
Publik: På en stor skärm, kan du ha
tidslinjen tar upp tre fjärdedelar?
>> NEEL Mehta: Ja.
NEEL Mehta: Hur killar känner?
Bra?
Häftigt.
Så låt oss komma tillbaka.
Och låt oss försöka fixa denna del Mr Zuckerberg: s webbplats.
Så tidslinjer är här uppe, på toppen, och listan med vänner
är längst ned.
Och så vi behöver bara tilldela kolumner, med dimensionering proportionell,
i vart och ett av dessa.
Så denna första *** är för tidslinjen.
Vilka klasser gör vi i här?
Vad gjorde ni sätta in här?
Så kom ihåg, på en stor skärm, måste det att ta upp tre fjärdedelar av bredden.
Och så vilken stil skulle ge dig det?
På en stor skärm, tre fjärdedelar av bredden.
Vilken klass använder vi det?
PUBLIK: Så vi ska bara vara redigera den första instansen av klassen.
NEEL Mehta: För nu.
Ja.
>> PUBLIK: Vi inte du redigerar vardera, individuell inslag i tidslinjen?
NEEL Mehta: Inte nu, åtminstone.
Så det hela är ett block.
Vi har precis ändra utformning av blocket.
Så här vi COL-lg-9 eftersom det är nio av de 12 breda på en stor skärm.
Och sedan på ett medium skärm, hur många kolumner ska jag få?
PUBLIK: Det är tänkt att vara hälften och hälften.
NEEL Mehta: Rätt.
Så hur många är det?
>> PUBLIK: Så sex.
NEEL Mehta: Sex.
Och sedan extra liten bör be-- om det tar upp hela bredden av raden,
hur många skulle det vara?
PUBLIK: 12.
NEEL Mehta: 12.
Ja.
Och nu har vi fått ändra denna andra,
så det tar upp resten av utrymmet.
Så col-lg--
PUBLIK: Det kommer att ta upp hela skärmen?
NEEL Mehta: Det tar upp en fjärdedel av skärmen på en stor enhet,
som vi visade här.
>> PUBLIK: Tre.
>> NEEL Mehta: Tre.
Och sedan col-md-6 för att ta upp resten av utrymmet.
col-xs-12.
Så nu har vi tidslinjen tar upp tre fjärdedelar
på sidan i den stora skärmen och sedan en fjärdedel på sidan.
Och sedan om storleken på skärmen ner, det bör ändra storlek i enlighet därmed.
Så det är staplade nu, på en mycket liten skärm.
Och om vi storlek upp lite, de bör vara exakt hälften och hälften.
Så vi har gjort det hittills.
Väldigt cool.
Och så att vi inte kommer att göra annan del av utmaningen.
Du kan göra det själv.
Men i grund och botten måste du försöka göra dessa lyhörd
som well-- gör tidslinjen poster, själva, lyhörd.
Så nu har vi gått igenom allt du behöver veta
om lyhörd sidan av Bootstrap.
Har du frågor om lyhörd design med Bootstrap
och hur du kan gå om att göra det?
Ja?
>> PUBLIK: Är det liknande om Vi hade en inbäddad video
och vi ville kontrollera skala vid vilken video was--
storleken på videon går från bärbara dator till telefon.
NEEL Mehta: Ja.
Mer eller mindre.
Du skulle behöva tala om videon till ta upp så mycket utrymme som det har gett,
vilket är lite irriterande ibland.
Men kärnan idén är densamma.
En video, precis som alla andra föremål i sidan, som en knapp eller vad som helst,
så länge du använder kolumner och rader,
du kan ge det en visst utrymme.
Och så får det för att hedra som en annan fråga eftersom som YouTube
bäddar har en viss, föredraget storlek.
Men teoretiskt på minst skulle det fungera.
Häftigt?
>> PUBLIK: Jag antar sedan, för en bild, gör du faktiskt
måste ha olika versioner av samma bild i olika storlekar
för laptop kontra iPhone?
Ja Frågan är, måste vi har bilder som svarar också.
Och faktiskt, kan du göra det.
Jag tror att det är i CSS.
Men Bootstrap tillåter dig att göra det också.
Du kan ha lyhörd bilder.
Du kan få dina bilder ändra storlek beroende på storleken på sidan.
Och det finns en mycket ny sak HTML5, den senaste versionen av HTML,
och CSS3, den nyaste version av CSS, som
låter du begära olika bilder baserat på storleken skärmen som du är på.
Vanligtvis är det tillräckligt bra för att bara har din bild bara krympa eller växa till
men stor den behöver vara.
Men du kan, om du vill att, ha en 32 av 32
för mycket små skärmar och 64 av 64 för en stor skärm,
och sedan tjäna dem selektivt.
Du klarar det.
Det är gjort av vissa människor.
Det är fortfarande ganska framkant.
Men korta svaret, lyhörd images-- Bootstrap kan rädda dagen där.
Häftigt?
>> PUBLIK: Tack.
>> NEEL Mehta: Så låt oss tala riktigt snabbt om hur
att få detta i din egen webbsida.
Låt oss säga att du vill göra din egen webbplats med hjälp av Bootstrap.
Och så låt oss bara bara gå igenom det tillsammans.
Låt oss säga att du bara göra en normal HTML-sida.
Känn dig fri att följa i oavsett din favoriteditor är.
Så vi har bara några HTML-sida.
Vi kan göra! Doctype html.
Detta är också html, vår sida.
Ingenting nytt.
Vi har gjort det här förut.
Så här har vi vår HTML och vi kan lägga saker här inne.
Vi kan ha vår knapp.
Och som jag sade tidigare, detta är inte nödvändigtvis kommer att fungera.
Varför skulle det inte fungera?
Varför kommer vi inte få våra trevligt, färgrikt knäppas?
>> PUBLIK: Eftersom vi inte länka den till Bootstrap projektet eller fil?
NEEL Mehta: Ja.
Rätta.
Eftersom Bootstrap-- det är bara en fin CSS-fil.
Det är en serie av stilar som är knutna till dina element.
Här har vi veta att vi vill använda dessa stilar.
Jag ska storlek som upp lite.
Vi har sagt det vi vill använda dessa stilar, men vi aldrig
berättade för den vad stilar är.
Och det är vad din fråga från tidigare var.
Det är svaret på den.
Vi måste hitta ett sätt att få stilar och inkludera dem i vår sida på något sätt.
Och så Bootstrap vilja visa oss hur man gör det.
>> Så om du går till toppen här, Komma igång.
Det finns olika sätt att ladda ner den.
Detta kanske inte vettigt nödvändigtvis.
Bootstrap-- detta kommer att låta du tag i CSS-filen själv.
Och du ingår det i din egen sida.
Källkoden är om du vill att hacka på det själv.
Du behöver inte detta verkligen.
Sass är ett språk som sammanställer i CSS.
Tänk på det som en förprocessor.
Ungefär som PHP är en preprocessor av HTML är Sass en förprocessor för CSS.
Så om du vill göra det så sätt kan du göra det.
>> Det enklaste sättet är att använda en CDN, eller innehållsleveransnätverk.
Det är en webbplats som bara serverar en kopia av Bootstrap
mycket snabbt för dig att inkludera i din egen sida.
Så här är ett exempel.
Det kommer att ge dig den här länkelement.
En länk inslag berättar din webbläsare, vidta filer lagras här
och inkludera det i vår hemsida.
Och i det här fallet, är det den Bootstrap CSS-fil.
Så vi ska bara kopiera webbadressen, eller texten, och vi ska kasta den inne
av våra huvuden.
>> Och jag kommer inte att starta sidan för detta, men du kan lita på att det fungerar.
Länken tar dig CSS.
Inkludera det i din sida och sedan kommer du att
kunna använda alla Bootstrap klasser som du känner och älskar.
Om du vill behålla den lokalt och har det på ditt eget filsystem
i stället för att behöva gå till Internet för att ta tag i det,
som om du vill använder webbplatsen offline,
Du kan använda alternativet Hämta.
Men för det mesta med hjälp av CDN är ganska snabbt eftersom det sättet,
den hålls uppdaterad för dig också.
Du måste manuellt uppdatera den heller.
Vettigt?
>> Så en hel del verktyg kommer att ha denna inbyggda i som standard. I din Pset7 och Pset8,
Jag tror Bootstrap är inkluderas automatiskt.
Och i CodePen, för Exempelvis är det redan
ingår eftersom jag tillade tillägga att inställningen.
Så om du någonsin vill leka med det, kan du bara gå på CodePen,
eller gå på ditt ID, eller vad som helst.
Och du skulle kunna rullstol Bootstrap där,
men det är inte alltid byggt i, som standard, till webben.
Vettigt?
>> Ja.
precis som en recap-- vi har som fem minuter kvar.
Men som en återblick i nya webbsidor, du kan inkludera Bootstrap så här.
Och när du har det ingår, du kan göra allt det roliga grejer här.
Du kan gå på, och du kan bara granska CSS, kan du lägga till några häftiga stilar,
Du kan ha komponenter som knapparna,
och tabeller, och listan objekt som vi nämnde.
Det finns några coola JavaScript plugins, som du kanske vill utforska.
De lägger några häftiga interaktivitet till webbsidan.
Gillar du en gör en modal dialog.
>> Så det finns lite kul grejer du kan göra med Bootstrap.
Så mitt råd till dig är att gå vidare och använda det i dina egna projekt,
följ instruktionerna som vi precis gjorde om hur man får det,
och bara läsa Bootstrap eftersom du lär dig mer om vad du ska göra.
Och så vi har gått över, idag, hur man använder
dokumentationen vad byggnaden block är, och hur det är konceptuellt.
Så nu är min utmaning till dig är gör en webbplats med hjälp av Bootstrap.
Gå in i docs.
Och använda de verktyg som vi har lärt oss hittills att försöka tolka dem
och förstå dem.
Och använda dessa stilar och verktyg du ser det på din webbplats.
Och det är bara en stor, experimentella processen.
>> Prova en viss stil.
Fungerar det?
Gör inte?
Försök att sätta saker tillsammans.
Se vad som händer.
Det är väldigt mycket en själv vägledas discovery-processen.
Men i dag, har vi lärt oss mycket grunderna i vad är Bootstrap?
Varför fungerar det?
Hur fungerar det?
Hur ska vi börja använda det, i första hand?
Och så nu när du är över den puckel, du
bör kunna göra det ganska smidigt själv.
>> Så än en gång, alla kod vi gjorde är här.
Så om du någonsin vill att få en pensel upp på,
ut, vad är en snabb fuska ark för alla stilar?
Du kan gå in på detta prov här.
Vi har några exempel stilar här.
Om du vill prova utmaningar igen på egen hand,
du kan prova dem här och kolla in lösningar.
Så den här länken kommer att vara med på bilderna, som
kommer att skickas ut till dig förstås.
Men det är också upp här.
Du kan pausa videon, om du vill.
All information du behöver är kommer att vara här, på denna sida.
Så om någon har några frågor, vi kan ta dem under de närmaste par minuter.
Annars, tack alla mycket för att titta på.