Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Se konsa, alo nan tout moun ki ap gade isit la,
oswa l ap gade sou entènèt, oswa adistans.
Non mwen se Neel, sa a se CS50.
Apre sa, seminè jodi a se Repons Web Design ak demaraj.
Li se yon sijè sa a, se trè pre kè m '.
Èspere ke, li pral fèmen nan kè ou
osi byen nan fen seminè a jodi a.
Se konsa, demaraj.
Konbyen nan ou te fè nenpòt ki kalite devlopman entènèt ye anvan an?
Yon bon kantite lajan?
Yon ti jan ti kras.
>> Se konsa, demaraj se nan nan mond pi popilè, devan-fen fondasyon.
Li nan itilize by-- mwen te chwazi yon koup la websites-- o aza
Lyft, Newsweek, ak lamòd.
Li nan itilize pa yon kantite sit entènèt.
Li se yon fondasyon konsepsyon sit entènèt ki pral kite ou fè sou sit entènèt ou
tou de bèl ak reponn.
Apre sa, mwen pral ale sou sa yo de konsèp isit la.
Bèl.
Se konsa, ou gen sit entènèt nòmal sou mòn lan gòch, ki se te fè pa jis HTML.
Ou te aprann HTML nan klas ak nan seksyon an longè.
Demaraj se yon fason fè sit entènèt ou bèl.
Ou ka pran sa ki la sou nan kite bò nan ekran ou
epi y'a vire l 'nan sa ki la sou nan dwat bò nan ekran ou a ak anpil,
trè, trè ti kras kòd.
>> Ou jwenn bouton an ble bèl, ou jwenn anpenpan a, awondi bor sou ekran an,
ou jwenn lis gade nan, ou jwenn nan kat, ak sou sa ak anpil ti kòd.
Genyen aktyèlman pa gen okenn CSS ki ou gen yo ekri nan tèt ou.
Se konsa, demaraj pèmèt ou gen sa yo CSS pre-bati
konpozan ou ka mete andedan nan paj entènèt ou
fè li gade bèl san yo pa anpil travay sou pwòp ou yo.
Li nan reyèlman yon demaraj, yon pwen depa,
pou avantur devlopman entènèt ou an.
Se konsa, lè w ap jis t'ap jwe moute yon sit entènèt,
li nan yon trè bon kote yo jwenn te kòmanse.
Ou ka jwenn yon bon sit entènèt kap ak anpil, anpil ti travay.
Ak tout bon, nou ap ale fè sa tèt nou
nan kou a nan tankou senk minutes-- nan 10 minit.
Se konsa, li trè fasil a fè kèk sit gwo.
Se konsa, sa a, se yon pati a an premye.
>> Dezyèm lan part-- reponn.
Moun, sèjousi, pa fè sa jis aksè entènèt la sou laptops yo.
Aktyèlman, kòm nan 2014, plis moun aksè entènèt la nan aparèy mobil,
tankou telefòn, oswa tablèt, oswa sèvis, oswa sou sit pase sa.
Epi sou sit entènèt yo te tradisyonèlman te fèt ak laptops oswa Bureau
nan tèt li.
Se konsa, sou sit entènèt yo yo souvan pa trè byen adapte nan telefòn ou.
Si ou janm te vizite harvard.edu sou telefòn ou,
li nan kalite yon anmèdan eksperyans, dwa?
Sa a se paske li pa reponn.
Nou ap eseye fè sit ki reponn,
ki reponn a gwosè ekran moun nan.
>> Se konsa, si li nan yon telefòn, li nan pral ale nan telefòn.
Si li nan yon ti tablo, li la pral ale nan grenn.
Li ajiste nan matche ak nan ekran ki se ke yo te itilize.
Se konsa, demaraj tou bay kèk trè, sèvis piblik trè itil pou sa.
Epi nou ap ale nan diskite sou ki kòm byen.
Se konsa, ankò, gen de pati yo Bootstrap-- bèl e ki responsab.
Nou pral pale sou sa yo.
Premyèman, bèl.
Lè sa a, reponn.
>> Se konsa, tout kòd la ke nou ap pwal pale osijè today--
nou ap ale nan gen yon anpil nan egzanp, yon anpil nan defi, e konsa li on--
tout ap viv sou sit entènèt sa a isit la.
Glise Men sa nou te voye deyò.
Se konsa, si w ap isit la, ou ka santi gratis pa gen yo ekri ki desann.
Men, si w ap gade adistans, santi lib yo rale sa a moute sou òdinatè w lan
kòm byen.
Ou ap pwobableman bezwen li pandan kou a nan seminè sa a.
>> Se konsa, nou ap ale nan sèvi ak yon sit entènèt yo rele CodePen,
ki se yon kodaj tèt ansanm anviwònman, pandan seminè sa a.
Apre sa, mwen pral ak CodePen-- montre w isit la reyèl fast--
li pèmèt ou ekri HTML tèt ansanm.
Mwen kapab ekri li, mwen ka voye li nan ou nèg, ou nèg ka edit li.
Menm si w ap aleka, ou ka toujou jwenn aksè li ki fason.
Ou ka tape kòd HTML nan la tèt epi li pral otomatikman
dwe konvèti nan la paj entènèt nan fon.
Se konsa, li nan yon fason pou ou byen vit eseye soti Kòd
san yo pa gen fè nenpòt kalite bagay sou IDE ou, oswa sou sit wèb pwòp ou a,
oswa kèlkeswa sa.
>> Se konsa, ale pi devan epi rale moute sa a sit entènèt, si w ap aleka
oswa si ou se isit la, espesyalman si w ap aleka.
is.gd/cs50boostrap.
Pa gen bouchon, pa gen evidans, pa gen pa gen anyen.
Se konsa, moun nan nou ki yo se isit la, jis ban m 'yon gwo pous
moute lè ou te rale up ki paj entènèt.
Bon?
>> ODYANS: Wi.
>> NEEL Mehta: Se konsa, nou pral jwenn ak sa yo ki nan jis yon dezyèm fwa.
Se konsa, premye, nou ap ale pou li ale nan, ki jan ou fè sit ou bèl?
Nou pwal pou aprann kijan pou pran raz, fin vye granmoun HTML, tankou mwen te montre ou anvan,
epi y'a vire ki nan reyèlman bon konpozan,
tankou bèl Widgets |, bèl, ki gen koulè pal bouton, ak etikèt, ak tab,
ak tout, lè l sèvi avèk demaraj.
Se konsa, si nou te ka tout ale sou nan an CodePen ke ou jis rale moute.
Li ta dwe gade yon ti jan tankou sa a.
Li gade tankou sa a pou tout moun?
>> ODYANS: Wi.
>> NEEL Mehta: Si ou se aleka, li ta dwe gade tankou sa a tou.
Si ou pa, mwen pral montre w ki jan pli vit ou ka jwenn li gade tankou sa a
nan yon pati nan lavni nan videyo a.
Se konsa, isit la nou te ekri yon HTML trè debaz yo,
tankou kalite a ou te lè l sèvi avèk nan klas la.
Li trè de baz yo.
Pa gen header.
Epi nou gen kèk bagay.
Nou te fèt yon anpil, anpil debaz kòmanse moute
rele Yalp! ak kote ou ka jwenn restoran nan zòn nan,
epi jwenn revize, ak direksyon sou tout sa yo.
Li se yon konsèp trè bon.
Li nan pa janm te fè l 'anvan.
Li se yon non trè inik, tou.
>> Se konsa, sa nou ap ale nan eseye fè se ede mèt kay la
a Yalp! fè sit entènèt li gade reyèlman, reyèlman fre.
Se konsa, yo kòmanse avèk yo, mèt kay la nan Yalp! te fè yon ti kras rechèch
bwat, ak yon ti kras bouton, ak Lè sa a petèt yon ti kras
make zòn pou yon make restoran, ak Lè sa a
yon lis ki gen lòt restoran ki nan zòn nan.
Se konsa, nou ka jis ale nan kòd a HTML reyèl vit.
Ki jan konfòtab yo ou nèg ak HTML?
Nou te fè yon ti jan seksyon ak tou nan klas la.
Desan?
>> Se konsa, jis kòm yon rapèl, HTML se tout sou li te gen
Tags oswa eleman ki di nan òdinatè ki jan yo mete deyò paj wèb la.
Se konsa, sa a isit lan-- h1 kòmanse H1, Byenveni Yalp !, fen h1-- di òdinatè a,
trase yon gwo header li di, Byenveni nan Yalp!
andedan gen.
Nou gen fòm tou.
Nou ka entrain tankou sa a, entrain tèks, ki pral rann kòm bwat tèks
ou ekri a.
Ou gen bouton tou.
Ou jwenn yon bèl, bouton klikabl.
Li pa fè anyen dwat kounye a, men ou jwenn yon bouton.
Ou ka gen div, oswa klwazon, nan kraze moute paj ou a nan divès kalite gwoup.
>> Ou ka gen paragraf, ou gen bouton.
Si ou gen paragraf, lè sa a ou gen lis unordered, UL,
e li bay lis andedan nan sa, Li.
Se konsa, sa yo, se nan anpil debaz blòk bilding nan yon paj entènèt.
Ak tout bon, bèl anpil chak sit entènèt ou wè
ki pral yo dwe bati lè l sèvi avèk zouti sa yo menm.
Natirèlman, yo pa fè sa tout gade sa a move paske nou ap
ale nan epis l 'kanpe yon ti kras.
Se konsa an n sa a HTML raz fin vye granmoun ak kòmansman transfòme l 'nan sit la bèl
ke nou jis te wè de sa minit yon koup.
>> Se konsa, kite la kòmanse koupe trè senp.
Se konsa, nou gen bouton sa-a isit la.
Nan demaraj, menm jan nou te wè, nou kapab gen yon bèl, bèl, bouton ble.
Apre sa, ki nan fè pa pa fè CSS koutim.
Gen nan pa gen CSS koutim isit la.
Sa a fè lè yo ajoute klas nan eleman HTML ou yo.
Si ou te eseye klas, oswa hrefs, oswa lankr, oswa di ki = "tèks" pou entrain
Eleman HTML ka gen atribi sa yo.
Yo ka gen enfòmasyon siplemantè ke ou ta ka ba yo.
>> Se konsa, nan ka sa a, klas yo atribi a.
Se konsa, ou ta ekri, klas bouton = yon bagay andedan nan strings.
Epi sa ap di nan atribi òdinatè, sa a se pa genyen, bouton fin vye granmoun.
Li se yon bouton ki nan klas sa a nan bouton.
Se konsa, demaraj, si ou ba li yon style sèten sou eleman ou,
li pral trase li yon sèten fason.
Se konsa, mwen ekri "btn BTN-prensipal.
BTN ke yo te yon abrevyasyon pou bouton.
Ou pral avi kounye a ke bouton lèd mwen te tounen
nan yon bèl, bèl, bouton ble.
Li sanble trè bèl lè nou klike sou li.
>> Se konsa, sa k ap pase se nou gen a klas BTN ak klas la BTN-prensipal
sou eleman nou an.
Apre sa, demaraj pral ale nan ak di, OK, mwen konnen ke gen de klas sa yo.
Nenpòt eleman ki gen sa yo de klas yo ta dwe trase tankou sa a.
Se konsa, sa a, se nwayo a nan ki jan ou tache Styles nan eleman nan demaraj.
Ou jis mete devan yo ak klas li pral pwa li soti kòm li wè anfòm.
Se konsa, isit la nan yon lòt egzanp.
Nan opinyon an, nou kapab ajoute yon klas = "fòm-kontwòl".
Apre sa, mwen pral montre pli vit kote ou ka jwenn konnen ki sa ki klas
yo disponib nan chak kalite eleman.
Men, klas la ke nou jis te ajoute gen bèl, kwen balanse,
li gen bèl padding, li gen yon bèl, ble lumière nan li.
>> Nou ka ale tou nan fòm sa a.
Ak klas = "fòm-aliye", ki pral fè fòm nou an, jan ou ta ka imajine, aliye.
Se konsa, li nan kap yon ti jan ti kras pi plis tankou sa nou te gen anvan deja.
Se konsa, anvan nou ale nan style tout rès paj la, nenpòt kesyon sou sa nou
te fè?
Nou klas jis tache nan eleman divès kalite nou an.
Apre sa, mwen pral montre w ki jan ou kapab pi ta konnen sa ki klas yo ki disponib.
Nou tache klas ki gen sèten estil.
Apre sa, ki di navigatè a Ki jan yo layout paj la lè l sèvi avèk
Bay Styles demaraj la.
Nenpòt kesyon soti nan odyans lan?
>> Bon byen lwen tèlman?
Fre.
Yon anpil nan defi yo ak demaraj se jis
konnen ki sa eleman yo disponib ak ki jan ou sèvi ak yo.
Epi sa se tout te aprann ki gen eksperyans epi tou
a lekti dokiman an, ki nou pral pale sou byento.
Se konsa, nou gen div sa a.
Se jis nan yon raz, bagay fin vye granmoun.
Nou vle mete aksan sou li yon jan kanmenm.
Se konsa, nan demaraj, gen yon anpil nan eleman ki disponib.
Lè sa a se getbootstrap.com.
Li se yon referans trè itil.
Li genyen ladan li bagay like-- isit la nan ki jan ou fè yon bouton.
Epi ou ka fè ba navigation, ou ka etikèt, ou ka pwogrè ba,
ou ka fè lis gwoup.
Fondamantalman, li nan tout kalite nan nou ta ka wè yon paj entènèt.
>> Isit la nan yon sèl ki nou pral eseye kounye a.
Yo rele li panèl.
Si ou janm itilize Google Koulye a, yo gen kat.
Oswa nenpòt ki aparèy android gen kat.
Yo gen ti kras bwat blan sa yo ki te bagay andedan nan li.
Se konsa, nou ap ale nan eseye ak fè ki tèt nou isit la lè l sèvi avèk yon bagay
rele yon panèl.
Se konsa, si nou mete klas = "panèl panèl-default "nan div deyò nou an,
lè sa a nou mete yon klas div = - kite a jis tcheke dokiman sa a.
klas div = "panèl-***" ak Lè sa a, div klas = "panno-kò".
Yon fwa ankò, pa enkyete sou memorize kòd sa a.
Li pral disponib sou entènèt.
>> Se konsa, nou te fè sa e kounye a, raz nou an, fin vye granmoun div tounen sa a bèl, ti kras kat.
Li te gen bèl padding, li gen sou fwontyè, li vle di soti
de rès la nan paj la, ki se trè fre.
Se konsa nou ale nan ak chanje sa a Jwenn direksyon bouton yo gade bèl.
Ki moun ki nan odyans lan vle di m 'sa mwen kapab fè nan bouton an
fè li gade bèl lè l sèvi avèk demaraj?
Wi?
>> ODYANS: Nou te kapab ajoute yon klas la.
Apre sa, nou ta ka fè klas = "btn BTN-prensipal".
NEEL Mehta: Wi.
Genyen yon pakèt moun sou lòt koulè ki disponib pou buttons--
oswa pou yon bagay, pou ki matyè.
Nou ka fè BTN-danje, epi fè li wouj.
Gen nou ale.
Nou ka fè BTN-siksè fè li vèt.
Nou ka fè BTN-info-- gen nan yon pakèt moun de bagay sa yo ki disponib ba ou.
Se konsa, mwen gen yon ti defi pou ou kounye a.
Se konsa, gen nan yon sèl bagay plis ke mwen te kite un-estile.
Sa a Top Restoran.
>> Apre sa, nou vle sèvi ak yon bagay rele yon gwoup lis a style li.
Se konsa, defi m 'devan ou se ale nan getbootstrap.com--
Mwen pral rale li moute isit la.
getboostrap.com.
Ale nan getbootstrap.com, jwenn nan seksyon kote yo ale sou lis gwoup.
Men, ou pral wè isit la yon egzanp ak klas yo dwa
ke ou ka itilize yo fè ou lis nan sa yo gwoup lis bèl.
Sa yo te travay soti egzanp nan egzanp kòd, ki sa
Kòd ou itilize, ki sa HTML kòd ou itilize, e ki sa ki sorties.
>> Se konsa, defi mwen nan you-- ale sou getbootstrap.com,
si wi ou non w ap isit la oswa nan kay la, ak eseye epi ajoute Styles UL sa a
fè li gade bèl.
Et, sèvi ak yon style lis gwoup.
Ou vle pran yon minit koup, ak rechèch dokiman an,
eseye sa a nou?
Paske menm jan ou ap fè devlopman entènèt, ou pral reyalize yon anpil nan travay ou
yo pral lekti dokiman sa a.
Se konsa, mwen panse ke li nan bon yo ka resevwa abitye ak ki jan li kopi dokiman yo,
Ki jan yo konnen ki sa ki nan ki kote, sa Kòd egzanp ou ka sèvi ak,
sa ou kapab ogmante.
>> Se konsa, ankò, getbootstrap.com, ale nan tab la Eleman,
ak Lè sa a woulo liv desann nan Lis Group.
Epi ou pral wè egzanp sou kòd ki ou ka itilize yo fè HTML ou anfòm sa.
Se konsa, pran yon koup la minit ak eseye ak eksplore li tèt ou,
si wi ou non w ap isit la oswa nan kay la.
Si ou se nan kay la, pran yon poz videyo a, petèt, epi eseye li soti tèt ou.
Si ou se isit la, si ou ale nan nou an website-- si ou rafrechi paj la,
ou pral wè sa a sou a.
Sa a Kòd trè menm se jis ajoute Styles nouvo la a.
Se konsa, pran yon kèk minit.
Kite m 'konnen ki lè w santi w bon sou li oswa lè w ap totalman pèdi.
Son bon?
Fre.
Quick sou kote pou moun nan nou nan kay la, pandan ke nou ap tann,
si ou ale nan sit la GitHub ke mwen mete glisad yon koup de sa,
nan direksyon pou nan konmansman an nan videyo a, Mwen gen yon repo GitHub, repozitwa,
pou pale sa a.
Tout egzanp sa yo ke nou pral Kòd gen ap pale de yo estoke isit la menm.
Se konsa, si ou ale nan defi-1.html, sa a se tout kòd la ke nou gen kounye a
sou CodePen nou an.
Se konsa, ou ka jis ale pi devan, ak fè kopi sa a, epi kole li nan pwòp CodePen ou yo.
Apre sa, fason sa a, ou ka kenbe moute ak sa n ap fè isit la.
Se konsa, gen paj sa a louvri osi byen ke nou ale nan rès la nan seminè a.
Yon fwa ankò, ou vle l 'yo gade tankou sa ou wè desann nan pati anba a nan ekran ou
la.
Santi bon?
Solid.
Se pou yo rete tann pou tout moun lòt moun fini moute ak sa yo ap fè.
>> Wi?
>> ODYANS: Sipoze ke mwen te vle yo sèvi ak demaraj nan home--
NEEL Mehta: Wi.
ODYANS: Mwen wè, sou sit wèb la, Pou kòmanse nan paj.
Yo ban m 'opsyon ki disponib nan Demaraj, Sous Postal, oswa toupe.
Kilès nan sa yo mwen vle?
>> NEEL Mehta: Wi.
Se konsa, kesyon an se, ki jan ou jwenn te kòmanse lè l sèvi avèk demaraj pa tèt nou?
Li jis k ap pase nan maji travay isit la menm.
Se konsa, si nou gen tan nan nan fen seminè a,
Mwen pral montre w kouman ou kapab jwenn li nan paj pwòp entènèt ou an.
Fè tankou isit la, mwen te aktyèlman mete nan kèk anviwònman ki
ap gen li otomatikman chaje, men mwen pral
montre ou fè l 'soti nan grate sou pwòp paj wèb ou yo.
>> ODYANS: Mèsi poutèt ou.
>> NEEL Mehta: Wi.
Bon kesyon.
Santi bon?
Santi bon?
Fre.
Se konsa, ki moun ki vle fè m 'konnen ki jan yo te fè bagay sa a gade bèl ak Boostrappy?
Ki sa ki nan klas la an premye nou ajoute nan UL la?
ODYANS: klas = "lis-gwoup".
NEEL Mehta: Wi. lis-gwoup.
Lè sa a, ki sa nou kole yo nan lis la?
Yon lòt moun?
ODYANS: Lè sa a,, apre yo fin ki, klas = "lis-gwoup-atik".
>> NEEL Mehta: Wi.
>> ODYANS: Lè li nan nan menm pou yon sèl kap vini an.
>> NEEL Mehta: Li klas = "lis-gwoup-atik".
Gen ou ale.
Nou gen gwoup bèl lis nou an, jis tankou nou te espere.
Se konsa, gen ou ale.
Nan 10 minit, nou te fè raz sa a, fin vye granmoun Yalp! paj
gade bèl ak pwofesyonèl.
Epi sa a, sèlman kòmansman an.
Se konsa, kounye ke ou santi ou bon sou sa, se pou yo
jis ale pi devan epi pale sou yon koup plis eleman ki
te ka rive nan sou la men jan ou ale nan tout avanti ou.
>> Natirèlman, gen nan yon anpil moun isit la.
Epi, koulye a ke ou te aprann ki jan fè lis gwoup,
ou ka bèl anpil anseye tèt ou ki jan fè nenpòt nan sa yo.
Men, nan kou, se pou yo jis eseye ak fè yon koup plis tèt nou,
jis pou ou jwenn yon santi yo pou ki jan ou ta ka sèvi ak yo.
Mwen jis ale nan ale nan egzanp sa a isit la.
Yon fwa ankò, kòd a ke mwen jis kopye nan isit la ki disponib isit la menm.
Se konsa, santi yo lib yo rale li leve.
>> Se konsa, nou te deja ale nan yon koup nan egzanp sa yo.
Se konsa, nou gen bouton, ki nou te deja wè ki jan fè.
Nou ka fè bouton pi gwo.
Pa bouton class-- li ale, btn BTN-lg ak BTN-default fè li blan.
Se konsa, sa a fè bouton nou an pi gwo pase sa li ta ka otreman dwe.
Li ta ka vini an sou la men, si ou gen gwo soumèt bouton oswa yon bagay.
Nou te wè egzanp lan lis gwoup, nou te wè fòm egzanp lan.
>> Youn yon sèl trè enpòtan an se ikon.
Ak ikon yo se yon fason pou ou pou w ajoute bagay sa yo enteresan, tankou chèk chèk
mak, oswa pluses, oswa yon zanmi ikon, oswa ikon rekòmanse,
oswa kèlkeswa sa nan app entènèt ou an.
Se konsa, ankò, si nou an isit la, konpozan, glyphicons yo,
se ikon yo disponib pou demaraj.
Genyen yon konplè lis tout sa yo isit la.
Se konsa, jis kòm yon egzanp, kite a eseye epi ajoute yon sèl.
>> Se konsa, tankou Facebook, nou ap ap eseye gen yon bouton Add Zanmi.
Se pou nou premye ajoute kèk style.
klas bouton = "btn BTN-siksè".
Apre sa, nou ale.
Se pou nou ajoute yon icon isit la.
Ki sa icon, ou panse, ta ka fè sans yo mete isit la?
Ou te pwobableman wè sou kèk paj wèb oswa kèlkeswa sa,
men sa ki nan yon egzanp sou yon icon ki ta ka mache byen andedan bouton sa-a?
Santi yo lib yo browse sa a wè, si ou bezwen nenpòt enspirasyon.
Genyen yon anpil nan itil yo menm ki disponib isit la.
Wi?
>> ODYANS: Petèt youn nan itilizatè glyphicon?
NEEL Mehta: OK.
Yon sèl sa a.
Sa a trè bon.
Wi.
Sou Facebook, Mwen panse ke li ta gade yon ti jan tankou sa.
Se konsa, isit la nan ki jan nou ale sou ajoute ikon nan paj nou an.
Nou jis gen yon span-- yon span se yon veso net pou yon bagay.
Yon div se yon veso ki pou yon bagay, yon span se yon lòt veso.
div gen repo liy bò kote yo, chvoch pa fè sa.
Se konsa, gen nan diferan fason pou gen resipyan jenerik.
Tankou li pa fè sans yo mete l ' andedan nan yon paragraf oswa nenpòt bagay.
Nou te gen yo mete l ' andedan yon bagay menm si,
se konsa nou jis mete andedan nan yon span.
Se konsa, span class = glyphicon glyphicon-itilizatè "fèmen span.
Epi nou gen la kounye a icon andedan bouton an.
>> Se konsa, li pa gade antyèman kontrèman sa ou ta ka wè sou facebook.com.
Se konsa, li nan bèl ke sa yo kapab aktyèlman ap mete nenpòt kote ou vle.
Nan ba header ou, nan gwoup lis ou a.
Kèlkeswa sa.
Li pa dwe fè andedan nan yon bouton.
Se konsa, kòm yon egzanp, mwen kapab mete klas la menm isit la.
"glyphicon glyphicon-itilizatè".
Apre sa, li parèt jis menm bagay la.
Se konsa, sa yo icons-- ou ka itilize span nan klas = "glyphicon glyphicon-tou sa".
Apre sa, ki pral kite ou ajoute ikon tout kote ou vle.
Ak ikon yo se yon trè enpòtan yon pati nan fè yon gade sit entènèt
pwofesyonèl ak byen fèt.
Se konsa, pa twòp li, men li la souvan yon bon bagay yo konnen.
>> Panno, ankò.
Mwen pral jis fè sa ankò kòm yon rapèl paske yo ap kalite enplike nan sa.
Ou pral avi ke nan vire HTML nòmal ou
sit nan yon demaraj-afied sit, ou pral gen
ajoute estrikti siplemantè nan sit entènèt la.
Pou egzanp, nou gen siplemantè div isit la jis paske moun
yo bezwen fè yon panèl.
Se konsa, jis kenbe ki nan tèt ou ke ou pral gen gen estrikti siplemantè.
Se konsa, "panèl panèl-default".
Petèt li nan panèl-header.
Mwen panse ke li nan panèl-***.
Wi.
Gen nou ale.
Se konsa, ankò, gen panèl nou an.
>> Yon lòt bagay ke nou pa t 'kouvri ankò, tab.
Tablo, pa gade default kalite lèd.
Tankou sa a.
Men, tab yo, nan kou, yon pati ki enpòtan
nan sa ki w ap fè nan devlopman entènèt.
Nan Pset7, pou egzanp, CS50 Finans, ki pral soti byento,
ou pral sèvi ak yon anpil nan tab.
Ak yon anpil nan dev entènèt sèvi ak yon anpil nan tab yo montre enfòmasyon,
tankou aksyon, oswa nòt, oswa kèlkeswa sa.
>> Se konsa, manier tab se aktyèlman trè fasil.
Ou ajoute klas la tab sou tab ou yo.
Epi, mwen bay gabèl di, li sanble trè bèl.
Ou ka fè bagay sa yo siplemantè, tankou "tab tab-trase".
Men, ou pral wè rezilta yo isit la.
Ou ka fè tab-entoure.
Genyen yon anpil nan opsyon ou kapab.
Men, fondamantalman, pandan l ajoute yon tab, klas la tab,
pral fè tab ou gade bèl bèl.
Se konsa, sa a, se yon fatige tou kout sou kèk nan estil yo pi enpòtan
ak konpozan ou pral bezwen sèvi ak pou demaraj.
Se konsa, mwen panse ke fini ak moute bèl pati nou an.
Nenpòt kesyon kounye a sou ki jan fè sit ou bèl?
Ki jan w ka sèvi ak sa yo eleman nan avantaj ou?
Santi bon?
Wi?
ODYANS: Petèt sa a se yon kesyon komik,
men ou ka sèvi ak demaraj sou Wikipedya?
Si w ap koreksyon yon paj Wikipedya?
NEEL Mehta: Wi.
Se konsa, kesyon an te ye a, mwen se koreksyon yon paj Wikipedya,
Mwen ka gen ladan demaraj estil nan la?
>> ODYANS: Wi.
>> NEEL Mehta: Se konsa, demaraj se fondamantalman yon gwo fèy style CSS.
Yon fèy style CSS jis di, nenpòt lè Mwen gen klas sa a, tache estil sa yo.
Se konsa, fèy la style CSS pou demaraj a pwal yon bagay tankou .btn,
klas la bouton, pral jwenn tankou yon awondi kwen fontyè oswa kèlkeswa sa.
Se konsa, fondamantalman, demaraj li jis yon pakèt moun sou klas ak yon pakèt moun sou diferan estil
espesifye pou klas sa yo.
Se konsa, osi lontan ke ou gen sa CSS, lis sa a nan règleman nan paj ou,
ou pral jwenn manier la demaraj.
Sa se, nan kou, kontenjan sou gen estil yo demaraj nan paj ou
yo kòmanse avèk yo.
>> Se konsa, nan Wikipedya, pwobableman ou pa t 'kapab
fè sa paske Wikipedya pa gen demaraj nan li.
Men, si li te fè gen demaraj, ou te kapab pwobableman fè sa.
Men, si ou te vle, ou ta ka gen ladan li, men sa ta ka
kraze Layout a ki deja egziste nan paj la.
Men, trè bon kesyon.
Ou kapab sèvi ak demaraj tout kote li se enkli,
men li pa nan bati nan pa default.
>> ODYANS: Mèsi poutèt ou.
>> NEEL Mehta: Wi.
Nenpòt ki plis kesyon?
Wi.
Se konsa, si w ap isit la oswa nan kay la, jis sonje getboostrap.com-- ankò,
getboostrap.com-- se zanmi ou yo.
Chak fwa w ap itilize Demaraj, sa a ap ba ou
enstriksyon sou kòman ou kapab jwenn te kòmanse, kouman yo sèvi ak konpozan.
Genyen kèk JavaScript fre plòg-ins ke nou pa pral ale sou isit la,
men yo ap vo kouran soti nan kòm byen.
Se konsa, sa a se zanmi ou yo.
Se jis enpòtan yo ka resevwa itilize yo kouman yo sèvi ak sa a.
>> Se konsa nou chat yon ti jan sou fè sit reponn.
Se konsa, jan mwen te di anvan, moun ki itilize laptops yo, yo sèvi ak telefòn yo.
Ak jan ou ta ka byen imajine, sa a se yon gwosè ekran trè diferan pase sa.
Se konsa, sou sit wèb la menm ki sanble bon sou telefòn mwen
a pa pral gade byen, nesesèman, sou yon òdinatè.
Se konsa, sa ou dwe fè se fè sit entènèt ou adapte.
Li te gen pou adapte yo ak divès kalite nan ekran gwosè ke li nan sou.
>> Li te gen yo di, mwen konnen mwen se sou yon òdinatè, yon gwo laptop, mwen ta dwe elaji.
Mwen konnen mwen se sou yon telefòn, mwen ta dwe retresi.
Se konsa, demaraj bay kèk trè, zouti trè itil fè sa.
Se konsa, kite a demaraj ou ti repo yon sit entènèt nan 12 kolòn.
Ou kapab fè ranje epi yo gen 12 kolòn.
Epi ou ka patisyon moun sepandan ou vle.
Ou ka gen yon sèl, gwo bagay, ki se 12 kolòn lajè.
Ou ka gen de bagay ki sis chak.
Ou ka fè yon sèl bagay sa a, se kat, youn ki nan de, oswa yon sèl sa a, se sis.
Ou ka fè twa, twa, twa, twa.
Ou ka fè tou sa pann ke ou vle.
>> Se konsa, petèt paj entènèt ou bezwen gen yon kite kolòn sa a, se yon tyè lajè a.
Se konsa, ki ta ka kat kolòn lajè ak rès la nan paj la
ta gen wit kolòn lajè.
Se konsa, sa a se yon egzanp.
Se pou nou rale moute yon lòt egzanp.
>> ODYANS: Èske li toujou gen yo dwe yon menm fann?
Ta ka li dwe yon sèt, senk fann?
>> NEEL Mehta: Wi.
Li ta ka sèt, senk.
Wi.
Osi lontan ke li ajoute nan 12, li la amann.
Se konsa, kite a ale tounen isit la.
Yon fwa ankò, kòd a se sa ki isit la se disponib tou isit la,
anba reponn egzanp.
Se konsa, mwen jis rale moute kèk egzanp reponn Kòd isit la.
Se konsa, ou fè sa lè l sèvi avèk yon bagay yo rele ranje.
Ranje se jis yon lòt klas la.
Li nan yon lòt style ou ajoute sou ou div fè yo pwòp eleman yo.
>> Se konsa, ou di, div klas = "ranje" fè yon ranje,
bay tèt ou 12 kolòn nan espas.
Lè sa a, ou mete kolòn andedan nan sa.
Se konsa, isit la nou Kolonèl-xs-6.
Pa enkyete sou xs yo.
Nou pral pale sou nan yon sec.
Men, fondamantalman, nou gen yon sèl bagay ki se sis lajè.
Nou rele li kite.
Se konsa, sa a, se ti bwat la bò gòch isit la.
Nou gen yon sèl bagay ki se sis nan 12 kolòn yo lajè.
Epi sa a se yon sèl sou bò dwat la.
>> byen jis bay fait div ou ranpli li moute gri.
Se konsa, sa a, se jis pou nou kapab wè ke yo ap diferan.
Se konsa, sa a premye egzanp lan.
Li se yon egzanp trè senp nan ki jan ou ta sèvi ak ranje ou ak kolòn isit la.
Ou defini yon ranje lè l sèvi avèk klas = "ranje".
Lè sa a, ou fè klas = "Kolonèl-xs-6" fè mwatye, "Kolonèl-xs-6" a fè lòt mwatye a.
Isit la nan yon egzanp pi konplike.
Se pou yo gade nan Tiny a, Gwo, Rès la yon sèl.
>> Nou ka fè ti de kolòn lajè, nou ka fè gwo sis kolòn lajè,
ak tout rès kat kolòn yo lajè.
Ki ajoute jiska 12.
Se konsa, sa yo fini spanning lajè a nan paj la.
Yon fwa ankò, nou gen yon ranje deyò.
Lè sa a, nou gen div klas = "Kolonèl-xs-2" ak Lè sa a, 6, ak Lè sa a 4.
Apre sa, ki pral bay estrikti a pou nou.
Se konsa, nou ka mete tou sa èk an nou vle andedan isit la.
Olye pou yo Tiny, nou ka mete yon bouton.
klas bouton = "btn BTN-prensipal".
Se konsa, remake ke bouton nou an pa pran moute tout lajè a,
men omwen li nan restriksyon ak sa yo ki espas anpil.
>> Se konsa, sa a, se tout byen epi li bon.
Se konsa, nou kapab kounye a kraze moute wèb nou an paj an fragman, lajè ki gen bon konprann.
Nou ka di nou vle gen yon bò gòch kolòn, ak yon kolòn dwat, ak sou sa.
Men, nou pa te ale sou ki jan ou fè l 'reponn.
Se konsa, kite a demaraj fè sa kòm byen.
Li te gen tout bagay sa yo rele breakpoints.
Se konsa, li te gen yon jan pou konnen si wi ou non w ap sou yon laptop, w ap sou yon ti tablo,
w ap sou yon orizontal telefòn, oswa w ap sou yon telefòn vètikal.
Li konnen gwosè a ekran.
Ak kraze sa a nan kat categories-- gwo oswa LG, ki se laptops, anjeneral.
MD oswa mwayen, ki se tablèt.
sm, ki piti yo.
Ou xs, siplemantè ki piti yo.
Se konsa, lè ou presize yon kolòn, ou di,
li ta dwe sis kolòn lajè sou yon aparèy siplemantè ki piti yo.
Se poutèt sa nou te fè Kolonèl-xs-6.
Nou ap di ke li ta dwe gen sis nan 12 kolòn yo lajè
sou yon aparèy siplemantè ki piti yo.
Men, si li la anyen pi gwo, nou pral jis default lè l sèvi avèk ti gwosè a siplemantè.
Si li nan anyen pi gwo pase siplemantè ti, li pral sis lajè.
Se konsa, nou ka ogmante sa yo fè nan kolòn nou an
Leve kanpe, pran diferan kantite lajan pou kolòn ki baze sou gwosè a ekran.
Ann ale nan rèsizin sa a reponn.
Se konsa, nou gen kolòn nou an.
Epi, se di, "Kolonèl-lg-6 Kolonèl-xs-12".
Se konsa, bay sa ou konnen twò lwen, ki sa ou
panse ki pral rive sou yon gwo ekran?
Oke, li nan kalite bay fason sa a, men sa ki fè
ou panse li pral gade renmen sou yon gwo ekran?
Epi poukisa se sa?
>> ODYANS: Èske li ki sou yon gwo ekran, li nan
pral pran sèlman yon pòsyon nan espas ki la plen?
Fè tankou mwatye nan li, Mwen devine?
>> NEEL Mehta: Wi.
>> ODYANS: Yo, epi sou pi piti ekran, li pral
yo pran moute ekran an antye, 12 an.
NEEL Mehta: Wi.
Dwa.
Se konsa, kòm yon egzanp, se pou yo jis gade desann isit la.
Wi.
Se konsa, sou nenpòt ki bagay ki se LG oswa bigger-- konsa k ap pase òdinatè mwen an
yo dwe lg paske li nan bèl wide-- li pral fè
li kòt a kòt paske li nan Kolonèl-lg-6.
Se konsa, paske li nan sou gwo, li fè li sis kolòn lajè ak sis kolòn lajè.
Se pou nou wè sa ki rive si mwen fè sa-a nan yon yon sèl pi piti.
Mwen jis ale nan un-plen ekran sa a.
Apre sa, mwen pral retresi ekran an.
Mwen pral retresi ekran an, se konsa li sanble mwen menm sou yon aparèy pi piti.
Se konsa, mwen pral retresi li tankou sa a.
>> Epi vwala.
Li se kounye a anpile paske kounye a nou te ale
soti nan gwo to-- sa a se pwobableman yon siplemantè ti ekran gwosè.
Se konsa, kounye a li di, OK, nou pa nan gwo, nou ap nan siplemantè ti peyi.
Se konsa, nou ap ale nan sèvi ak siplemantè ti gwosè a.
Epi nou ap ale nan xs-12, xs-12.
Se konsa, li k ap pase yo dwe anpile.
Epi jis remake ke gen nan yon bagay yo rele yon breakpoint.
Yon breakpoint se kote ou te fè tranzisyon an
soti nan siplemantè ti piti, ti gwo, ak sou sa.
>> Se konsa, jis remake ke jan mwen glise sa a soti, evantyèlman, ou pral jwenn nan pwen an
kote yo pral sote yo dwe kòt a kòt.
Gen ou ale.
Se konsa, gen nan breakpoint nan la a.
Se konsa, nou ka fè li menm plis konplike.
Koulye a, nou ka di, sa yo bagay yo ta dwe kat lajè.
Sa se, yo ta dwe Leve kanpe, pran sou yon twazyèm
nan diskou a sou aparèy gwo anpil.
Sou yon aparèy mwayen, li ta dwe pran moute mwatye ekran an paske li nan MD-6.
Sou yon aparèy piti anpil, li ta dwe pran 12.
Se konsa, sa a sanble trè natirèl.
Se pou nou jis eseye sa a soti pou tèt nou.
>> Se konsa, sou yon gwo ekran, yo ap kat lajè.
Doktè Moun Fou li yon ti jan ti kras.
Apre sa, yo yo kounye a se sis lajè.
Se konsa, sa a se sis, sis, sis.
Doktè Moun Fou li menm plis ak Lè sa a yo pral totalman anpile.
Se konsa, sa, pou egzanp, fè sans si w ap gen kat, tankou kat nouvèl,
pou egzanp, kote si li a sou yon trè gwo ekran,
li a OK si ou gen plizyè kòt a kòt paske yo ta tout jwenn ase chanm.
Men, yo bezwen gen ase espas.
Se konsa, sou yon ekran pi piti, ou ta vle ba yo
plis plas, Prorate, nan paj la.
>> Se konsa, kòm yon egzanp mond reyèl, kite a di nou gen Twitter.
Epi nou gen bwat tèks, Se konsa, ou ka tweet sou bò la.
Epi nou gen yon lis ki gen Des sijè sou bò dwat.
Se konsa, sou yon gwo ekran, nou ta dwe te yo dwe kòt a kòt,
pou ou kapab wè yo nan yon glas.
Men, sou yon ekran pi piti, nou ta dwe fè 12 ak 12,
se konsa ke sijè ki Des ki pi ba pase zòn nan tweet.
Paske zòn nan tweet se nan bagay prensipal ak sou yon ekran piti,
sijè ki pa fè sa Des pwoblèm byen kòm anpil.
Se konsa, nou mete yo dwat anba a, se konsa yo ke yo ka tou de jwenn ase espas.
Fè sans byen lwen tèlman?
>> ODYANS: Wi.
>> NEEL Mehta: Solid.
Se konsa, ki nan tout egzanp yo mwen gen isit la.
Ann eseye ak fè yon defi.
Se konsa, ankò, sa a se defi-2.html pou moun nan nou yo ansanm nan kay la.
Se konsa, zanmi m 'yo, Mak Zuckerberg, te vin jwenn mwen lòt jou a.
Apre sa, li la tankou, Neel, mwen gen vinn trè bon nan konsepsyon sit entènèt.
Mwen kapab fè HTML a.
Mwen te fè sa a ti kras, nouvo modifye nan Facebook.
Mwen gen yon lide nouvo pou konbyen nou ta dwe style Facebook.
Ak isit la li ye.
Dwa isit la.
Isit la nan kèk kòd egzanp.
Se konsa, sa yo rele Fancybook.
>> Nou gen kèk dènye nouvèl.
Nou gen nmo, Mike Kosowski, ***-- twa dènye nouvèl.
Lè sa a, nou gen yon lis ki gen sou entènèt Zanmi dwat anba a li.
Se konsa, li te fè devwa l 'yo.
Li konnen yon ti kras sou Demaraj, li te te fè lis gade nan,
li te fè yon ti kras nan HTML.
Se konsa, li te gen paj wèb la.
Men, li la tankou, Neel, mwen pa fè sa konprann reponn konsepsyon nan tout.
W gen nenpòt ekspè ki te kapab ede m 'ak sa?
Apre sa, erezman, ou se kounye a ekspè nan konsepsyon reponn.
>> Se konsa, sa li te di m te ke li vle Fancybook yo gade tankou sa a.
Sou yon aparèy piti anpil, tankou yon telefòn, tout bagay
yo ta dwe anpile, tankou isit la.
Se konsa, ou gen delè a inicio, moute tèt, ak Lè sa a
ou ta dwe gen nan Chat ba nan fon.
Men, sou yon ti tablo oswa yon mwayen aparèy, li ta dwe mwatye ak mwatye,
tankou nan delè a yo ta dwe mwatye ak lis la nan zanmi chat
yo ta dwe sou lòt mwatye a.
>> Lè sa a, sou yon laptop, delè a ta dwe pran moute twa kar
ak Lè sa a lizyè la chat ta dwe Leve kanpe, pran yon lòt sezon yon sèl.
Se konsa, li se tankou, Neel, mwen gen sa a Kòd isit la, men li la pa reponn.
Li bezwen yo konpòte tankou sa a.
Se konsa, defi m 'devan ou yo bay kòd sa a isit lan--
si ou rafrechi ou CodePens, ou ap wè sa a.
Oswa si ou jis keratin nan kòd la sou defi-2, ou ap wè sa a.
>> Isit la nan sa a Kòd egzanp.
Ou pral wè kèk xxxs.
Mwen vle ou chanje xxxs yo, sa yo ki delè a ak lis la nan zanmi
sa a karakteristik sa yo isit la.
Pa enkyete sou sa ki nan andedan delè a pou kounye a.
Nou pral jwenn ke nan pwochen etap la.
Men, pou kounye a, kite a wè si nou jwenn bagay sa yo fann l 'kanpe tankou sa a.
Se konsa, fè sa ki sans sa fè?
Se konsa, si w ap nan kay la, pran yon poz videyo a epi eseye
fè paj entènèt ou gade reponn tankou sa a.
Si ou se isit la, pran tankou de, twa minit.
Santi yo lib yo chat ak yon vwazen, epi eseye, ak lojisyèl ranje Mesye Zuckerberg la
reponn pwoblèm konsepsyon.
Si w gen nenpòt kesyon, santi yo lib yo kite m 'konnen.
Santi bon?
Fè konsa?
Nice.
>> ODYANS: [fèbl].
NEEL Mehta: Ki sa?
>> ODYANS: mwen se bon.
>> NEEL Mehta: Oh, bon.
Nice.
ODYANS: Bagay la sou 12 an, se li ki demaraj
trete yon espas ekran bay kòm 12 inite nan tout ak Lè sa a divize ki moute?
Ki jan egzakteman a fè dozaj travay pou sa a?
>> NEEL Mehta: Wi.
Se konsa, kesyon an se, ki jan fè dozaj la
travay pou demaraj, dwa?
>> ODYANS: Wi.
NEEL Mehta: Se konsa, chak fwa ou gen yon klas div = "ranje",
pa gen pwoblèm ki jan gwo ekran an se, Demaraj ap ba ou 12 inite
nan gwosè a menm Leve kanpe, pran ki gwosè anpil.
Se konsa, nan col 1, li toujou 8.33% nan gwosè a nan ekran an,
si wi ou non sa a, se sa a lajè oswa sa a, se sa a lajè.
Se konsa, nan kou, sou yon pi piti ekran, chak kolòn se pi piti.
Ou toujou gen 12 kolòn lajè, li nan yon pi piti.
Se konsa, li a jiska ou a asire w ke bagay sa yo pran plis kolòn,
Prorate, nan konpanse pou ki mank de espas.
Ki fè sans?
>> ODYANS: Wi.
Mèsi.
NEEL Mehta: Bon kesyon.
ODYANS: Sou yon gwo ekran, ka ou gen
delè a Leve kanpe, pran twa kar?
>> NEEL Mehta: Wi.
NEEL Mehta: Ki jan yo mesye santi?
Bon?
Fre.
Se konsa an n tounen.
Li kite yo eseye ak ranje pati sa a nan sit entènèt Mesye Zuckerberg la.
Se konsa, delè yo se moute isit la, nan tèt la, ak lis la nan zanmi
se nan pati anba nan.
Se konsa, nou jis bezwen yo asiyen kolòn, ak dimensionnement pwopòsyonèl,
nan chak nan sa yo.
Se konsa, premye *** sa a se pou delè a.
Ki sa ki klas fè nou mete nan isit la?
Ki sa ou mesye t 'mete nan isit la?
Se konsa, sonje, sou yon gwo ekran, li bezwen yo pran moute twa ka nan lajè nan.
Se konsa, sa ki style ta ba ou sa?
Sou yon gwo ekran, twa trimès nan lajè nan.
Ki sa ki klas nou itilize a?
ODYANS: Se konsa, nou ap jis pral fè koreksyon ki egzanp premye nan klas la.
NEEL Mehta: Pou kounye a.
Wi.
>> ODYANS: Nou pa ap koreksyon chak, karakteristik endividyèl yo nan delè a?
NEEL Mehta: Pa kounye a, omwen.
Se konsa, sa a tout antye bagay se yon blòk.
Nou jis ap chanje nan desine nan blòk la.
Se konsa, isit la nou Kolonèl-lg-9 paske li nan nèf soti nan lajè nan 12 sou yon gwo ekran.
Lè sa a, sou yon ekran mwayen, konbyen kolòn mwen ta dwe jwenn?
ODYANS: Li nan sipoze yo dwe mwatye ak mwatye.
NEEL Mehta: Dwa.
Se konsa, kouman anpil se sa?
>> ODYANS: Se konsa, sis.
NEEL Mehta: Sis.
Lè sa a, anplis ti ta dwe be-- si li pran moute lajè a tout antye de ranje a,
konbyen yo ta dwe li ta dwe ye?
ODYANS: 12.
NEEL Mehta: 12.
Wi.
Epi, koulye a nou te gen chanje sa a lòt moun,
se konsa li pran moute rès la nan espas ki la.
Se konsa, Kolonèl-lg--
ODYANS: Li nan ale nan Leve kanpe, pran ekran an antye?
NEEL Mehta: Li pran moute yon ka nan ekran an sou yon aparèy gwo,
jan nou te montre isit la.
>> ODYANS: Twa.
>> NEEL Mehta: Twa.
Lè sa a, Kolonèl-MD-6 yo pran moute rès la nan espas ki la.
Kolonèl-xs-12.
Se konsa, kounye a nou gen delè a pran twa ka
nan paj an nan ekran an gwo ak Lè sa a yon ka sou bò la.
Lè sa a, si gwosè ekran an desann, li ta rdimansyonman kòmsadwa.
Se konsa, li nan anpile kounye a, sou yon ekran piti anpil.
Men, si nou gwosè l 'kanpe yon ti jan, yo ta dwe egzakteman mwatye ak mwatye.
Se konsa, nou te fè sa byen lwen tèlman.
Anpil fre.
Se konsa, nou pa pral fè nan lòt pati nan defi a.
Ou ka fè sa tèt ou.
Men, fondamantalman, ou gen eseye ak fè sa yo reponn
kòm well-- fè delè a atik, tèt yo, reponn.
Se konsa, kounye a nou te ale nan tout sa ou bezwen konnen
sou bò a reponn a demaraj.
Nenpòt kesyon sou reponn konsepsyon ak demaraj
ak fason ou ta ka ale sou fè sa?
Wi?
>> ODYANS: Èske li menm jan an si nou te gen yon videyo entegre
epi nou te vle kontwole nan echèl nan ki was-- nan videyo
gwosè a nan videyo a pral soti nan laptop sa sou telefòn ou.
NEEL Mehta: Wi.
Plis oswa mwens.
Ou ta dwe di videyo a yo Leve kanpe, pran kòm anpil chanm kòm li a bay yo,
ki se yon ti kras anmèdan pafwa.
Men, lide a debaz se menm bagay la.
Se yon videyo, tankou nenpòt ki lòt objè nan paj la, tankou yon bouton oswa kèlkeswa sa,
osi lontan ke ou itilize nan kolòn ak ranje yo,
ou ka bay li yon sèten kantite espas.
Se konsa, jwenn li pou bay lonè pou ke se yon diferan kesyon paske tankou YouTube
entègr gen yon sèten, gwosè pi pito.
Men, teyorikman a pi piti, li ta travay.
Cool?
>> ODYANS: Mwen ta kwè lè sa a, pou yon imaj, fè ou aktyèlman
bezwen gen diferan vèsyon nan imaj la menm nan gwosè diferan
pou laptop kont iPhone?
Yeah Kesyon an se, nou bezwen gen imaj ki reponn yo tou.
Ak tout bon, ou ka fè sa.
Mwen panse ke li la nan CSS.
Men, demaraj pèmèt ou fè sa kòm byen.
Ou ka gen imaj reponn.
Ou ka gen imaj ou rdimansyonman dapre gwosè a nan paj la.
Apre sa, nan yon bagay trè nouvo HTML5, vèsyon an dernye nan HTML,
ak CSS3, dernye a vèsyon an CSS, ki
pral kite ou mande imaj diferan ki baze sou gwosè a ekran w ap nan.
Anjeneral, li nan bon ase yo jis gen imaj ou jis retresi oswa grandi nan
sepandan gwo li bezwen yo dwe.
Men, ou ka, si ou vle a, gen yon sèl 32 pa 32
pou ekran piti anpil, epi 64 pa 64 pou yon gwo ekran,
ak Lè sa a sèvi moun oaza.
Ou ka fè li.
Li nan fè pa kèk moun.
Li nan toujou trè kwen koupe.
Men, repons kout, reponn images-- Demaraj ka sove jou a la.
Cool?
>> ODYANS: Mèsi poutèt ou.
>> NEEL Mehta: Se konsa, kite a pale reyèl vit sou ki jan
yo ka resevwa sa a nan paj pwòp entènèt ou an.
Se pou nou di ou vle fè ou pwòp sit entènèt lè l sèvi avèk demaraj.
Se konsa, kite yo jis jis mache nan li ansanm.
Se pou nou di ou fè jis yon paj HTML nòmal.
Santi yo lib yo swiv ansanm nan tou sa editè pi renmen ou se.
Se konsa, nou jis gen kèk paj HTML.
Nou ka fè! Doktip html.
Sa a se tou html, paj nou an.
Pa gen anyen nouvo.
Nou te fè sa anvan.
Se konsa, isit la nou gen HTML nou yo ak nou ka mete bagay andedan isit la.
Nou ka gen bouton nou an.
Ak jan mwen te di anvan, sa a se pa nesesèman ale nan travay.
Poukisa nou pa sa a ta ka travay?
Poukisa nou pa pral resevwa nou an bèl, kolore bouton?
>> ODYANS: Paske nou pa t 'konekte li nan pwojè a demaraj oswa dosye a?
NEEL Mehta: Wi.
Kòrèk.
Paske li nan Bootstrap-- jis yon anpenpan dosye CSS.
Li se yon seri de estil ki yo tache ak eleman ou yo.
Isit la nou te di li ke nou vle sèvi ak diferan estil sa yo.
Mwen pral gwosè ki moute yon ti kras.
Nou te rakonte l 'nou vle sèvi ak Styles sa yo, men nou pa janm
rakonte l 'ki sa estil yo ye.
Epi sa a, ki sa ou kesyon soti nan pi bonè te ye a.
Sa a repons lan nan sa.
Nou bezwen jwenn yon fason jwenn estil yo epi yo genyen ladan yo nan paj nou an yon jan kanmenm.
Se konsa, demaraj volonte montre nou ki jan fè sa.
>> Se konsa, si ou ale nan tèt la isit la, Pou kòmanse.
Genyen diferan fason yo download li.
Sa a pa ta ka fè sans nesesèman.
Bootstrap-- sa a ap kite ou gen tan pwan dosye a CSS tèt li.
Epi ou enkli li nan paj pwòp ou yo.
Sous Kòd se si ou vle yo Hack sou li nan tèt ou.
Ou pa bezwen sa a vrèman.
Toupe se yon lang ki compiles nan CSS.
Panse a li kòm yon preproseseur.
Anpil tankou PHP se yon preproseseur a HTML, toupe se yon preproseseur pou CSS.
Se konsa, si ou vle fè l ' fason sa a, ou ka fè sa.
>> Fason ki pi fasil se lè l sèvi avèk yon CDN, oswa kontni livrezon rezo.
Li se yon sit entènèt ki jis sèvi moute yon kopi demaraj
trè vit pou ou pou w mete nan paj pwòp ou yo.
Se konsa, isit la nan yon egzanp.
Li pral ba ou sa a eleman lyen.
Yon eleman lyen di navigatè ou a, pran tou sa dosye yo estoke isit la
epi yo genyen ladan l 'nan paj entènèt nou an.
Ak nan ka sa a, li nan dosye a CSS demaraj.
Se konsa, nou pral jis kopi ki URL, oswa ki tèks, epi n ap voye jete byen andedan
nan tèt nou an.
>> Apre sa, mwen pa pral kòmanse paj la pou sa a, men ou ka fè konfyans ke sa a ap travay.
Lyen an pral fè ou jwenn CSS la.
Mete l 'nan ou paj ak Lè sa a ou pral
kapab sèvi ak tout nan demaraj la klas ke ou konnen ak nan renmen.
Si ou vle kenbe l 'lokalman e genyen li sou sistèm pwòp dosye ou
olye pou yo gen pou yo ale nan entènèt la gen tan pwan li,
tankou si ou vle itilize offline nan sit,
ou ka itilize opsyon nan Download.
Men, pou pati ki pi, lè l sèvi avèk la CDN se trè vit paske fason sa a,
li nan kenbe mete ajou pou ou kòm byen.
Ou gen a manuelman mete li swa.
Fè sans?
>> Se konsa, y ap fè yon anpil nan zouti sa a bati te nan pa default. Nan Pset7 ou ak Pset8,
Mwen kwè se demaraj otomatikman enkli ladan li.
Ak nan CodePen, pou egzanp, li nan deja
enkli paske mwen te ajoute ajoute ke anviwònman.
Se konsa, si ou te janm vle jwe alantou ak li, ou ka jis ale sou CodePen,
oswa ale sou ID ou, oswa kèlkeswa sa.
Epi ou ka kapab aksè demaraj la,
men li pa nan toujou bati an, pa default, nan entènèt la.
Fè sans?
>> Wi.
jis kòm yon recap-- nou gen tankou senk minit kite.
Men, kòm yon rapèl, nan nouvo paj wèb, ou ka gen ladan demaraj tankou sa a.
Ak yon lòt fwa ou genyen li enkli, ou ka fè tout bagay la plezi isit la.
Ou ka ale sou li a, epi ou ka jis parkourir CSS la, ou ka ajoute kèk Styles fre,
ou ka gen eleman tankou bouton sa yo,
ak tab yo, ak lis la atik ke nou mansyone.
Genyen kèk fre JavaScript grefon, ki ou ta ka vle eksplore.
Yo ajoute kèk fre interactivité nan paj wèb la.
Fè tankou yon sèl sa a fè yon dyalòg modal.
>> Se konsa, gen nan kèk bagay plezi ou kapab fè avèk demaraj.
Se konsa, konsèy m 'devan ou se ale pi devan epi sèvi ak li nan pwòp pwojè ou a,
swiv enstriksyon sa yo nou jis te fè ki di kòman ou kapab jwenn li,
ak jis li demaraj la paske ou pral aprann plis sou sa yo dwe fè.
Se konsa, nou te ale sou yo, jodi a, kouman yo sèvi ak
dokiman an, ki sa bilding nan blòk yo, ak ki jan li se concept.
Se konsa, kounye defi m 'devan ou se fè yon sit entènèt lè l sèvi avèk demaraj.
Ale nan Doc yo.
Apre sa, sèvi ak zouti sa yo ke nou te aprann byen lwen tèlman eseye ak analizan yo
epi mwen konprann yo.
Apre sa, sèvi ak sa yo Styles ak zouti ou wè gen nan sit entènèt ou.
Apre sa, li nan jis yon gwo, eksperimantal pwosesis.
>> Eseye soti yon style sèten.
Li travay?
Èske se pa?
Eseye mete bagay ansanm.
Al gade nan sa ki rive.
Li nan anpil yon pwòp tèt ou gide, pwosesis dekouvèt.
Men, jodi a, nou te aprann nan Basics anpil nan sa ki demaraj?
Poukisa pou l 'travay?
Ki jan li travay?
Ki jan nou kòmanse lè l sèvi avèk li, an plas an premye?
Se konsa, kounye a ke ou se sou ki bòs, ou
ta dwe kapab fè l ' bèl fèt san pwoblèm nan tèt ou.
>> Se konsa, yon lòt fwa ankò, tout nan Kòd nou te fè se isit la.
Se konsa, si ou te janm vle yo ka resevwa yon bwòs moute sou li a,
tankou, sa ki nan yon twonpe rapid fèy pou tout moun nan estil yo?
Ou ka ale nan echantiyon sa a isit la.
Nou gen kèk Styles egzanp isit la.
Si ou vle eseye nan defi ankò pa tèt ou,
ou ka eseye yo isit la ak tcheke deyò solisyon yo yo te.
Se konsa, lyen sa a pral enkli nan glisad yo, ki
yo pral voye soti nan ou nan kou.
Men, li la tou moute isit la.
Ou ka pran yon poz videyo a, si ou vle.
Tout enfòmasyon ou bezwen se pral fè dwa isit la, sou sit sa a.
Se konsa, si nenpòt moun ki gen nenpòt kesyon, nou kapab pran yo pou minit yo koup kap vini an.
Sinon, nou tout mèsi anpil pou l ap gade.