Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Svo halló við allir sem er að horfa hér
eða horfa á netinu, eða lítillega.
Mitt nafn er Neel, þetta er CS50.
Og málstofa í dag er Responsive Web Design með ræsi.
Það er efni sem er mjög nærri hjarta mínu.
Vonandi verður það í hjarta,
sem í lok námskeiðsins í dag.
Svo Ræsi.
Hversu margir af þú hafa gert eitthvað konar þróun vefur fyrir?
Góð upphæð?
Pínulítið.
>> Svo er heimsins Ræsi mest vinsæll, andlit-endir ramma.
Það er notað by-- ég hef kosið að par af handahófi websites--
Lyft, Newsweek, og Vogue.
Það er notað af fjölda vefsíðna.
Það er vefur hönnun ramma sem vilja láta þú gera vefsíður þínar
bæði falleg og móttækilegur.
Og ég ætla að fara yfir þetta tvö hugtök hér.
Beautiful.
Svo þú hefur eðlilega heimasíðu á vinstri, sem er gert með því að aðeins HTML.
Þú hefur lært HTML í bekknum og í hlutanum lengd.
Ræsi er leið til að gera vefsíður þínar falleg.
Þú getur tekið hvað er á vinstri megin á skjánum
og snúa það inn í það er á hægri hlið á skjánum þínum með mjög,
mjög, mjög lítið númer.
>> Þú færð gott bláa hnappinn, þú færð ímynda, ávalar brúnir á skjánum,
þú færð listaskjáinn þú færð spil, og svo framvegis með mjög litla kóða.
Það er í raun engin CSS sem þú þarft að skrifa sjálfur.
Svo Ræsi gerir þér kleift að hafa þessar pre-innbyggður CSS
hluti sem þú getur sett inni vefsíðu þinni
til að gera það líta fallega án mjög mikil vinna á eigin spýtur.
Það er í raun ræsi, upphafið,
fyrir vefur þróun ævintýrum þínum.
Og svo þegar þú ert bara mocking upp vefsíðu,
það er mjög góður staður til að byrja.
Þú getur fengið gott útlit heimasíðu með mjög, mjög litla vinnu.
Og reyndar, við erum að fara til að gera þetta sjálf
í tengslum við eins og fimm minutes-- innan 10 mínútna.
Svo það er nokkuð auðvelt að gera sumir mikill vefsíður.
Svo er það fyrsti hluti.
>> Annað part-- móttækilegur.
Fólk nú á dögum, ekki bara komast á netið á fartölvur þeirra.
Reyndar, eins og 2014, fleira fólk komast á netið í gegnum farsíma,
eins síma, eða töflur eða þjónustu, eða svo á en vefsíður.
Og vefsíður hafa jafnan verið hannað með fartölvur eða skjáborð
í huga.
Og svo vefsíður eru oft ekki mjög vel til þess fallin að símanum.
Ef þú heimsótt alltaf harvard.edu á símanum,
það er góður af pirrandi reynsla, ekki satt?
Það er vegna þess að það er ekki móttækilegur.
Við erum að reyna að gera vefsíður sem eru móttækilegur,
sem svara skjár stærð fólks.
>> Þannig að ef það er sími, það er fara að fara í símann.
Ef það er tafla, það er að fara að fara á töflu.
Það lagar að passa skjár sem er verið að nota.
Og svo gefur ræsi einnig sumir Mjög, mjög gagnlegur tól fyrir það.
Og við erum að fara að ræða það eins og heilbrigður.
Svo aftur, það eru tveir hlutar til Bootstrap-- falleg og ábyrgð.
Við erum að fara að tala um þá.
First, falleg.
Og þá móttækilegur.
>> Svo allur kóðinn sem við erum að fara að tala um today--
við erum að fara að hafa a einhver fjöldi af dæmum, a einhver fjöldi af áskorunum, og svo on-- það
allt lifir á þessari vefsíðu hér.
Þessi mynd er það sem við sendum út.
Svo ef þú ert hér, getur þú fundið frjáls að þurfa ekki að skrifa það niður.
Og ef þú ert að horfa lítillega, finnst frjáls til að draga þetta upp á tölvunni þinni
einnig.
Þú munt sennilega þurfa það á meðan á þessari ráðstefnu.
>> Þannig að við erum að fara að nota website gestur CodePen,
sem er samstarfsverkefni kóðun umhverfi, á þessari ráðstefnu.
Og CodePen-- og ég ætla sýna þér hér alvöru fast--
það gerir þér kleift að skrifa HTML sameiningu.
Ég get skrifað það, get ég sent það til strákar, þið geti breytt henni.
Jafnvel ef þú ert fjarlægur, þú munu áfram hafa aðgang það þannig.
Þú getur slegið HTML kóða minnsta efst og það verður sjálfkrafa
hægt að breyta í Vefsíðan neðst.
Svo það er leið fyrir þig að fljótt prófa kóða
án þess að þurfa að gera hvers konar efni á IDE, eða þínu eigin vefsvæði,
eða hvað sem er.
>> Svo fara á undan og draga upp þetta website, ef þú ert fjarlægur
eða ef þú ert hér, sérstaklega ef þú ert fjarlægur.
is.gd/cs50boostrap.
Engar húfur, engar undirstrikar, ekki neitt.
Svo þeir sem eru hér, bara gefa mér thumbs
upp þegar þú hefur dregið upp þeirri vefsíðu.
Gott?
>> Áhorfendur: Já.
>> NEEL MEHTA: Þannig að við munum fá til að í bara annað.
Svo fyrst, við erum að fara að komast að, hvernig þú gera vefsíður þínar falleg?
Við erum að fara að læra hvernig á að taka leiðinlegur, gamall HTML, eins og ég sýndi þér áður,
og snúa það inn í raunverulega ágætur hluti,
eins gott tækjum, nice, litað hnappar og merki, og borðum,
og allt, með ræsi.
Þannig að ef við gætum öll farið yfir til CodePen að þú dró bara upp.
Það ætti að líta svolítið eins og þetta.
Er það líta út eins og þetta fyrir alla?
>> Áhorfendur: Já.
>> NEEL MEHTA: Ef þú ert fjarlægur, það ætti að líta svona eins og heilbrigður.
Ef ekki, mun ég sýna þér fljótlega hvernig þú getur fengið það líta svona út
í framtíðinni hluti af the vídeó.
Svo hér höfum við skrifað mjög einfalt HTML,
eins konar þú hefur verið að nota í bekknum.
Það er laglegur undirstöðu.
Engin fínirí.
Og við höfum smá dót.
Við höfum hannað mjög, mjög undirstöðu byrja upp
kalla Yalp! sem þú getur finna veitingahús á svæðinu,
og finna dóma og Leiðbeiningar um allar þessar.
Það er mjög góð hugmynd.
Það er aldrei verið gert áður.
Það er mjög sérstakt nafn, líka.
>> Svo það sem við erum að fara að reyna að gera er að hjálpa eiganda
af Yalp! gera vefsíðu hans líta virkilega, virkilega flott.
Svo til að byrja með, eiganda Yalp! hefur gert lítið leit
kassi, og smá hnappinn, og þá kannski smá
auðkenndum svæði fyrir a auðkenndum veitingastaður, og þá
lista yfir öðrum veitingastöðum sem eru á svæðinu.
Svo við getum bara farið í gegnum HTML kóða alvöru hratt.
Hversu vel þú ert krakkar með HTML?
Við höfum gert svolítið kafla og einnig í flokki.
Decent?
>> Svo bara eins og ágrip, HTML er allt um að hafa
merki eða þætti sem segja að tölva hvernig á að leggja fram á vefsíðu.
Þannig að þetta h1 here-- byrja H1, Velkomin að Yalp !, enda h1-- segir tölvuna,
teikna stór haus það segir, Velkomin á Yalp!
þarna inni.
Við höfum einnig form.
Við getum inntak svona, texta inntak, sem vilja láta eins og texta kassa
þú skrifar í.
Þú hefur einnig hnappa.
Þú færð gott, smella á hnappinn.
Það þýðir ekki að gera neitt rétt nú, en þú færð á hnapp.
Hægt er að hafa Divs eða strik, til brjóta upp síðuna þína í ýmsa hópa.
>> Hægt er að hafa málsgreinar, þú þarft hnappa.
Ef þú ert málsgreinar, þá þú þarft óraðaðan lista, ul,
og listum innan þess, li.
Svo þetta eru einfaldar byggingareiningar vefsíðu.
Og reyndar, ansi mikið hvert vefsvæði sem þú sérð
er að fara að byggja að nota þessi sömu verkfæri.
Auðvitað, þeir gera ekki allir líta þetta slæmt vegna þess að við erum
fara að krydda þetta upp smá.
Svo skulum þessa leiðinlegur gamall HTML og byrja umbreyta því í fallegu síðuna
sem við sáum bara nokkrar mínútur síðan.
>> Svo skulum byrja á mjög einfalt.
Þannig að við höfum þennan hnapp hér.
Í ræsi, eins og við sáum, að við getum hafa a ágætur, falleg, bláa hnappinn.
Og það er gert ekki með því að gera sérsniðna CSS.
Það er engin sérsniðin CSS hér.
Það er gert með því að bæta flokka að HTML þættir þínum.
Ef þú hefur reynt námskeið eða hrefs, eða akkeri, eða type = "text" fyrir inputs--
HTML þættir geta haft þessa eiginleika.
Þeir geta auka viðföng sem þú gætir gefið þeim.
>> Og svo, í þessu tilfelli, flokkar eru eigindi.
Svo þú vilt skrifa, hnappur class = eitthvað innra með strengi.
Og það eiginleiki mun segja tölva, þetta er ekki eitthvað, gamla hnappinn.
Það er hnappur sem er í Þessi tegund af hnöppum.
Og svo Ræsi, ef þú gefur það ákveðinn stíl á frumefni þinni,
það mun draga það á ákveðinn hátt.
Svo ég skrifa "BTN BTN-primary.
BTN vera skammstöfun fyrir hnappinn.
Þú munt taka eftir nú að ljótur hnappinn minn sneri
í fallegu, fallegu, bláa hnappinn.
Það lítur mjög gott þegar við smellur það.
>> Og svo það sem gerist er að við höfum BTN bekknum og BTN-primary flokks
á frumefni okkar.
Og Ræsi mun fara í og segja, OK, ég veit að það eru þessir tveir flokkar.
Allir þáttur sem hefur þessi tvö bekkjum ætti að draga svona.
Svo er það kjarninn í hvernig þú hengja stíll til þátta í ræsi.
Þú hengja bara námskeið til þeirra og það mun þyngd það út eins og það telur þörf á.
Svo hér er annað dæmi.
Í inntak, getum við bætt a class = "form-stjórna".
Og ég skal sýna fljótlega þar sem þú getur fundið út hvaða námskeið
eru í boði af hverri tegund af frumefni.
En klasa sem við bara bætt hefur ágætur, ávöl horn,
það hefur gott tróð, það hefur ágætur, blár ljóma við það.
>> Við getum líka farið inn í þetta form.
Og class = "form-inline", sem mun gera form okkar, eins og þú might ímynda sér, inline.
Svo það er að horfa svolítið meira eins og það sem við höfðum áður þegar.
Svo áður en við förum á að stíll restina af síðan, einhverjar spurningar um hvað við
gerði?
Við bara fylgja bekkjum ýmsum þáttum okkar.
Og ég skal sýna þér seinna hvernig þú getur reikna út hvað flokkar eru í boði.
Við fylgir námskeið sem hafa ákveðnar stíl.
Og það segir vefskoðaranum hvernig á að skipulag á síðu með
Kveðið stíll Ræsi er.
Einhverjar spurningar frá áhorfendum?
>> Gott svo langt?
Cool.
A einhver fjöldi af áskorunum með Ræsi er bara
vita hvaða þættir eru í boði og hvernig þú notar þær.
Og það er allt lært með reynslu og með
með því að lesa gögn, sem við munum tala um fljótlega.
Þannig að við höfum þessa div.
Það er bara leiðinlegt, gamall hlutur.
Við viljum leggja áherslu á það einhvern veginn.
Svo í ræsi, there ert a fullt af hlutum í boði.
Og þetta er getbootstrap.com.
Það er mjög gagnlegt tilvísun.
Það inniheldur hluti like-- Hér er hvernig þú gerir á hnapp.
Og þú getur gert NAV bars, þú getur merki, getur þú framfarir bars,
þú getur gert lista hópa.
Í grundvallaratriðum, það er alls konar af þú gætir séð vefsíðu.
>> Hér er eitt sem við munum reyna núna.
Það heitir spjaldið.
Ef þú notar alltaf Google Nú hafa þeir spil.
Eða Android tæki er spil.
Þeir hafa litla hvíta kassa sem hafa efni inni af því.
Og svo erum við að fara að reyna að gera sem sjálf hér með neitt
kallað spjaldið.
Þannig að ef við leggjum class = "spjaldið spjaldið default "til ytri div okkar,
þá erum við að hengja div class = - við skulum bara að athuga þessi skjöl.
div class = "spjaldið-fyrirsögninni" og þá div class = "spjöldum-líkami".
Aftur, ekki hafa áhyggjur óður í minnið þennan kóða.
Það verður í boði á netinu.
>> Þannig að við gerðum þetta og nú leiðinlegur okkar, gamla div sneri inn í þetta ágætur, lítið kort.
Það hefur ágætur padding, það hefur landamæri, stendur það út
frá the hvíla af the blaðsíða, sem er laglegur kaldur.
Svo skulum við fara í og breyta þessu Fá leiðbeiningar hnappinn til að líta ágætur.
Sem í áhorfendur vill segja mér hvað ég get gert við hnappinn
til að gera það líta ágætur með ræsi?
Já?
>> Áhorfendur: Við gætum bætt flokk.
Og við gætum gert class = "BTN BTN-primary".
NEEL MEHTA: Já.
Það er fullt af öðrum litir í boði fyrir buttons--
eða fyrir neitt, fyrir þessi efni.
Við getum gert BTN-hættu og gera það rautt.
Það sem við förum.
Við getum gert btn-árangur að gera það grænt.
Við getum gert BTN-info-- það er fullt af hlutum sem eru í boði fyrir þig.
Svo ég hef litla áskorun fyrir þig núna.
Þannig að það er einn hlutur sem ég hef vinstri un-stíll.
Þessi toppur veitingastöðum.
>> Og við viljum að nota neitt kallað lista hóp að stíla hana.
Svo er áskorun mín til þín fara á getbootstrap.com--
Ég draga það upp hér.
getboostrap.com.
Fara á getbootstrap.com, finna kafla þar sem þeir fara yfir listann hópa.
Og þú munt sjá hér að dæmi og rétt flokkum
sem þú getur notað til að gera þinn listar í þessum fallegu hópalistann.
Þetta eru í uppnámi út dæmi dæmi kóða, það
númer sem þú notar, hvaða HTML kóða þú notar, og hvað það framleiðsla.
>> Svo áskorun mín til you-- fara á getbootstrap.com,
hvort sem þú ert hér eða heima, og til að reyna að bæta stíl við þessa ul
til að gera það líta ágætur.
Og nota lista hóp stíl.
Þú vilt taka nokkrar mínútur, og leita skjöl,
reyna þetta ykkur?
Því eins og þú ert að gera vefur þróun, þú munt átta sig mikið af vinnu þinni
er að fara að vera að lesa þessi gögn.
Þannig að ég held að það er gott að fá kunnuglegt með að lesa skjöl,
hvernig á að reikna út hvað er þar, hvað númerið dæmi sem þú getur notað,
hvað þú getur skiptimynt.
>> Svo aftur, getbootstrap.com, fara að hlutunum flipanum,
og þá fletta niður til lista Group.
Og þú munt sjá dæmi um kóða sem þú getur notað til að gera HTML þitt passa það.
Svo taka a par af mínúta og reyna og kanna það sjálfur,
hvort sem þú ert hér eða heima.
Ef þú ert heima, gera hlé á vídeó, kannski, og reyna það út sjálfur.
Ef þú ert hér, ef þú ferð til okkar website-- ef þú endurnýja síðuna
þú munt sjá þetta á það.
Þetta mjög sama númer er bara bæta við nýjum stíl þarna.
Svo taka nokkrar mínútur.
Láttu mig vita þegar þú ert líður vel um það eða þegar þú ert algerlega glataður.
Hljóð góður?
Cool.
Quick hliðar fyrir þá heima, á meðan við erum að bíða,
ef þú ferð á til GitHub síðuna að ég setti upp nokkra skyggnur síðan,
Framan af the vídeó, Ég er með GitHub endurhverfum, geymsla,
fyrir þetta tal.
Öll þessi kóða dæmi sem við munum vera að tala um eru geymd hér.
Þannig að ef þú ferð að skora-1.html þetta er allur kóðinn sem við höfum núna
á CodePen okkar.
Svo þú getur bara farið á undan, og afrita þetta og límdu hana í eigin CodePen þínu.
Og þannig er hægt að halda upp við það sem við erum að gera hér.
Svo hafa þessu síðu opið eins vel og við fara í gegnum the hvíla af námskeiðinu.
Aftur, þú vilt það til að líta út eins og það sem þú séð niður neðst á skjánum
þar.
Líður vel?
Solid.
Við skulum bíða eftir allir aðrir til ljúka upp með það sem þeir eru að gera.
>> Já?
>> Áhorfendur: Segjum sem svo að ég vildi að nota ræsi á home--
NEEL MEHTA: Já.
Áhorfendur: Ég sé, á heimasíðu, Hafist handa síðu.
Þeir gefa mér valkosti Ræsi, Source Code, eða Sass.
Hver af þessum vil ég?
>> NEEL MEHTA: Já.
Svo spurningin er, hvernig gera þú fá byrjaði að nota Ræsi með okkur?
Það gerist bara að dularfullur vinna hérna.
Svo ef við höfum tíma í í lok námskeiðsins,
Ég skal sýna þér hvernig þú getur fá það á eigin vefsíðu þinni.
Eins og hér, hef ég reyndar setja í nokkrar stillingar sem
verður það sjálfkrafa hlaðinn, en ég ætla að
sýna þér að gera það frá klóra á vefsíðurnar þínar.
>> Áhorfendur: Þakka þér.
>> NEEL MEHTA: Já.
Góð spurning.
Líður vel?
Líður vel?
Cool.
Svo sem vill segja mér hvernig þeir gerðu Þessi hlutur lítur ágætur og Boostrappy?
Hvað er það fyrsta flokks við að bæta við ul?
Áhorfendur: class = "lista-hópnum".
NEEL MEHTA: Já. lista-hópur.
Og þá hvað við leggjum til Lis?
Einhver annar?
Áhorfendur: Og síðan, eftir að class = "lista-group-lið".
>> NEEL MEHTA: Já.
>> Áhorfendur: Og það er sama fyrir næsta einn.
>> NEEL MEHTA: lí class = "lista-group-lið".
Þar sem þú ferð.
Við höfum ágætur listi hópinn okkar, bara eins og við höfðum gert ráð fyrir.
Svo þar sem þú ferð.
Í 10 mínútur, við höfum gert þetta leiðinlegt, gamla Yalp! síðu
líta ágætur og faglega.
Og það er bara byrjunin.
Svo nú er að þér finnst gott um það, við skulum
bara fara á undan og tala um a par fleiri þættir sem
gæti komið sér vel eins og þú fara í gegnum ævintýri þínu.
>> Auðvitað, það er mikið sjálfur hér.
Og nú þegar þú hefur lært hvernig á að gera lista hópa,
þú getur nokkurn veginn að kenna sjálfur hvernig á að gera eitthvað af þessu.
En, auðvitað, við skulum reyna bara og gera a par fleiri sjálf,
bara þannig að þú færð tilfinningu fyrir hvernig þú getur notað þá.
Ég ætla bara að fara að fara Í þessu dæmi hér.
Aftur, kóðinn sem ég límt bara hér er í boði hérna.
Svo ekki hika við að rífa það upp.
>> Þannig að við höfum þegar farið í gegnum a par af þessum dæmum.
Þannig að við höfum hnappa, sem við höfum þegar séð hvernig á að gera.
Við getum gert hnappa stærri.
By hnappinn class-- það fer, BTN BTN-LG og BTN default gerir það hvítt.
Svo gerir þessi takki okkar stærri en það gæti annars verið.
Það gæti komið sér vel, ef þú hefur stór senda hnappinn eða eitthvað.
Við sáum lista hóp dæmi, við sáum mynd dæmi.
>> Einn mjög mikilvægt er tákn.
Og tákn eru leið fyrir þig til að bæta við áhugavert, eins innritun innritun
merki, eða plús, eða vinur tákn, eða endurræsa tákn,
eða hvað sem er til vefur app.
Svo aftur, ef við í hér, þáttunum, glyphicons,
eru tákn boði fyrir ræsi.
Það er um tæmandi listi yfir allar þær hér.
Svo bara sem dæmi, skulum reyna að bæta einn.
>> Svo eins og Facebook, erum við að reyna að hafa Add Friend hnappinn.
Skulum fyrst bæta nokkrum stíl.
hnappinn class = "BTN BTN-velgengni".
Og það sem við förum.
Við skulum bæta við tákn hér.
Hvað icon, finnst þér, gæti skynsamleg að setja hér?
Þú hefur sennilega séð á Sumar vefsíður eða hvað,
en það er dæmi um tákn sem gæti farið vel inni þennan hnapp?
Feel frjáls til að skoða þessa skoðun, ef þú þarft einhver innblástur.
There 'a einhver fjöldi af gagnlegur sjálfur í boði hér.
Já?
>> Áhorfendur: Kannski glyphicon notandi einn?
NEEL MEHTA: OK.
Þetta einn.
Það er nokkuð gott.
Já.
Á Facebook, ég held það myndi líta dálítið eins og þessi.
Svo hér er hvernig við förum um bæta táknum á síðum okkar.
Við höfum bara span-- a span er hlutlaus ílát fyrir eitthvað.
A div er gámur fyrir eitthvað, a span er annar gámur.
Divs hafa línuskiptingum í kringum þá, gera spannar ekki.
Svo er mismunandi leiðir það hafa almenna gáma.
Eins og það er ekki skynsamleg að setja það inni í lið eða neitt.
Við verðum að setja það inni einhverju þó,
þannig að við settum bara inni í haf.
Svo span class = glyphicon glyphicon-notandi "nálægt span.
Og við höfum nú táknið inni hnappinn.
>> Svo það lítur ekki alveg ólíkt hvað þú gætir séð á facebook.com.
Og svo er það gott að þær geta reyndar að setja hvar sem þú vilt.
Í haus börum þínum, í listanum þínum hópum.
Whatever.
Það þarf ekki að vera inni á hnapp.
Svo sem dæmi, ég get setja sama bekknum hér.
"glyphicon glyphicon-notandi".
Og það virðist bara það sama.
Svo þetta icons-- þú getur notað span class = "glyphicon glyphicon-hvað".
Og það mun leyfa þér að bæta Tákn þar sem þú vilt.
Og tákn eru mjög mikilvæg hluti af því að gera vefsíðu líta
faglega og vel gert.
Svo ekki ofleika það ekki, en það er oft gott að vita.
>> Spjöldum, aftur.
Ég ætla bara að gera þetta aftur sem ágrip vegna þess að þeir eru eins konar þátt.
Þú munt taka eftir því að í beygja eðlilega HTML
síða í a Ræsi-afied staður, munt þú hafa
að bæta við auka uppbyggingu á vefsvæðið.
Til dæmis höfum við auka Divs hér bara vegna þess að þeir
þarf að gera spjaldið.
Svo bara hafa það í huga að þú þarft að hafa auka uppbyggingu.
Svo "spjaldið spjaldið default".
Kannski er það spjaldið-header.
Ég held að það sé pallborð-fyrirsögn.
Já.
Það sem við förum.
Svo aftur, það er spjaldið okkar.
>> Einn fleiri hlutur sem við ekki ná enn, borðum.
Töflur, sjálfgefið líta konar ljót.
Svona.
En töflur eru, að sjálfsögðu, mjög mikilvægur hluti
um hvað þú getur gert í þróun á vefnum.
Í Pset7, til dæmis, CS50 Fjármál, sem mun koma út fljótlega,
þú munt nota mikið af borðum.
Og mikið af vefur dev nota mikið af borðum til að birta upplýsingar,
eins hlutabréf, eða skora, eða hvað sem er.
>> Svo er reyndar mjög auðvelt stíl borðum.
Þú bætir borðið bekknum að töflunni.
Og þora segi ég, það lítur mjög gott.
Þú getur gert auka hluti, eins og "borð borð-röndóttur".
Og þú munt sjá niðurstöður hér.
Þú getur gert borð-landamæri.
There 'a einhver fjöldi af valkostur sem þú getur.
En í grundvallaratriðum, að bæta a borð, borðið bekknum,
mun gera töflur þínar líta nokkuð gott.
Svo það er stutt samdráttur sumir af the fleiri mikilvægur stíl
og hluti sem þú munt þarf að nota fyrir ræsi.
Þannig að ég held að hula upp fallega hluti okkar.
Einhverjar spurningar núna um hvernig til að gera vefsíður þínar falleg?
Hvernig er hægt að nota þetta þættir til þinn kostur?
Líður vel?
Já?
Áhorfendur: Kannski er kjánalegt spurning,
en þú getur notað ræsi á Wikipediu?
Ef þú ert að breyta Wikipedia síðunni?
NEEL MEHTA: Já.
Svo spurningin var, ég er breyta Wikipedia síðunni,
get ég ræsi stíl þarna?
>> Áhorfendur: Já.
>> NEEL MEHTA: Og svo er Ræsi grundvallaratriðum a stór CSS stíll lak.
A CSS stíll lak segir bara, þegar Ég hef þennan flokk, hengja þessar stíl.
Svo CSS stíll lak fyrir ræsi er að fara að vera eitthvað eins og .btn,
á hnappinn bekknum, mun fá eins og rúnnuð horn landamæri eða hvað sem er.
Svo í rauninni, ræsi það bara fullt af flokkum og fullt af stílum
tilgreint fyrir þá flokka.
Svo lengi sem þú ert að CSS, þessi listi af reglum í síðuna þína,
þú vilja fá ræsi stíl.
Það er, að sjálfsögðu, háð því hafa ræsi stíl í þinni
til að byrja með.
>> Og svo í Wikipediu, þú gætir sennilega ekki
gera það því Wikipediu er ekki með ræsi í það.
En ef það gerði með ræsi, þú gætir sennilega gert það.
Og ef þú vildir, þú gætir eru það, en það gæti
brjóta núverandi skipulag á síðunni.
En mjög góð spurning.
Þú getur notað ræsi hvar sem það er innifalinn,
en það er ekki innbyggður í sjálfgefið.
>> Áhorfendur: Þakka þér.
>> NEEL MEHTA: Já.
Einhverjar fleiri spurningar?
Já.
Svo hvort sem þú ert hér eða heima, bara muna getboostrap.com-- aftur,
getboostrap.com-- er vinur þinn.
Alltaf þegar þú ert að nota Ræsi, þetta mun gefa þér
leiðbeiningar um hvernig á að fá byrjaði, hvernig á að nota hluti.
There 'sumir kaldur JavaScript stinga-ins að við munum ekki fara yfir hér,
en þeir eru þess virði að skoða eins og heilbrigður.
Svo er þetta vinur þinn.
Það er bara mikilvægt að fá er notað til að hvernig á að nota þetta.
>> Svo skulum spjalla svolítið um gera móttækilegur vefsíður.
Svo eins og ég sagði áður, fólk notað fartölvur þeirra, þeir nota þeirra sími.
Og eins og þú gætir vel ímynda sér, þetta er mjög mismunandi skjástærð en það.
Og svo sama website sem lítur vel út á símann minn
er ekki að fara að líta vel út, endilega, á tölvu.
Það sem þú þarft að gera er að gera vefsíðu þína aðlagast.
Það þarf að laga sig að ýmsum skjár stærð sem það er á.
>> Það hefur að segja, ég veit að ég er á a tölva, stór fartölvu, ætti ég að auka.
Ég veit að ég er á símanum, ætti ég skreppa.
Og svo Ræsi afla sumir Mjög, mjög gagnlegur tól til að gera þetta.
Svo Ræsi skulum þér pásu a website í 12 dálka.
Þú getur gert raðir og hafa 12 dálka.
Og þú getur skipting þá hvernig sem þú vilt.
Hægt er að hafa einn, stór hlutur, sem er 12 dálkar á breidd.
Hægt er að hafa tvennt sem eru sex hvor.
Þú getur gert eitt sem er fjórir, einn sem er tvær, eða einn sem er sex.
Þú getur gert þrjár, þrjú, þrjú, þrjú.
Þú getur gert hvað sem sundurliðun sem þú vilt.
>> Svo kannski vefsíðu þarf að hafa vinstri dálkur sem er þriðjungur breidd.
Svo það væri fjórir dálkar breiður og restin af síðunni
væri átta dálkum breiður.
Svo er þetta dæmi.
Við skulum draga upp annað dæmi.
>> Áhorfendur: Er það alltaf verða að vera jafnvel skipt?
Gæti það verið sjö, fimm hættu?
>> NEEL MEHTA: Já.
Það gæti verið sjö, fimm.
Já.
Svo lengi sem það bætir 12, það er allt í lagi.
Svo við skulum fara aftur hér.
Aftur, kóðinn sem er hér er einnig að finna hér,
undir móttækilegur dæmis.
Svo ég dró bara upp smá dæmi móttækilegur kóða hér.
Svo þú gerir þetta með því að nota a hlutur sem kallast röð.
Row er bara annar flokkur.
Það er annar stíll að bæta inná Divs að gera þá eigin hluti þeirra.
>> Svo segir þú, div class = "röð" að gera röð,
að gefa þér 12 dálka plássi.
Og þá setja dálka inni af því.
Svo hér við COL-XS-6.
Ekki hafa áhyggjur óður í the xs.
Við munum tala um í sek.
En í grundvallaratriðum, við höfum einn Það sem er sex breiður.
Við köllum það fór.
Og svo er að vinstri kassi hér.
Við höfum eitt sem er sex af 12 dálka breiður.
Og að einn er á hægri.
>> vel bara gefur gerðum div þinn fylla það upp grár.
Svo er það bara svo við getum sjá að þeir eru öðruvísi.
Og svo þetta fyrsta dæmið.
Það er mjög einfalt dæmi um hvernig þú myndi nota raðir þína og dálka hér.
Þú skilgreinir röð með class = "röð".
Og þá gera class = "Col-XS-6" gera helmingur, "Col-XS-6" að gera hinn helminginn.
Hér er flóknara dæmi.
Við skulum líta á Tiny, Björt, The hvíla einn.
>> Við getum gert Tiny tveir dálkar á breidd, við getum gert Björt sex dálka breiður,
Og restin fjórir dálkar á breidd.
Sem bætir upp til 12.
Og svo þetta endar spannar breidd á síðunni.
Aftur höfum við röð fyrir utan.
Þá höfum við div class = "col-XS-2" og þá 6, og síðan 4.
Og það mun veita uppbygging fyrir okkur.
Og svo við getum sett hvað sem Heck við viljum inni hér.
Í stað þess að Tiny, við getum sett á hnapp.
hnappinn class = "BTN BTN-primary".
Og svo eftir því að hnappur okkar ekki taka upp alla breidd,
en að minnsta kosti það er takmarkaður að því mikið pláss.
>> Svo er það allt vel og gott.
Svo við getum nú brjóta upp vefinn okkar síðu í bita, breidd vitur.
Við getum sagt að við viljum hafa vinstri dálki, og hægri dálki, og svo framvegis.
En við höfum ekki farið yfir hvernig þú gerir það móttækilegur.
Og svo Ræsi skulum gera það eins vel.
Það hefur þetta kallast Viðmiðunarmörk.
Þannig hefur það leið að vita hvort þú ert á fartölvu, þú ert á töflu,
þú ert á símanum lárétt, eða þú ert á símanum lóðrétt.
Það veit skjástærðina.
Og brýtur þetta í fjóra categories-- stór eða LG, sem er fartölvur, yfirleitt.
MD eða miðli, sem er töflur.
SM, lítill.
Eða XS, auka lítið.
Og svo þegar þú tilgreinir dálk, þú segir,
það ætti að vera sex dálka breiður á auka lítið tæki.
Það er þess vegna sem við gerðum Col-XS-6.
Við erum að segja að það ætti vera sex af 12 dálka breiður
á auka lítið tæki.
Og ef það er eitthvað stærri, við verðum bara sjálfgefið að nota auka smæðar.
Ef það er eitthvað stærri en Mjög smá, það verður sex breiður.
Og svo við getum nýta þeim til að dálka okkar
taka upp mismunandi magn af dálkum byggðar á skjástærð.
Við skulum fara á þessa móttækilegur resizing.
Þannig að við höfum dálka okkar.
Og það segir, "Col-LG-6 Col-XS-12".
Svo gefið það sem þú veist svo langt, hvað þér
held er að fara að gerast á stórum skjá?
Jæja, það er góður af gefið leið, en hvað
þú heldur að það mun líta eins og á stórum skjá?
Og hvers vegna er það?
>> Áhorfendur: Er það að á stórum skjá, það er
að fara að taka aðeins hluti af fullu plássi?
Eins helmingur þess, ég giska?
>> NEEL MEHTA: Já.
>> Áhorfendur: Og á minni skjár, það er að fara
að taka upp allan skjáinn er 12.
NEEL MEHTA: Já.
Hægri.
Svo sem dæmi, við skulum bara líta niður hér.
Já.
Svo á neitt er LG að eða bigger-- svo tölvan mín gerist
að LG því það er nokkuð wide-- það mun gera
það hlið við hlið vegna þess að það er Col-LG-6.
Svo vegna þess að það er á stór, gerir það það sex dálka breiður og sex dálka breiður.
Við skulum sjá hvað gerist ef ég gera þetta í minni einn.
Ég ætla bara að fara að un-fullur skjár þessum.
Og ég ætla að skreppa á skjánum.
Ég ætla að skreppa á skjánum, svo það lítur út eins og ég er á minni tækisins.
Þannig að ég ætla að minnka það svona.
>> Og voila.
Það er nú staflað því að nú höfum við farið
frá stórum to-- þetta er líklega auka lítill skjár stærð.
Og svo nú segir hún, OK, við erum ekki í stórum, við erum í gegn litlu landi.
Þannig að við erum að fara að nota auka lítil stærð.
Og við erum að fara að xs-12, xs-12.
Svo það er að fara að vera staflað.
Og bara taka eftir því að það er a hlutur sem kallast breakpoint.
Breakpoint er þar þú gert við umskipti
af auka lítið til lítil, litlum og stórum, og svo framvegis.
>> Svo bara eftir það sem ég renndu út, að lokum, þú munt fá til the benda
þar sem þeir hoppa vera hlið við hlið.
Þar sem þú ferð.
Svo er það breakpoint þarna.
Þannig að við getum gert það enn flóknara.
Nú getum við sagt, þetta það ætti að vera fjórir á breidd.
Það er, þeir ættu taka upp um þriðjung
ræðu á mjög stórum tækjum.
Á miðlungs tæki, ætti það að taka upp hálfa skjánum því það er md-6.
Á mjög litlu tæki, það ætti að taka upp 12.
Og svo lítur þetta nokkuð eðlilegt.
Við skulum reyna bara þetta út fyrir okkur sjálf.
>> Svo á stórum skjá, þá eru þeir fjórir á breidd.
Skreppa það svolítið.
Og þeir eru nú sex á breidd.
Svo er þetta sex, sex, sex.
Minnka það enn meira og þá þeir vilja vera algerlega staflað.
Svo þetta, til dæmis, er vit ef þú ert með kort, eins og fréttir spil,
til dæmis, þar sem ef það er á mjög stórum skjá,
það er allt í lagi ef þú ert með nokkur hlið við hlið vegna þess að þeir myndu allir fá nóg pláss.
En þeir þurfa að hafa nóg pláss.
Svo á smærri skjár, þú vilt vilt gefa þeim
meira pláss, hlutfallslega, af síðunni.
>> Svo sem alvöru heiminum td, skulum segja að við höfum Twitter.
Og við höfum textareitinn, svo þú getur kvak á hlið.
Og við höfum lista yfir stefna efni á hægri hlið.
Svo á stórum skjá, við ættum hafa þá verið hlið við hlið,
svo þú getur séð þá á gler.
En á smærri skjár, við ættum að gera 12 og 12,
þannig að stefna efni eru undir kvak svæði.
Vegna þess að kvak svæði er Aðalmálið og á litlum skjá,
að stefna efni ekki Sama alveg eins mikið.
Og svo við setja þá rétt fyrir neðan, svo að þeir geta bæði fengið nóg pláss.
Skynsamleg svo langt?
>> Áhorfendur: Já.
>> NEEL MEHTA: Solid.
Svo það er allt dæmi sem ég hef hér.
Við skulum reyna að gera verkefni.
Svo aftur, þetta er áskorun-2.html fyrir þau ykkar fylgja eftir heima.
Svo félagi minn, Mark Zuckerberg, kom til mín um daginn.
Og hann er eins, Neel, ég hef fengið nokkuð góður á hönnun á vefnum.
Ég get gert HTML.
Ég hef gert þetta litla, Ný breyta til Facebook.
Ég er með nýja hugmynd um hvernig við ættum að stíll Facebook.
Og hér er það.
Hérna.
Hér er nokkur dæmi númer.
Svo það er kallað Fancybook.
>> Við höfum nokkrar stöðuuppfærslur.
Við höfum Nemo, Mike Kosowski, ***-- þrír stöðuuppfærslur.
Og þá höfum við lista yfir online vinir rétt fyrir neðan.
Svo hann hefur gert heimavinnuna sína.
Hann veit svolítið um Ræsi, hann gerði listaskjáinn
hann hefur gert smá HTML.
Svo hefur hann á vefsíðu.
En hann er eins og, Neel, ég ekki skilja móttækilegur hönnun yfirleitt.
Ert þú hefur einhverjar sérfræðingar sem gæti hjálpað mér með það?
Og sem betur fer, þú ert nú sérfræðingar í móttækilegur hönnun.
>> Svo það sem hann sagði mér var að hann vill Fancybook að líta svona út.
Á mjög litlu tæki, eins og a sími, allt
skal staflað, eins og hér.
Svo þú hefur tímalínu upfront, upp efst, og þá
þú ættir að hafa spjall sláin neðst.
En á töflu eða æti tæki, ætti það að vera helmingur og helmingur,
eins og í tímalínu ætti að vera helmingur og listi yfir þá spjallhópa vinum
ætti að vera á hinn helminginn.
>> Þá á fartölvu, tímalína ætti að taka upp þrjú fjórðu
og þá spjall verja ætti taka upp annað fjórðung.
Og svo er hann eins, Neel, ég hef þetta númer hér, en það er ekki móttækilegur.
Það þarf að haga sér svona.
Svo áskorun mín til þín er gefið þennan kóða here--
ef þú uppfærir þinn CodePens, munt þú sjá þetta.
Eða ef þú límir bara í númerið á áskorun-2, munt þú sjá þetta.
>> Hér er þetta dæmi númer.
Þú munt sjá nokkrar xxxs.
Ég vil að þú að breyta xxxs, þannig að eilífur og lista af vinum
fylgir þessum sérstakur hér.
Ekki hafa áhyggjur óður í það er inni í tímalínu fyrir nú.
Við munum fá að í næsta skrefi.
En nú, við skulum sjá hvort við fáum þetta að kljúfa það upp svona.
Svo er að gera vit?
Svo ef þú ert heima, gera hlé á vídeó og reyna
að gera vefsíðu þína líta móttækilegur svona.
Ef þú ert hér, taka eins og tvær, þrjár mínútur.
Feel frjáls til að spjalla við nágranna, og reyna, og festa Mr. Zuckerberg er
móttækilegur hönnun vandamál.
Ef þú hefur einhverjar spurningar, ekki hika við að láta mig vita.
Líður vel?
Gert?
Nice.
>> Áhorfendur: [inaudible].
NEEL MEHTA: Hvað?
>> Áhorfendur: Ég er góð.
>> NEEL MEHTA: Oh, gott.
Nice.
Áhorfendur: The hlutur óður 12, er það að Ræsi
skemmtun á tilteknu skjár rúm og 12 einingar yfir og skiptir það upp?
Hvernig nákvæmlega virkar proportioning vinna fyrir þessu?
>> NEEL MEHTA: Já.
Svo spurningin er, hvernig gerir proportioning
vinna fyrir ræsi, ekki satt?
>> Áhorfendur: Já.
NEEL MEHTA: Svo þegar þú ert með div class = "róður",
sama hversu stór skjár er, Ræsi mun gefa þér 12 einingar
af sömu stærð til taka upp það mikið stærð.
Svo í col 1, það er alltaf 8,33% af stærð skjásins,
hvort sem er þetta breitt eða það er þetta breitt.
Og svo, auðvitað, á minni skjár, hver dálkur er minni.
Þú ert enn 12 dálka á breidd, það er a lítill.
Svo það er komið að þér að ganga úr skugga um að hlutirnir taka meira dálk,
hlutfallslega, til að bæta fyrir að skortur á rými.
Er að skynsamleg?
>> Áhorfendur: Já.
Þakka þér fyrir.
NEEL MEHTA: Góð spurning.
Áhorfendur: Á stór skjár, getur þú hefur
eilífur taka upp þrjú fjórðu?
>> NEEL MEHTA: Já.
NEEL MEHTA: Hvernig krakkar líður?
Gott?
Cool.
Svo skulum koma aftur.
Og við skulum reyna að laga þessa hluti á heimasíðu Mr Zuckerberg.
Svo tímalína er upp hér á efst, og the listi af vinum
er neðst.
Og svo þurfum við bara að tengja dálkar, með límvatn hlutfalli,
í hvert þeirra.
Þannig að þetta fyrsta *** er tímalínunni.
Hvað flokkar gera við að setja hérna?
Hvað gerðir þú krakkar setja hér inn?
Svo man, á stórum skjá, það þarf til að taka upp þrjá fjórðu af breidd.
Og svo hvað stíl myndi gefa þér það?
Á stórum skjá, þremur fjórðu af breidd.
Hvaða tegund notum það?
Áhorfendur: Þannig að við erum bara að fara að vera breyta sem fyrst dæmi af bekknum.
NEEL MEHTA: Fyrir nú.
Já.
>> Áhorfendur: Við erum ekki að breyta hvor, einstaklingur lögun af tímalínu?
NEEL MEHTA: Ekki núna, að minnsta kosti.
Svo er þetta allt hlutur blokk.
Við erum bara að breytast í hanna í blokk.
Svo hér við COL-LG-9 því það er níu af 12 breitt á stórum skjá.
Og þá á miðlungs skjár, hversu margir dálkar ætti ég að fá?
Áhorfendur: Það er ætlast að vera helmingur og helmingur.
NEEL MEHTA: Hægri.
Svo hversu margir er það?
>> Áhorfendur: Svo sex.
NEEL MEHTA: Six.
Og þá sérstaklega lítið ætti be-- ef það tekur upp alla breidd röð,
hversu margir ættu það að vera?
Áhorfendur: 12.
NEEL MEHTA: 12.
Já.
Og nú höfum við fengið að breyta þessu hinar,
þannig að það tekur upp restina af plássi.
Svo Col-lg--
Áhorfendur: Það er að fara að taka upp allan skjáinn?
NEEL MEHTA: Það tekur fjórðung á skjánum í stórum tæki,
eins og við sýndum hér.
>> Áhorfendur: Three.
>> NEEL MEHTA: Three.
Og þá Col-MD-6 til að taka upp the hvíla af the rúm.
Col-XS-12.
Svo nú höfum við tímalínu taka upp þrjá fjórðu
á síðunni í tjaldinu og þá einn fjórði á hlið.
Og þá ef stærð skjárinn niður, það ætti að búa til samræmis.
Svo það er staflað nú, á mjög litlum skjá.
Og ef við stærð það upp a lítill hluti, þeir ættu að vera nákvæmlega helmingur og helmingur.
Þannig að við höfum gert það hingað til.
Mjög flott.
Og svo við munum ekki gera annar hluti af áskorun.
Þú getur gert það sjálfur.
En í grundvallaratriðum, þú þarft að reyna að gera þetta móttækilegur
eins well-- gera tímalínu atriði, sjálfir, móttækilegur.
Svo nú höfum við gengið í gegnum allt sem þú þarft að vita
um móttækilegur hlið ræsi.
Einhverjar spurningar um móttækilegur hönnun með ræsi
og hvernig þú gætir farið um að gera það?
Já?
>> Áhorfendur: Er það svipað ef við höfðum embed in vídeó
og við vildum að stjórna mælikvarði þar sem video was--
stærð af the vídeó fara úr fartölvu í símann.
NEEL MEHTA: Já.
Meira eða minna.
Þú vilt verða að segja vídeó til taka upp eins mikið pláss eins og það er gefið,
sem er svolítið pirrandi stundum.
En kjarninn hugmyndin er sú sama.
A vídeó, eins og allir aðrir hlutar í síðu, td hnapp eða hvað,
svo lengi sem þú notar dálkum og raðir,
þú getur gefið það upp tiltekið magn af plássi.
Og svo að fá það til að heiðra sem er öðruvísi spurning því eins og YouTube
embed in hafa ákveðið, valinn stærð.
En fræðilega á kosti, það myndi vinna.
Cool?
>> Áhorfendur: Ég geri ráð fyrir þá, fyrir mynd, gera þú raunverulega
þarf að hafa mismunandi útgáfur af sama myndin í mismunandi stærðum
fyrir fartölvuna móti iPhone?
Já Spurningin er, þurfum við að hafa myndir sem eru móttækilegur eins og heilbrigður.
Og reyndar, þú getur gert það.
Ég held að það er í CSS.
En Ræsi gerir þú þarft að gera það eins vel.
Hægt er að hafa móttækilegur myndir.
Hægt er að hafa myndirnar búa í samræmi við stærð af the blaðsíða.
Og það er mjög nýr hlutur HTML5, nýjasta útgáfa af HTML,
og CSS3, nýjustu útgáfa af CSS, sem
mun láta þig biðja mismunandi myndir miðað við skjástærð þú ert á.
Venjulega er það, nógu gott að bara hafa myndin bara skreppa eða vaxa að
þó stór hún þarf að vera.
En þú getur, ef þú vilt að hafa einn 32 af 32
fyrir mjög litlum skjám og 64 um 64 fyrir stóra skjánum,
og þá þjóna þeim vali.
Þú getur gert það.
Það er gert með því að sumt fólk.
Það er samt ansi fremstu röð.
En stutt svar, móttækilegur images-- Ræsi getur bjargað deginum þar.
Cool?
>> Áhorfendur: Þakka þér.
>> NEEL MEHTA: Svo skulum tala alvöru hratt um hvernig
að fá þetta í eigin vefsíðu þinni.
Segjum að þú vilt gera þinn eigin vefsvæði með ræsi.
Og svo við skulum bara rétt ganga í gegnum það saman.
Segjum að þú gerir bara eðlilegt HTML síðu.
Feel frjáls til að fylgja eftir í hvað uppáhalds ritstjóri er.
Þannig að við höfum bara smá HTML síðu.
Við getum gert! DOCTYPE HTML.
Þetta er einnig HTML, síðu okkar.
Ekkert nýtt.
Við höfum gert þetta áður.
Svo hér höfum við HTML okkar og getum við sett efni inn hér.
Við getum haft hnappinn okkar.
Og eins og ég sagði áður, þetta er ekki endilega að fara að vinna.
Af hverju gæti þetta ekki að vinna?
Hvers vegna munum við ekki fá okkar gott, litrík hnappur?
>> Áhorfendur: Þar sem við ekki tengja það til ræsi verkefni eða skrá?
NEEL MEHTA: Já.
Rétt.
Vegna Bootstrap-- það er bara fínt CSS skrá.
Það er röð af stíl sem eru fest þætti þínum.
Hér höfum við sagt það að við ætlar að nota þetta stíll.
Ég ætla stærð sem upp smá.
Við höfum sagt það að við viljum nota Þessi stíll, en við aldrei
sagði það hvað stíll er.
Og það er á þína spurning frá fyrr var.
Það er svarið við því.
Við þurfum að finna leið til að fá stíll og þá í síðuna okkar á einhvern hátt.
Og svo Ræsi vilji sýna okkur hvernig á að gera það.
>> Þannig að ef þú ferð til the toppur hér, Getting Started.
Það er mismunandi leiðir til að sækja það.
Þetta gæti ekki skynsamleg endilega.
Bootstrap-- þetta mun láta þú grípa CSS skrá sig.
Og þú með það í eigin síðuna þína.
Source Code er ef þú vilt til reiðhestur á það sjálfur.
Þú þarft ekki á þessu í raun.
Sass er tungumál sem safnar í CSS.
Hugsaðu um það sem Preprocessor.
Líkt PHP er Preprocessor af HTML, Sass er Preprocessor fyrir CSS.
Þannig að ef þú vilt gera það Þannig getur þú gert það.
>> Auðveldasta leiðin er að nota CDN, eða innihald sending net.
Það er vefsíða sem bara þjónar upp afrit af ræsi
mjög hratt fyrir þig að eru í eigin síðuna þína.
Svo hér er dæmi.
Það mun gefa þér þennan tengil þáttur.
Tengill þáttur segir vafrann þinn, taka hvað skrár eru geymd hér
og fela það í vefsíðu okkar.
Og í þessu tilfelli, það er ræsi CSS skrá.
Þannig að við verðum bara að afrita þessi slóð, eða þessi texti, og við munum kasta inni
á höfði okkar.
>> Og ég mun ekki byrja á síðu fyrir þetta, en þú getur treyst því að þetta virkar.
The hlekkur vilja fá þér CSS.
Fela það í þinn síðu og þá munt þú vera
geta notað allt ræsi flokkar sem þú þekkir.
Ef þú vilt halda það á staðnum og hafa það á eigin skráakerfinu
í stað þess að þurfa að fara til internetið til að grípa það,
eins og ef þú vilt að nota síðuna offline,
þú getur notað Sækja valkost.
En að mestu leyti, með því að nota CDN er ansi hratt vegna þannig,
það er haldið endurnýja fyrir þig eins og heilbrigður.
Þú þarft að höndunum uppfæra hana heldur.
Meikar sens?
>> Svo mikið af verkfærum mun hafa þetta byggt í sjálfgefið. Í Pset7 og Pset8,
Ég tel Ræsi er sjálfkrafa með.
Og í CodePen, fyrir dæmi, það er þegar
með því að ég bætt bæta þá stillingu.
Svo ef þú vilt alltaf að leika í kring með það, þú getur bara farið á CodePen,
eða fara á auðkenni, eða hvað sem er.
Og þú might vera fær til aðgangur Ræsi þar,
en það er ekki alltaf byggð í, við vanræksla, á vefnum.
Meikar sens?
>> Já.
bara eins og a recap-- við höfum eins fimm mínútur eftir.
En eins og ágrip, í nýjum vefsíðum, þú getur falið ræsi svona.
Og þegar þú hefur það með, þú getur gert allt stuð hér.
Þú getur farið á, og þú getur bara lesa CSS, getur þú bætt við nokkrum kaldur stíl,
þú getur haft hluti eins hnappa,
og borðum og listi atriði sem við nefnd.
Það er sumir kaldur JavaScript viðbætur sem þú might vilja til að kanna.
Þeir bæta við nokkrum kaldur gagnvirkni á vefsíðu.
Eins og þessi gerir formlegur umræðu.
>> Svo er það einhver skemmtilegur efni þú getur gert með ræsi.
Svo mitt ráð til þín er að fara á undan og nota það í eigin verkefnum,
fylgja leiðbeiningunum sem við bara gerði eins og hvernig á að fá það,
og bara lesa ræsi vegna þess þú munt læra meira um hvað ég á að gera.
Og svo við höfum farið yfir, í dag, hvernig á að nota
gögn, hvað bygging blokkir eru, og hvernig það er eðli.
Svo nú er áskorun mín til þín gera vefsíðu með ræsi.
Fara í docs.
Og nota þau tæki sem við höfum lært hingað til að reyna að flokka þær
og skilja þá.
Og nota þær stíll og verkfæri þú sérð það í vefsíðuna þína.
Og það er bara stór, tilrauna aðferð.
>> Prófa ákveðna stíl.
Virkar það?
Er ekki?
Prófaðu að setja efni saman.
Sjá hvað gerist.
Það er mjög mikið sjálf leiðsögn, uppgötvun aðferð.
En í dag, höfum við lært mjög grunnatriði um hvað er Ræsi?
Hvers vegna virkar það?
Hvernig virkar það?
Hvernig eigum við að byrja að nota það, í fyrsta sæti?
Og svo núna þegar þú ert yfir þessi hump, þú
ætti að vera fær um að gera það ansi vel sjálfur.
>> Svo enn og aftur, alla númer við gerðum er hér.
Svo ef þú vilt alltaf að fá bursta upp á,
eins og, hvað er a fljótur svindl lak fyrir alla stíll?
Þú getur farið inn í þetta sýni hér.
Við höfum nokkur dæmi stíll hér.
Ef þú vilt reyna að áskoranir aftur sjálfur,
þú getur prófað þá hér og kíkja á lausnir.
Svo þessi tengill mun vera með á glærum, sem
verður send út til þín auðvitað.
En það er líka hér.
Þú getur hvílt á vídeó, ef þú vilt.
Allar upplýsingar sem þú þarft er að fara að vera hérna, á þessum vef.
Svo ef einhver hefur einhverjar spurningar, við getum taka þá fyrir næstu mínútum.
Annars þakka ykkur öllum mjög mikið fyrir að horfa á.