Tip:
Highlight text to annotate it
X
>> Neel Mehta: Allura bonjour kulħadd li qed jaraw hawn,
jew jaraw online, jew mill-bogħod.
Jisimni Neel, dan huwa CS50.
U seminar tal-lum hija Responsive Web Design ma 'bootstrap.
Huwa suġġett li l- qrib ħafna qalb tiegħi.
Nisperaw, se jkun qrib il-qalb tiegħek
kif ukoll sa tmiem l-seminar tal-lum.
Allura bootstrap.
Kemm għandek xi jsir tip ta 'żvilupp tal-web qabel?
A ammont tajjeb?
Ftit.
>> Allura bootstrap huwa l-dinja l-aktar ta popolari, qafas front-end.
Huwa użat by-- I għażilt Koppja ta 'websites-- każwali
Lyft, Newsweek, u Vogue.
Huwa użat minn numru ta 'websajts.
Huwa qafas disinn web li ser tavżak tagħmel websajts tiegħek
kemm sbieħ u responsiva.
U jien ser jmorru fuq dawn żewġ kunċetti hawn.
Beautiful.
Allura ikollok website normali fuq il- xellug, li huwa magħmul bi ftit HTML.
You ħadthom tgħallmu HTML fil-klassi u fis-sezzjoni fit-tul.
Bootstrap huwa mod biex jagħmlu websajts tiegħek beautiful.
Tista 'tieħu x'hemm fuq il- naħa tax-xellug tal-iskrin tiegħek
u jibdluh x'hemm fuq il- naħa tal-lemin tal-iskrin tiegħek ma 'ħafna,
ħafna, kodiċi ftit li xejn.
>> Ikollok l-buttuna blu sbieħ, ikollok il fancy, truf fit-tond fuq l-iskrin,
ikollok l-opinjoni lista, ikollok l- karti, u dan fuq il ftit li xejn kodiċi.
Hemm fil-fatt ebda CSS li inti għandek tikteb mill yourself.
Allura bootstrap jippermettilek li jkollhom dawn pre-mibnija CSS
komponenti inti tista 'tpoġġi ġewwa tal-paġna web tiegħek
biex jagħmluha ħarsa beautiful mingħajr ħafna xogħol fuq tiegħek.
Huwa tassew bootstrap, punt tat-tluq,
għall-avventuri iżvilupp tal-web tiegħek.
U hekk meta int biss mocking ta 'websajt,
huwa post tajjeb ħafna biex tibda.
Tista 'tikseb website tajba tfittex ma ħafna, xogħol ftit li xejn.
U fil-fatt, aħna qed tmur biex jagħmlu dan lilna nfusna
fil-kors ta 'prodotti simili ħamsa minutes-- fi żmien 10 minuti.
Allura huwa pjuttost faċli biex tagħmel xi websites kbira.
Allura dak hu l-ewwel parti.
>> It-tieni part-- jirrispondu.
Nies, illum, ma biss aċċess għall-internet fuq laptops tagħhom.
Attwalment, mill-2014, aktar nies aċċess għall-internet permezz ta 'apparati ċellulari,
bħal telefowns, jew pilloli, jew servizzi, jew l-bqija minn websajts.
U websajts tradizzjonalment kienu mfassla bil laptops jew desktops
f'moħħu.
U għalhekk l-websajts huma spiss mhux tajjeb ħafna adattati għall-telefon tiegħek.
Jekk inti qatt żar harvard.edu fuq il-mobile tiegħek,
huwa tip ta 'annoying esperjenza, id-dritt?
Dan għaliex mhuwiex jirrispondu.
Aħna qed tipprova tagħmel websajts li huma jirrispondu,
li jirrispondu għal daqsijiet iskrin tan-nies.
>> Mela jekk huwa ta 'telefon, huwa se jmorru fuq il-mobile.
Jekk huwa pillola, huwa se jmorru fuq pillola.
Hija jaġġusta li jqabblu l- screen li qed jintuża.
U hekk bootstrap jipprovdi wkoll xi ħafna, utilitajiet utli ħafna għal dan.
U aħna qed tmur biex jiddiskutu dak ukoll.
Għalhekk għal darb'oħra, hemm żewġ partijiet għall Bootstrap-- sbieħ u responsabbli.
Aħna qed tmur biex jitkellmu dwar dawk.
L-ewwel, beautiful.
U mbagħad jirrispondu.
>> Allura l-kodiċi li aħna qed ser jitkellmu dwar today--
aħna qed tmur biex ikollhom ħafna ta 'eżempji, ħafna sfidi, u għalhekk on-- dan
kollha ħajjiet fuq dan is-sit hawn.
Dan slide huwa dak li aħna mibgħuta.
Mela jekk int hawn, inti tista 'tħossok ħielsa li ma jkollhom jiktbu dak isfel.
U jekk inti qed jaraw remot, tħossok ħielsa biex tiġbed dan up fuq il-kompjuter tiegħek
kif ukoll.
Int ser ikollok probabbilment bżonnha matul Matul din is-seminar.
>> Allura aħna qed tmur biex tuża websajt imsejjaħ CodePen,
li hija kodifikazzjoni kollaborattiv ambjent, waqt dan is-seminar.
U CodePen-- u jien ser nuruk hawn reali fast--
li jippermettilek li tikteb HTML kollaborattiv.
Kapaċi nikteb dan, I tista 'tibagħtu lill inti guys, inti guys tista 'tbiddilha.
Anke jekk int remoti, inti xorta tista 'aċċess dan il-mod.
Tista 'tip HTML code fil- top u inneħħu awtomatikament
jiġi konvertit fil- paġna web fil-qiegħ.
Allura huwa mod għalik biex malajr jippruvaw kodiċi
mingħajr ma jkollhom jagħmlu xi tip ta 'għalf fuq IDE tiegħek, jew website tiegħek stess,
jew ikun x'ikun.
>> Allura aqbad u iġbed up dan website, jekk int remoti
jew jekk inti hawn, speċjalment jekk int remoti.
is.gd/cs50boostrap.
Nru brieret, ebda jissottolinja, ebda xejn.
Allura dawk minnkom li huma hawn, biss jagħtu me thumbs
up meta jkollok jinġibed up dik il-paġna web.
Tajba?
>> UDJENZA: Iva.
>> Neel Mehta: Allura aħna ser tingħata għal dak fi ftit tieni.
Allura l-ewwel, aħna qed tmur biex tikseb lejn, kif inti tagħmel websajts tiegħek beautiful?
Aħna ser jitgħallmu kif jieħdu boring, qodma HTML, bħal I wera inti qabel,
u dawwar dan in komponenti tassew sbieħ,
bħal widgets sbieħ, sbieħ, kulurit buttuni, u tikketti, u mwejjed,
u kollha, bl-użu bootstrap.
Mela jekk nistgħu kollha jmorru fuq il- CodePen li inti biss jinġibed up.
Hija għandha tfittex ftit bħal dan.
Ma teżamina bħal dan għal kulħadd?
>> UDJENZA: Iva.
>> Neel Mehta: Jekk int bogħod, huwa għandha teżamina bħal dan ukoll.
Jekk le, se nuri inti hekk kif tista 'tikseb teżamina bħal dan
f'parti futur tal-video.
Allura hawnhekk għandna bil-miktub a HTML bażika ħafna,
bħall-tip inti stajt qegħdin jużaw fil-klassi.
Huwa pjuttost bażiku.
Ebda frills.
U aħna għandna xi għalf.
Imxejna mfassla ħafna, bażika ħafna jibdew
sejħa Yalp! li magħhom inti tista isibu ristoranti fil-qasam,
u jsibu reviżjonijiet, u direzzjonijiet dwar dawk kollha.
Huwa kunċett tajjeb ħafna.
Huwa qatt ma sar qabel.
Huwa isem ħafna uniku, wisq.
>> Allura dak li aħna qed tmur biex tipprova tagħmel hu jgħin lill-sid
tal Yalp! tagħmel website tiegħu tfittex verament, verament jibred.
Allura biex tibda bil, is-sid ta ' Yalp! għamlet tfittxija ftit
kaxxa, u buttuna ftit, u mbagħad forsi ftit
qasam imsemmi għal ristoranti enfasizzat, u mbagħad
lista ta 'ristoranti oħrajn li huma fil-qasam.
Allura nistgħu biss jgħaddu HTML code fast reali.
Kif komda inti guys ma HTML?
We ghamilt ftit taqsima u wkoll fil-klassi.
Deċenti?
>> Hekk biss bħala terġa, HTML hija kollha dwar li jkollhom
tags jew elementi li tgħid l- kompjuter kif jistabbilixxu l-paġna web.
Allura dan h1 here-- tibda h1, Merħba li Yalp !, aħħar h1-- jirrakkonta l-kompjuter,
jiġbed header big it jgħid, Merħba għall Yalp!
hemm ġewwa.
Għandna wkoll forom.
Nistgħu inputs bħal dan, inputs test, li jirrendi bħala kaxxi test
tikteb in.
Inti ukoll għandek buttuni.
Ikollok sbieħ, buttuna clickable.
Ma tagħmel xejn id-dritt issa, iżda ikollok buttuna.
Inti jista 'jkollhom divs, jew dividers, għal ikissru paġna tiegħek fi gruppi varji.
>> Inti jista 'jkollhom il-paragrafi, għandek buttuni.
Jekk għandek paragrafi, allura għandek listi unordered, ul,
u l-listi ġewwa minn dan, LI.
Allura dawn huma l-bażika ħafna blokki tal-bini ta 'paġna web.
U fil-fatt, pretty ħafna kull website inti tara
se tkun mibnija jużaw dawn l-istess għodod.
Of course, dawn mhux kollha tħares dan ħażin minħabba aħna qed
ser ħwawar it up ftit.
Mela ejja din HTML qodma boring u bidu biex tinbidel f'għodda-sit beautiful
li aħna biss raw ftit minuti ilu.
>> Mela ejja nibdew off sempliċi ħafna.
Allura aħna għandna din il-buttuna hawn.
Fil bootstrap, kif rajna, nistgħu jkollhom sympathique, beautiful, buttuna blu.
U li jsir mhux billi tagħmel CSS custom.
M'hemm l-ebda CSS custom hawn.
Li jsir billi żżid klassijiet għall-elementi HTML tiegħek.
Jekk inti ħadthom ppruvaw klassijiet, jew hrefs, jew ankri, jew tip = "test" għall inputs--
Elementi HTML jista 'jkollhom dawn l-attributi.
Huma jista 'jkollhom informazzjoni addizzjonali li inti tista 'tagħtihom.
>> U għalhekk, f'dan il-każ, klassijiet huma l-attribut.
Allura youd tikteb, klassi buttuna = xi ħaġa ġewwa ta 'spag.
U li attribut se jirrakkontaw l- kompjuter, dan mhux il-każ, buttuna qodma.
Huwa buttuna li jkun din il-klassi ta 'buttuni.
U għalhekk bootstrap, jekk inti tagħti ċertu stil fuq element tiegħek,
hija għandha tiġbed dan b'ċertu mod.
So I write "BTN BTN-primarja.
BTN tkun abbrevjazzjoni għall buttuna.
Int ser ikollok avviż issa li buttuna ikrah tiegħi daru
fi sbieħ, beautiful, buttuna blu.
Huwa jidher tajjeb ħafna meta aħna ikklikkja dan.
>> U hekk dak li jiġri huwa li għandna l- klassi BTN u l-klassi-BTN primarja
fuq element tagħna.
U bootstrap se jmorru fi u jgħidu, OK, I jafu li hemm dawn iż-żewġ klassijiet.
Kull element li għandu dawn iż-żewġ klassijiet għandha tinġibed bħal dan.
Allura dak l-qalba ta 'kif inti ehmeż stili għall-elementi fil bootstrap.
Inti biss jagħtu klassijiet lilhom u se piż out kif jidhrilha.
So here eżempju ieħor.
Fil-input, nistgħu żid klassi = "-kontroll formola".
U jien ser juru malajr fejn inti tista 'ssir taf liema klassijiet
huma disponibbli ta 'kull tip ta' element.
Iżda l-klassi li aħna biss Miżjud sbieħ, kantunieri ttundjati,
hija għandha ikkuttunar sbieħ, hija għandha sbieħ, tiddix blu lilha.
>> Nistgħu wkoll tmur fis din il-formola.
U class = "forma-inline", li se tagħmel forma tagħna, kif inti tista 'timmaġina, inline.
Allura huwa tfittex ftit aktar bħal dak kellna qabel diġà.
Allura qabel immorru fuq istil il-bqija ta ' il-paġna, xi mistoqsijiet dwar dak li aħna
ma?
Aħna klassijiet biss mehmuża għall-elementi varji tagħna.
U jien ser nuruk aktar *** kif tista ' ċifra barra dak il-klassijiet huma disponibbli.
Aħna mehmuża klassijiet li għandhom ċerti stili.
U li jirrakkonta l-browser kif tqassim tal-paġna użu
Pprovduti stili bootstrap tal.
Kwalunkwe mistoqsijiet mill-udjenza?
>> Tajba s'issa?
Kessaħ.
A lott ta 'l-isfidi ma bootstrap huwa biss
jafu liema komponenti huma disponibbli u kif tuzahom.
U li hija kollha tgħallmu b'esperjenza u wkoll
permezz qari dokumentazzjoni, li aħna ser nitkellmu dwar dalwaqt.
Allura aħna għandna dan div.
Huwa biss boring, ħaġa antika.
Aħna rridu li jenfasizzaw qualche.
Għalhekk fl bootstrap, hemm ħafna komponenti disponibbli.
U dan huwa getbootstrap.com.
Huwa ta 'referenza utli ħafna.
Fiha affarijiet like-- hawnhekk kif inti tagħmel buttuna.
U inti tista 'tagħmel bars nav, inti tista tikketti, inti tista 'progress bars,
inti tista 'tagħmel gruppi lista.
Bażikament, huwa kull tip minnkom tista 'tara web page.
>> Hawn wieħed li aħna ser nippruvaw dritt issa.
Huwa sejjaħ panel.
Jekk inti qatt tuża Google Issa, dawn għandhom cards.
Jew kwalunkwe mezz Android għandha karti.
Huma għandhom kaxxi ftit abjad li jkollhom Jittieħed ġewwa ta 'dan.
U hekk aħna qed tmur biex tipprova tagħmel li lilna nfusna hawn tuża xi ħaġa
imsejħa panel.
Mela jekk aħna nagħtu class = "bord panel default "li div barra tagħna,
allura aħna nagħtu klassi div = - ejja biss jiċċekkjaw din id-dokumentazzjoni.
klassi div = "panel intestatura" u imbagħad div class = "-korp pannelli".
Għal darb'oħra, ma joqogħdu jinkwetaw dwar memorizing dan il-kodiċi.
Din se tkun disponibbli onlajn.
>> Allura għamilna dan u issa boring tagħna, qodma div jiddawwar dan sbieħ, karta ftit.
Hija għandha ikkuttunar sbieħ, huwa għandha fruntieri, jispikka
mill-bqija tal-paġna, li huwa pjuttost jibred.
Mela ejja jmorru fi u tbiddel dan Get direzzjonijiet buttuna biex tfittex sbieħ.
Min fl-udjenza trid tgħid me dak I tista 'tagħmel biex il-buttuna
biex jagħmluha ħarsa sbieħ tuża bootstrap?
Iva?
>> UDJENZA: Aħna tista 'żżid klassi.
U nistgħu nagħmlu class = "BTN BTN-primarja".
Neel Mehta: Iva.
Hemm mazz ta 'ieħor kuluri disponibbli għall buttons--
jew għal xi ħaġa, għall dik il-kwistjoni.
Nistgħu nagħmlu BTN-periklu u jagħmilha aħmar.
Hemm immorru.
Nistgħu nagħmlu BTN-suċċess li jagħmilha ħodor.
Nistgħu nagħmlu BTN-info-- hemm mazz ta 'affarijiet li huma disponibbli lilek.
So I jkollhom ftit sfida għalik issa.
Allura hemm ħaġ'oħra li jien ħallew un-styled.
Dan Ristoranti Top.
>> U aħna tixtieq li tuża xi ħaġa imsejħa grupp lista stil lilha.
Allura sfida tiegħi lilek hija mur fuq getbootstrap.com--
I ser pull it up here.
getboostrap.com.
Mur fil getbootstrap.com, isibu l- taqsima fejn imorru fuq gruppi lista.
U tkun taf tara hawn xi eżempju u l-klassijiet dritt
li tista 'tuża biex tagħmel tiegħek listi fi dawn il-gruppi lista sbieħ.
Dawn huma maħduma eżempji ta 'eżempji kodiċi, dak
kodiċi tuża, dak HTML code tuża, u dak li outputs.
>> Allura sfida tiegħi biex you-- mur fuq getbootstrap.com,
jekk int hawn jew id-dar, u li tipprova u żid stili għal dan ul
biex jagħmluha ħarsa sbieħ.
U l-użu stil grupp lista.
Inti tixtieq li tieħu ftit minuti, u tfittex il-dokumentazzjoni,
Ipprova dan infuskom?
Għaliex kif inti qed tagħmel web iżvilupp, inti ser tirrealizza ħafna xogħol tiegħek
se tkun qari din id-dokumentazzjoni.
So I think huwa tajjeb biex jiffamiljarizzaw ruħhom ma 'kif jaqraw dokumentazzjoni,
kif biex insemmu x'hemm fejn, dak Kodiċi eżempji tista 'tuża,
dak li inti tista 'lieva.
>> Għalhekk għal darb'oħra, getbootstrap.com, mur l-tab Komponenti,
u mbagħad iscroll biex Lista Grupp.
U tkun taf tara eżempji ta 'kodiċi li inti tista 'tuża biex tagħmel HTML tiegħek tajbin dan.
Sabiex jieħdu ftit minuti u jippruvaw u tesplora it yourself,
jekk int hawn jew id-dar.
Jekk int fid-dar, nieqaf-video, forsi, u jippruvaw it out yourself.
Jekk int hawn, jekk inti tmur biex tagħna website-- jekk inti jġedded il-paġna,
tkun taf tara dan fuq hemmhekk.
Dan ħafna istess kodiċi huwa biss żżid stili ġodda hemm dritt.
Allura tieħu ftit minuti.
Let me know meta tkun qed tħossok tajjeb dwar dan jew meta int totalment mitlufa.
Ħoss tajba?
Kessaħ.
Quick aside għal dawk minnkom fid-dar, filwaqt li aħna qed jistennew,
jekk inti tmur fuq is-sit GitHub li nressaq up pjastri a ilu,
lejn il-bidu tal-video, I jkollhom repo GitHub, repożitorju,
għal dan talk.
Kollha dawn l-eżempji kodiċi li aħna ser tkun jitkellem dwar huma maħżuna dritt hawn.
Mela jekk inti tmur biex jikkontesta-1.html, dan huwa l-kodiċi li għandna dritt issa
fuq CodePen tagħna.
Allura inti tista 'biss tmur quddiem, u kopja dan, u paste fil CodePen tiegħek stess.
U il-mod, inti tista 'żżomm up ma 'dak li aħna qed tagħmel hawn.
Allura jkollhom din il-paġna miftuħa kif ukoll aħna jgħaddu mill-bqija tas-seminar.
Għal darb'oħra, inti tixtieq li look like dak li tara stabbiliti fuq il-qiegħ tal-iskrin tiegħek
hemmhekk.
Tħossok tajjeb?
Solidu.
Ejja stenna għal kulħadd biex jispiċċaw ma 'dak li qed isir.
>> Iva?
>> UDJENZA: Ejja ngħidu li xtaqt għall-użu bootstrap fil home--
Neel Mehta: Iva.
UDJENZA: Nara, fuq il-websajt, il Getting Started paġna.
Huma jagħtu me l-għażliet Bootstrap, Sors Kodiċi, jew Sass.
Liema minn dawn irrid?
>> Neel Mehta: Iva.
Għalhekk il-kwistjoni hija, kif tista 'tikseb bdew jużaw bootstrap mill nfusna?
Dan jiġri biss li magically jaħdmu dritt hawn.
Mela jekk ikollna ħin l-aħħar tas-seminar,
I ser nuruk kif tista ' ġġibu fuq il-paġna tiegħek web stess.
Bħal hawn, stajt attwalment jitqiegħdu f'xi settings li
se jkollhom dan awtomatikament mgħobbija, imma jien ser
juru li inti tagħmel dan mill scratch fuq il-paġni web tiegħek stess.
>> UDJENZA: Grazzi.
>> Neel Mehta: Iva.
Tajba kwistjoni.
Tħossok tajjeb?
Tħossok tajjeb?
Kessaħ.
Hekk li trid għidli kemm huma jkunu għamlu dan il-ħaġa tfittex sbieħ u Boostrappy?
X'inhu l-ewwel klassi aħna żid mal-ul?
UDJENZA: class = "-grupp lista".
Neel Mehta: Iva. Lista grupp.
U allura dak li aħna jagħtu lill-pendens?
Xi ħadd ieħor?
UDJENZA: U mbagħad, wara li, class = "-grupp lista partita".
>> Neel Mehta: Iva.
>> UDJENZA: U huwa l- istess għall-wieħed li jmiss.
>> Neel Mehta: klassi LI = "-grupp partita lista".
Hemm inti tmur.
Għandna grupp tagħna lista sbieħ, bħad kellna mistenni.
Allura hemmhekk inti tmur.
Fil-10 minuta, għamilna dan boring, Yalp antiki! paġna
tfittex sbieħ u professjonali.
U dan huwa biss il-bidu.
Allura issa li tħoss tajba dwar dan, ejja
biss jimxi 'l quddiem u jitkellmu dwar komponenti koppja aktar li
jista 'jidħol fil handy kif inti mur matul avventura tiegħek.
>> Naturalment, hemm xi dawk lott hawn.
U issa li int stajt tgħallmu kif jagħmlu gruppi lista,
inti tista 'pretty ħafna jgħallmu yourself kif jagħmlu xi wieħed minn dawn.
Imma, naturalment, ejja biss jippruvaw u jagħmlu koppja aktar nfusna,
biss sabiex inti tikseb jħossu għall kif inti tista 'tużahom.
Jien biss se jmorru li dan l-eżempju hawn.
Għal darb'oħra, il-kodiċi li jien biss pasted fil hawn huwa disponibbli dritt hawn.
Hekk li tħossok liberu li jiġbdu it up.
>> Allura konna diġà għaddew minn ftit dawn l-eżempji.
Allura aħna għandna buttuni, li aħna kienu diġà raw kif jagħmlu.
Nistgħu nagħmlu buttuni akbar.
Billi buttuna class-- tmur, BTN BTN-lg u BTN-default jagħmilha abjad.
Allura dan jagħmel buttuna tagħna akbar milli kieku jkun.
Hija jista 'jidħol fil handy, jekk għandek big buttuna issottometti jew xi ħaġa.
Rajna l-eżempju grupp lista, rajna l-formola eżempju.
>> Wieħed wieħed importanti ħafna huwa ikoni.
U ikoni huma mod għalik biex iżżid affarijiet interessanti, bħal kontroll check
marki, jew pluses, jew ħabib ikoni, jew ikoni jerġa 'jibda,
jew li tkun lil app web tiegħek.
Għalhekk għal darb'oħra, jekk aħna fil hawn, il-komponenti, glyphicons,
huma l-ikoni disponibbli għall bootstrap.
Hemm xi eżawrjenti lista ta 'dawk kollha hawn.
Hekk biss bħala eżempju, ejja jippruvaw u żid waħda.
>> Allura bħal Facebook, aħna qed jippruvaw biex li jkollhom buttuna Żid Friend.
Ejja ewwel żid ftit stil.
klassi buttuna = "BTN-BTN suċċess".
U hemm immorru.
Ejja żid ikona hawn.
What icon, taħseb, jista 'jagħmel sens li jpoġġu hawn?
You ħadthom probabbilment jidhru fuq xi paġni web jew ikun x'ikun,
imma dak l-eżempju ta 'ikona li jista 'jmur sew ġewwa din il-buttuna?
Ħossok liberu li jibbrawżjaw din il-fehma, jekk għandek bżonn xi ispirazzjoni.
Hemm ħafna ta 'utli dawk disponibbli hawn.
Iva?
>> UDJENZA: Forsi l-waħda utent glyphicon?
Neel Mehta: OK.
Dan wieħed.
Li pjuttost tajba.
Iva.
Fuq Facebook, naħseb li se tfittex ftit bħal dik.
Allura hawnhekk kif aħna tmur dwar żżid ikoni għall-paġni tagħna.
Aħna biss ikollhom span-- medda hija kontenitur newtrali għal xi ħaġa.
A div huwa kontenitur għal xi ħaġa, medda hija kontenitur ieħor.
divs jkollhom linja pawżi madwarhom, tifrex ma.
Allura hemm modi differenti ta ' li l-kontenituri ġeneriċi.
Bħal ma jagħmilx sens li tqiegħed lilha ġewwa ta 'paragrafu jew xejn.
Imxejna ltqajna biex tqiegħed lilha ġewwa xi ħaġa għalkemm,
hekk aħna biss jitqiegħed ġewwa ta 'span.
Allura klassi span = glyphicon utent glyphicon "medda qrib.
U issa għandna l- ikona ġewwa l-buttuna.
>> Allura ma tfittex għal kollox b'differenza dak li inti tista 'tara fuq facebook.com.
U dan huwa sbieħ li dawn jistgħu attwalment jitqiegħed kullimkien tixtieq.
Fil-bars header tiegħek, fi gruppi lista tiegħek.
Tkun xi tkun.
Ma għandhom ikunu ġewwa ta 'buttuna.
Allura bħala eżempju, nista ' tpoġġi l-istess klassi hawn.
"utent glyphicon glyphicon".
U jidher biss l-istess.
Allura dawn icons-- tista 'tuża l-medda class = "glyphicon glyphicon-x'ikun".
U li se let inti żid ikoni fejn trid.
U ikoni huma importanti ħafna parti mit-teħid ħarsa website
professjonali u isir ukoll.
Allura ma overdo dan, iżda huwa spiss ħaġa tajba li tkun taf.
>> Panels, għal darb'oħra.
I ser biss tagħmel dan mill-ġdid bħala terġa għaliex qed tip ta 'involut.
Int ser ikollok avviż li fil tidwir HTML normali tiegħek
sit fi bootstrap-afied sit, inti ser ikollok
li żżid istruttura żejjed għall-websajt.
Per eżempju, aħna għandna żejda DIVs hawn biss minħabba dawk
huma meħtieġa biex jagħmlu panel.
Hekk biss iżommu dan f'moħħhom li inti ser ikollok jkollhom struttura żejda.
Allura "panel 'panel default".
Forsi huwa panel header.
Naħseb li huwa panel intestatura.
Iva.
Hemm immorru.
Allura, għal darb'oħra, hemm panel tagħna.
>> Ħaġ'oħra li aħna ma kinux ikopru għadhom, tabelli.
Tabelli, awtomatikament ħarsa tip ta ikrah.
Bħal dan.
Iżda tabelli huma, naturalment, parti importanti ħafna
ta 'dak li inti se tagħmel fil-web iżvilupp.
Fil Pset7, per eżempju, CS50 Finanzi, li se toħroġ dalwaqt,
inti ser tuża ħafna ta 'tabelli.
U ħafna web DEV jużaw ħafna ta 'tabelli li juri informazzjoni,
bħal ħażniet, jew punteġġi, jew ikun x'ikun.
>> Allura grafika tabelli huwa attwalment faċli ħafna.
Inti żid il-klassi tabella għall-mejda tiegħek.
U, I DARE ngħid, jidher pretty sbieħ.
Tista 'tagħmel affarijiet żejda, bħal "mejda mejda strixxat".
U tkun taf tara r-riżultati hawn.
Tista 'tagħmel mdawwar-tabella.
Hemm ħafna ta 'għażliet tista'.
Imma bażikament, li żżid tabella, il-klassi tal-mejda,
se tagħmel tabelli tiegħek ħarsa pretty sbieħ.
Allura dak telqa qasira ta ' xi wħud mill-istili aktar importanti
u komponenti tkun taf bżonn jużaw għall bootstrap.
Hekk naħseb li garżi up parti sabiħ tagħna.
Kwalunkwe mistoqsijiet dritt issa dwar kif biex il-websajts tiegħek beautiful?
Kif tista 'tuża dawn komponenti għall-vantaġġ tiegħek?
Tħossok tajjeb?
Iva?
UDJENZA: Forsi dan hija kwistjoni iblah,
iżda tista 'tuża bootstrap fuq il-Wikipedija?
Jekk inti qed editjar paġna Wikipedija?
Neel Mehta: Iva.
Għalhekk il-kwistjoni kienet, jien editjar paġna Wikipedija,
nista jinkludu stili bootstrap fil hemmhekk?
>> UDJENZA: Iva.
>> Neel Mehta: U għalhekk bootstrap hija bażikament folja kbira stil CSS.
A karta tal-istil CSS biss jgħid, kull meta Għandi din il-klassi, ehmeż dawn l-istili.
Allura l-karta tal-istil CSS għall bootstrap se tkun xi ħaġa bħal .btn,
il-klassi buttuna, se tikseb bħal transkonfinali kantuniera tond jew ikun x'ikun.
Allura bażikament, bootstrap hija biss mazz ta 'klassijiet u mazz ta' stili
speċifikata għal dawk il-klassijiet.
Dan sakemm ikollok dak CSS, din il-lista ta 'regoli paġna tiegħek,
inti se tikseb l-grafika bootstrap.
Dan huwa, naturalment, jiddependi fuq li l-istili bootstrap fil-paġna tiegħek
li tibda bil.
>> U għalhekk fil-Wikipedija, inti probabilment ma setgħux
tagħmel dan minħabba Wikipedija ma jkollux bootstrap fiha.
Iżda jekk dan kellu bootstrap, inti probabilment tista 'tagħmel dan.
U jekk int riedu, inti tista jinkludu, iżda li jista
jiksru it-tqassim attwali tal-paġna.
Iżda Mistoqsija tajba ħafna.
Tista 'tuża bootstrap kull fejn huwa inkluż,
iżda mhux mibnija fil-kontumaċja.
>> UDJENZA: Grazzi.
>> Neel Mehta: Iva.
Kwalunkwe mistoqsijiet aktar?
Iva.
Mela jekk int hawn jew id-dar, biss ftakar getboostrap.com-- mill-ġdid,
getboostrap.com-- huwa ħabib tiegħek.
Kull meta inti qed tuża Bootstrap, dan se jagħtik
istruzzjonijiet dwar kif tikseb beda, kif tuża komponenti.
Hemm xi JavaScript jibred plug-ins li aħna mhux se jmorru fuq hawn,
iżda dawn qed jiswew ikkontrollar out ukoll.
Allura dan huwa ħabib tiegħek.
Huwa biss importanti li tikseb użati biex kif tuża dan.
>> Mela ejja chat ftit dwar jagħmlu websajts li jirrispondu.
So kif għidt qabel, nies użati laptops tagħhom, huma jużaw mowbajls tagħhom.
U kif inti tista 'timmaġina ukoll, dan huwa daqs ta 'screen differenti ħafna minn dik.
U għalhekk l-istess websajt li jidher tajjeb fuq il-mobile tiegħi
mhux se nagħtu ħarsa tajba, neċessarjament, fuq kompjuter.
Allura dak li għandek tagħmel hu tagħmel website tiegħek jadattaw.
Hija għandha biex jadattaw għall-varji screen daqsijiet li huwa fuq.
>> Għandu jingħad, I know jien fuq kompjuter, laptop big, I għandhom jespandu.
Naf jien fuq telefon, I għandhom tiċkien.
U hekk bootstrap tipprovdi xi ħafna, għodod utli ħafna biex jagħmlu dan.
Mela bootstrap ejja inti break websajt fi 12 kolonni.
Inti tista 'tagħmel ringieli u jkollhom 12-kolonni.
U inti tista 'partizzjoni dawk madankollu trid.
Inti jista 'jkollhom waħda, ħaġa kbira, li huwa 12 kolonni wiesgħa.
Inti jista 'jkollhom żewġ affarijiet li huma sitta kull.
Tista 'tagħmel ħaġa waħda li erbgħa, wieħed li tnejn, jew wieħed li sitt.
Tista 'tagħmel tliet, tliet, tliet, tlieta.
Tista 'tagħmel dak kollu Tqassim li tixtieq.
>> Allura forsi web page tiegħek jeħtieġ li jkollu kolonna tax-xellug thats terz il-wisa.
Allura li kien ikun erba 'kolonni wiesgħa u l-bqija tal-paġna
Ikun tmien kolonni wiesgħa.
Allura dan huwa eżempju.
Ejja pull up eżempju ieħor.
>> UDJENZA: Does dejjem għandhom ikunu diviżjoni uniformi?
Jista 'jkun ta' seba ', ħames maqsuma?
>> Neel Mehta: Iva.
Dan jista 'jkun seba', ħamsa.
Iva.
Sakemm hija żżid sa 12, huwa multa.
Mela ejja jmorru lura hawn.
Għal darb'oħra, il-kodiċi li hawnhekk huwa wkoll disponibbli hawn,
taħt eżempju jirrispondu.
So I biss jinġibed up xi Eżempju kodiċi jirrispondu hawn.
Allura inti tagħmel dan billi tuża ħaġa imsejħa filliera.
Ringiela huwa biss klassi oħra.
Huwa stil ieħor inti żid fuq tiegħek DIVs biex jagħmluhom komponenti tagħhom stess.
>> Allura inti tgħidli, div class = "ringiela" biex tagħmel konsekuttiva,
biex tagħti lilek innifsek 12 kolonni ta 'spazju.
U allura inti tpoġġi kolonni ġewwa ta 'dan.
Allura hawnhekk għandna col-xs-6.
Ma joqogħdu jinkwetaw dwar il-xs.
Aħna ser jitkellmu dwar fil taqs.
Imma bażikament, aħna għandna waħda ħaġa li hija sitt wiesgħa.
Aħna sejħa hija ***ħalla.
U għalhekk dak l-kaxxa tax-xellug hawn.
Għandna ħaġa waħda li hija sitta mill-12-il kolonni wiesgħa.
U li wieħed ikun fuq il-lemin.
>> ukoll biss jagħti jagħmel div tiegħek jimlew it up griż.
Allura dan huwa biss sabiex inkunu nistgħu tara li dawn qed distinti.
U għalhekk dan l-ewwel eżempju.
Dan huwa eżempju sempliċi ħafna ta 'kif inti tuża ringieli tiegħek u kolonni hawn.
Inti tiddefinixxi ringiela użu ta 'klassi = "ringiela".
U allura inti tagħmel klassi = "-XS col-6" do nofs, "col-xs-6" biex tagħmel l-nofs l-ieħor.
Hawn eżempju aktar ikkumplikat.
Ejja nħarsu lejn l-ċkejkna, Enormi, Il-bqija wieħed.
>> Nistgħu nagħmlu Ċkejkna żewġ kolonni wiesgħa, nistgħu nagħmlu Enormi sitt kolonni wiesgħa,
U l-bqija erba 'kolonni kollha.
Li żżid sa 12.
U hekk dawn jispiċċaw jifirxu l-wisa 'tal-paġna.
Għal darb'oħra, aħna għandna filliera ta 'barra.
Imbagħad għandna div class = "col-xs-2" u mbagħad 6, u mbagħad 4.
U li se tipprovdi l-istruttura għalina.
U hekk aħna tista 'tpoġġi x'ikun l-Heck li rridu ġewwa hawn.
Minflok Tiny, nistgħu npoġġu buttuna.
klassi buttuna = "BTN BTN-primarja".
U hekk tinnota li buttuna tagħna ma jeħdux l-wisa ',
iżda mill-inqas huwa ristrett li dak l-ispazju ħafna.
>> Allura li kollox sew u tajjeb.
Allura nistgħu issa ikissru web tagħna paġna 'biċċiet, wisa għaqli.
Nistgħu ngħidu li rridu li jkollhom xellug kolonna, u kolonna tal-lemin, u l-bqija.
Iżda aħna ma marret fuq kif inti jippermettuh jirrispondi.
U hekk bootstrap ejja tagħmel dan ukoll.
Hija għandha dawn l-affarijiet imsejħa breakpoints.
Għalhekk għandu mod sabiex tkun taf jekk int fuq laptop, int fuq pillola,
int fuq orizzontali telefon, jew int fuq telefon vertikali.
Hija jaf il-daqs ta 'screen.
U pawżi dan f'erba categories-- kbar jew lg, li huwa laptops, normalment.
md jew medju, li huwa pilloli.
sm, żgħar.
Jew xs, extra żgħar.
U hekk meta inti tispeċifika kolonna, inti tgħidli,
għandu jkun ta 'sitt kolonni wiesgħa fuq apparat żgħir żejda.
C'est pourquoi aħna ma col-xs-6.
Aħna qed tgħid li suppost jkun sitta mit-12-kolonni wiesgħa
fuq apparat żgħir żejda.
U jekk huwa xejn akbar, aħna ser biss default għall-użu tad-daqs żgħir żejda.
Jekk huwa xi ħaġa akbar minn żgħar żejda, dan ser ikun sitta wiesgħa.
U hekk aħna tista 'lieva dawn biex jagħmlu mill-kolonni tagħna
jieħdu ammont differenti ta ' kolonni bbażati fuq id-daqs iskrin.
Ejja ħa mmorru għal dan ristrutturazzjoni jirrispondu.
Allura aħna għandna kolonni tagħna.
U jgħid, "col-lg-6 col-xs-12".
Allura meta jitqies dak li taf s'issa, liema do inti
think se jiġri fuq skrin kbir?
Ukoll, huwa tip ta ' tingħata mod, imma dak do
taħseb li se tħares bħal fuq skrin kbir?
U għaliex huwa li?
>> UDJENZA: Huwa minnu li fuq big screen, huwa
ser jieħu biss porzjon tal-ispazju sħiħa?
Bħal nofs ta 'dan, I raden?
>> Neel Mehta: Iva.
>> UDJENZA: U fuq iżgħar screen, li għaddej
biex jieħdu l-iskrin kollu, il-12.
Neel Mehta: Iva.
Dritt.
Allura bħala eżempju, ejja biss ħarsa stabbiliti hawn.
Iva.
Allura fuq xi ħaġa li hija lg jew bigger-- hekk kompjuter tiegħi jiġri
li jiġu lg għaliex dan huwa pretty wide-- hija ser tagħmel
dan ġenb xulxin, għaliex dan huwa 'col lg-6.
Allura għaliex dan huwa fuq kbar, jagħmilha sitt kolonni wiesgħa u sitt kolonni kollha.
Ejja naraw x'jiġri jekk I jagħmlu dan fi wieħed iżgħar.
Jien biss ser screen un full dan.
U jien ser tiċkien l-iskrin.
Jien ser tiċkien l-iskrin, u għalhekk Dehra I am fuq mezz iżgħar.
So I m ser tiċkien dan bħal dan.
>> U voila.
Issa huwa f'munzelli għaliex issa aħna marru
minn to-- kbar dan huwa probabbilment daqs skrin żgħir żejda.
U hekk issa jgħid, OK, aħna mhux qed fil-kbar, aħna qed fl-art żgħir żejda.
Allura aħna qed tmur għall-użu id-daqs żgħir żejda.
U aħna qed tmur biex xs-12, xs-12.
Allura li għaddej biex jitqiegħdu f'munzell.
U biss avviż li hemm ħaġa imsejħa breakpoint.
A breakpoint huwa fejn inti għamlu t-tranżizzjoni
minn żgħar żejda għall-intrapriżi żgħar, żgħar għall-kbar, u l-bqija.
>> Hekk biss tinnota li bħala I slide dan out, eventwalment, inti ser jasal sal-punt
fejn dawn ser jaqbżu tkun ħdejn xulxin.
Hemm inti tmur.
Allura hemm il-breakpoint hemm dritt.
Allura nistgħu nagħmlu aktar kumplikata.
Issa nistgħu ngħidu, dawn affarijiet għandhom ikunu erba wiesgħa.
Dan huwa, huma għandhom jieħdu madwar terz
tal-diskors dwar l-apparati kbar ħafna.
Fuq it-tagħmir medju, hija għandha tieħu nofs l-iskrin, għaliex dan huwa MD-6.
Fuq apparat żgħir ħafna, hija għandha tieħu up 12.
U hekk dan jistenna pretty naturali.
Ejja biss jippruvaw dan out għalina.
>> Allura fuq skrin kbir, dawn qed erbgħa wiesgħa.
Shrink hija daqsxejn ftit.
U issa sitta huma wiesa.
Allura dan huwa sitt, sitt, sitt.
Tiċkien saħansitra aktar u mbagħad dawn se jkunu totalment f'munzelli.
Allura dan, per eżempju, jagħmel sens jekk int wara cards, bħal karti aħbarijiet,
Pereżempju, fejn jekk huwa fuq skrin kbir ħafna,
huwa OK jekk għandek ġenb ma 'ġenb diversi għaliex dawn kollha se tikseb biżżejjed spazju.
Iżda, jeħtieġ li jkollhom biżżejjed spazju.
Allura fuq skrin iżgħar, youd tixtieq li jagħtuhom
aktar spazju, proporzjonalment, tal-paġna.
>> Allura bħala eżempju dinja reali, ejja ngħidu li għandna Twitter.
U aħna għandna kaxxa ta 'test, sabiex inti tista 'tweet fuq il-ġenb.
U għandna lista ta trending suġġetti fuq il-lemin.
Allura fuq skrin kbir, għandna jaraw li dawn ikunu ħdejn xulxin,
sabiex inti tista 'tara minnhom bi ħġieġ.
Imma fuq skrin iżgħar, għandna nagħmlu 12 u 12,
b'tali mod li s-suġġetti trending huma taħt iż-żona tweet.
Għaliex il-medda tweet huwa l- ħaġa prinċipali u fuq skrin żgħir,
is-suġġetti trending ma kwistjoni pjuttost kemm.
U hekk aħna jqiegħdhom dritt taħt, sabiex li jistgħu t-tnejn jiksbu biżżejjed spazju.
Jagħmel sens s'issa?
>> UDJENZA: Iva.
>> Neel Mehta: Solid.
Allura dak l-eżempji għandi hawn.
Ejja tipprova tagħmel sfida.
Għalhekk għal darb'oħra, dan huwa sfida 2.html għall dawk minnkom li ġejja flimkien fid-dar.
Allura buddy tiegħi, Mark Zuckerberg, daħal lili l-oħra jum.
U hu simili, Neel, għandi gotten pjuttost tajba fil web disinn.
I tista 'tagħmel l-HTML.
I għamlu dan ftit, jeditjaw ġdid għall Facebook.
I jkollhom idea ġdida għal kemm għandna stil Facebook.
U hawn huwa.
Dritt hawn.
Hawn xi kodiċi eżempju.
Allura huwa msejjaħ Fancybook.
>> Għandna xi aġġornamenti istatus.
Għandna Nemo, Mike Kosowski, ***-- tliet aġġornamenti istatus.
U allura għandna lista ta ħbieb online dritt taħtha.
Allura hu jsir dar tiegħu.
Hu jaf ftit dwar Bootstrap, hu għamel l-opinjoni lista,
huwa għamel xi ftit ta 'HTML.
Għalhekk huwa jkollu l-web page.
Imma hu simili, Neel, jien ma jifhmu disinn jirrispondu fil-livelli kollha.
Għandek xi esperti li jista 'jgħinni ma' dan?
U fortunatament, inti issa esperti fid-disinn jirrispondu.
>> Allura dak hu told me kien li hu trid Fancybook biex teżamina bħal dan.
Fuq apparat żgħir ħafna, bħal telefon, kollox
għandhom jiħarġu, bħal hawn.
Allura inti għandek l-kalendarju bil-quddiem, top up, u mbagħad
għandu jkollok l- bar chat fil-qiegħ.
Iżda fuq pillola jew mezz apparat, għandu jkun nofs u nofs,
bħal fil-kalendarju għandu jkun nofs u l-lista ta 'chat ħbieb
għandha tkun fuq il-nofs l-ieħor.
>> Imbagħad fuq laptop, il-preżentazzjoni kronoliġika għandhom jieħdu tliet kwarti
u allura l-chat hedge għandu jibdew kwart ieħor wieħed.
U hekk hu simili, Neel, I jkollhom din kodiċi hawn, iżda mhux responsivi.
Jeħtieġ li jaġixxu bħal din.
Allura sfida tiegħi lilek jingħata dan il-kodiċi here--
jekk inti jġedded tiegħek CodePens, tkun taf tara dan.
Jew jekk inti biss paste fil-kodiċi on-isfida 2, tkun taf tara dan.
>> Hawn dan l-eżempju kodiċi.
Int ser ikollok tara xi xxxs.
Nixtieq li jibdlu l-xxxs, b'tali mod li il-preżentazzjoni kronoliġika u l-lista ta 'ħbieb
isegwi dawn specs hawn.
Ma joqogħdu jinkwetaw dwar x'hemm ġewwa l-kalendarju għal issa.
Aħna ser tingħata li fil-pass li jmiss.
Iżda għal issa, ejja ara jekk irridu jiksbu dawn l-affarijiet li jaqsmu up bħal dan.
Allura dan jagħmel sens?
Mela jekk int fid-dar, nieqaf l-video u jippruvaw
li tagħmel il-paġna web tiegħek look jirrispondu bħal dan.
Jekk int hawn, jieħdu bħal żewġ, tliet minuti.
Ħossok liberu li chat ma 'ġirien, u jippruvaw, u tiffissa Sur Zuckerberg ta
problema tad-disinn jirrispondu.
Jekk għandek xi mistoqsijiet, tħossok liberu li let me know.
Tħossok tajjeb?
Magħmul?
Nizza.
>> UDJENZA: [inaudible].
Neel Mehta: What?
>> UDJENZA: Ninsab tajba.
>> Neel Mehta: Oh, tajba.
Nizza.
UDJENZA: Il-ħaġa dwar l-12, huwa minnu li bootstrap
tittratta spazju screen mogħti bħala 12 unitajiet madwar u mbagħad jaqsam li up?
Kif eżattament ma l- proporzjonalment xogħol għal dan?
>> Neel Mehta: Iva.
Għalhekk il-kwistjoni hija, kif ma l-proporzjonalment
jaħdmu għal bootstrap, right?
>> UDJENZA: Iva.
Neel Mehta: Allura meta għandek klassi div = "ringiela",
ebda kwistjoni kemm hu kbir l-iskrin huwa, Bootstrap se jtik 12-il unità
tal-istess daqs li jieħdu dak id-daqs ħafna.
Għalhekk fl col 1, huwa dejjem 8.33% tad-daqs tal-iskrin,
jekk din din wiesa jew li l-din wiesa '.
U għalhekk, naturalment, fuq iżgħar screen, kull kolonna hija iżgħar.
Inti xorta jkollhom 12-kolonni wiesgħa, huwa iżgħar.
Allura huwa sa inti biex tiżgura li l-affarijiet jieħdu aktar kolonna,
proporzjonalment, biex tikkumpensa għal dan in-nuqqas ta 'spazju.
Does li jagħmel sens?
>> UDJENZA: Iva.
Grazzi.
Neel Mehta: Tajba kwistjoni.
UDJENZA: Fuq kbir screen, jista 'jkollok
il-preżentazzjoni kronoliġika jieħdu tliet kwarti?
>> Neel Mehta: Iva.
Neel Mehta: Kif guys tħossok?
Tajba?
Kessaħ.
Mela ejja jiġu lura.
U ejja jippruvaw u tiffissa din il-parti tal-websajt Sur Zuckerberg tal.
Allura l-iskedi ta 'żmien huwa up hawn, fil il-quċċata, u l-lista ta 'ħbieb
huwa fil-qiegħ.
U hekk aħna biss ħtieġa li jassenjaw kolonni, bil daqs proporzjonali,
f'kull wieħed minn dawn.
Allura dan l-ewwel *** huwa għall-kalendarju.
Dak klassijiet do nitfgħu fil hawn?
What did you guys tpoġġi fil hawn?
Mela ftakar, fuq skrin kbir, jeħtieġ li jibdew tliet kwarti tal-wisa '.
U iva, liema stil kieku jtik li?
Fuq skrin kbir, tlieta kwarti tal-wisa '.
What do klassi nużaw hemmhekk?
UDJENZA: Allura aħna qed biss se tkun editjar li l-ewwel istanza ta 'klassi.
Neel Mehta: Għal issa.
Iva.
>> UDJENZA: Aħna mhux qed editjar kull wieħed, Karatteristika individwali tal-kalendarju?
Neel Mehta: Mhux issa, mill-inqas.
Allura dan ħaġa sħiħa hija blokk.
Aħna jinbidlu biss il- tfassil tal-blokka.
Allura hawnhekk aħna col-lg-9 għaliex dan huwa disgħa mill-12 wiesa fuq skrin kbir.
U mbagħad fuq skrin medju, kemm kolonni għandi nirċievi?
UDJENZA: Huwa suppost li jkun nofs u nofs.
Neel Mehta: Dritt.
Allura kif ħafna huwa li?
>> UDJENZA: Allura sitt.
Neel Mehta: Sitt.
U mbagħad żgħir żejda għandu be-- jekk jieħu l-wisa 'kollha tal-filliera,
kemm għandu jkun?
UDJENZA: 12.
Neel Mehta: 12.
Iva.
U issa konna ltqajna biex tbiddel dan oħrajn,
sabiex tieħu l-bqija tal-ispazju.
Allura col-lg--
UDJENZA: Huwa ser jieħdu l-iskrin kollu?
Neel Mehta: Huwa jieħu kwart tal-iskrin fuq mezz kbir,
kif aħna wera hawn.
>> UDJENZA: Tliet.
>> Neel Mehta: Tliet.
U mbagħad col--md 6 jieħdu l-bqija tal-ispazju.
col-xs-12.
Allura issa għandna l-kalendarju bidu tliet kwarti
tal-paġna fil-big screen u mbagħad kwart fuq il-ġenb.
U mbagħad jekk id-daqs tal-iskrin isfel, għandu resize xieraq.
Allura huwa f'munzelli issa, fuq skrin żgħir ħafna.
U jekk aħna huwa daqs up ftit, dawn għandhom ikunu eżattament nofs u nofs.
Allura aħna ghamilt li s'issa.
Ħafna jibred.
U hekk aħna mhux se tagħmel l- parti oħra tal-isfida.
Tista 'tagħmel dan yourself.
Imma bażikament, inti għandek jippruvaw jagħmlu dawn jirrispondu
kif well-- jagħmlu l-kalendarju oġġetti, huma stess, li jirrispondu.
Allura issa konna marret permezz kull ma għandek bżonn tkun taf
dwar il-ġenb responsivi tal bootstrap.
Kwalunkwe mistoqsijiet dwar jirrispondu disinn ma bootstrap
u kif inti tista 'tmur dwar kif isir dan?
Iva?
>> UDJENZA: Huwa simili jekk kellna video integrati
u ridna biex jikkontrolla l- iskala li fiha l was-- video
id-daqs tal-video jmorru minn laptop għall-telefon.
Neel Mehta: Iva.
Bejn wieħed u ieħor.
Youd għandek tgħid l-video biex jieħdu bħala ħafna spazju kif huwa mogħti,
li hija ftit annoying kultant.
Imma l-idea qalba hija l-istess.
A video, bħal kull oġġett ieħor fil il-paġna, bħal buttuna jew kwalunkwe,
sakemm inti tuża l- kolonni u ringieli, l
inti tista 'tagħtiha a ċertu ammont ta 'spazju.
U għalhekk jkollna li tonora li huwa Kwistjoni differenti għaliex bħal YouTube
jinkorpora jkollhom ċerta, daqs preferut.
Iżda teoretikament fil inqas, ikun xogħol.
Kessaħ?
>> UDJENZA: I suppose imbagħad, għal immaġni, do you attwalment
jeħtieġ li jkollhom verżjonijiet differenti ta ' l-istess immaġini f'daqsijiet differenti
għall-laptop versus iPhone?
Yeah Il-kwistjoni hija, għandna bżonn li jkollhom immaġini li huma jirrispondu kif ukoll.
U fil-fatt, inti tista 'tagħmel dan.
Naħseb li huwa fl CSS.
Iżda bootstrap tippermetti inti tagħmel dan ukoll.
Inti jista 'jkollhom immaġini li jirrispondu.
Inti jista 'jkollhom immaġini tiegħek resize skond id-daqs tal-paġna.
U hemm xi ħaġa ġdida ħafna HTML5, il-verżjoni aktar ġodda ta 'HTML,
u CSS3, l-aktar ġodda verżjoni ta 'CSS, li
se let inti titlob immaġini differenti ibbażat fuq id-daqs iskrin int fuq.
Normalment, dan huwa tajjeb biżżejjed li biss jkollhom image tiegħek biss jinxtorob jew jikber biex
madankollu big jeħtieġ li jkun.
Iżda int tista ', jekk inti tixtieq li, jkollhom waħda 32 permezz 32
għal skrins żgħar ħafna, u 64 minn 64 għal screen kbir,
u mbagħad jservu dawk selettiv.
Tista 'tagħmel dan.
Dan isir minn xi nies.
Huwa għadu pijunieri pretty.
Iżda risposta qasira, images-- jirrispondu Bootstrap jistgħu jsalvaw il-jum hemmhekk.
Kessaħ?
>> UDJENZA: Grazzi.
>> Neel Mehta: Mela ejja jitkellmu fast reali dwar kif
biex tinkiseb din fil-paġna tiegħek web stess.
Ejja ngħidu li inti tixtieq tagħmel tiegħek website stess jużaw bootstrap.
U hekk ejja biss biss jimxu permezz ta 'dan flimkien.
Ejja ngħidu li inti tagħmel biss paġna normali HTML.
Ħossok liberu li ssegwi tul fil tkun xi tkun editur favoriti tiegħek.
Allura aħna biss għandhom xi paġna HTML.
Nistgħu nagħmlu! Html DOCTYPE.
Dan huwa wkoll html, paġna tagħna.
Xejn ġdid.
We ghamilt dan qabel.
Allura hawnhekk għandna HTML tagħna u nistgħu npoġġu Jittieħed ġewwa hawn.
Jista 'jkollna buttuna tagħna.
U kif għidt qabel, dan mhux neċessarjament sejjer jaħdem.
Għaliex jista din ma jaħdmux?
Għaliex mhux se nikbru tagħna sbieħ, buttuna mlewna?
>> UDJENZA: Għaliex aħna ma rabta għall-proġett bootstrap jew il-fajl?
Neel Mehta: Iva.
Korretta.
Minħabba Bootstrap-- huwa biss fajl CSS fancy.
Huwa sensiela ta 'stili li huma mehmuża ma 'elementi tiegħek.
Hawnhekk konna qal li aħna tixtieq li tuża dawn l-istili.
I ser daqs li sa ftit.
Imxejna qal li rridu użu dawn l-istili, iżda aħna qatt
told dak li l-istili huma.
U dan huwa dak tiegħek kwistjoni lura għal qabel kienet.
Dik hija l-risposta għal din.
Għandna bżonn issib mod biex jiksbu l-istili u jinkluduhom fil-paġna tagħna b'xi.
U rieda sabiex bootstrap juruna kif għandek tagħmel dan.
>> Mela jekk inti tmur għall-quċċata hawn, Getting Started.
Hemm modi differenti li niżżlu.
Dan jista 'ma jagħmilx sens neċessarjament.
Bootstrap-- dan se let inti grab-fajl CSS innifsu.
U inti inkludih fil-paġna tiegħek stess.
Sors Kodiċi hija jekk inti tixtieq Hack fuqha mill yourself.
Inti ma għandekx bżonn dan verament.
Sass hija lingwa li jikkompila fis CSS.
Jaħsbu li bħala Preprocessor.
Ħafna bħal PHP hija Preprocessor ta HTML, Sass huwa Preprocessor għal CSS.
Mela jekk inti tixtieq li tagħmel dan il-mod, inti tista 'tagħmel dan.
>> L-eħfef mod ikun qiegħed juża CDN, jew netwerk tal-kunsinna kontenut.
Huwa websajt li biss jservi up kopja ta bootstrap
malajr ħafna għalik biex jinkludu fil-paġna tiegħek stess.
Allura hawnhekk eżempju.
Hija ser jagħtik dan l-element link.
Element link jgħidlekx browser tiegħek, jieħdu kwalunkwe fajls huma maħżuna hawn
u jinkluduha fil-paġna web tagħna.
U f'dan il-każ, huwa il-fajl CSS bootstrap.
Allura aħna ser biss kopja li URL, jew dak it-test, u aħna ser tarmi ġewwa
tar-ras tagħna.
>> U jien mhux se jibdew il-paġna għal dan, imma int tista 'trust li dan jaħdem.
Il-link inti se tikseb l-CSS.
Jinkludiha fil tiegħek paġna u allura inti ser tkun
jistgħu jużaw kollha ta 'l bootstrap klassijiet li taf u l-imħabba.
Jekk inti tixtieq li jżommha lokalment u jkollhom fuq is-sistema fajl tiegħek
minflok li jmorru lil l-internet biex grab,
bħal jekk inti tixtieq li jużaw il offline sit,
inti tista 'tuża l-għażla Download.
Iżda għall-parti l-kbira, bl-użu CDN huwa pretty fast għaliex dan il-mod,
huwa miżmum aġġornat għalik ukoll.
Int għandek manwalment jaġġornah lanqas.
Jagħmel sens?
>> Allura ħafna ta 'għodod se jkunu mibnija din fil-kontumaċja. Fil Pset7 tiegħek u Pset8,
Nemmen bootstrap hija inklużi awtomatikament.
U fl CodePen, għal eżempju, huwa diġà
għaliex inkluda I miżjud jżidu li setting.
Mela jekk inti qatt tixtieq li play madwar magħha, inti tista 'biss tmur fuq CodePen,
jew mur fuq ID tiegħek, jew ikun x'ikun.
U inti tista 'tkun kapaċi aċċess bootstrap hemm,
iżda mhux dejjem mibnija fil, awtomatikament, lill-web.
Jagħmel sens?
>> Iva.
biss bħala recap-- għandna bħal ħames minuti xellug.
Iżda bħala terġa, fil-paġni web ġdid, inti tista 'tinkludi bootstrap bħal dan.
U ladarba ikollok inkluż, inti tista 'tagħmel l-għalf gost hawn.
Inti tista 'tmur fuq, u inti tista' sempliċement jaqraw b'attenzjoni l-CSS, inti tista 'żżid xi stili jibred,
inti jista 'jkollhom komponenti bħall-buttuni,
u t-tabelli, u l-lista oġġetti li aħna msemmija.
Hemm xi plugins JavaScript jibred, li inti tista 'tixtieq li tesplora.
Huma jżidu xi jibred interattività għall-paġna web.
Bħal dan wieħed jagħmel djalogu modali.
>> Allura hemm xi Jittieħed gost inti tista 'tagħmel ma bootstrap.
Allura parir tiegħi lilek hija jimxi 'l quddiem u tagħmel użu minnu proġetti tiegħek stess,
segwi l-istruzzjonijiet aħna biss ma dwar kif tiksbu,
u aqra biss l bootstrap minħabba inti ser jitgħallmu aktar dwar x'għandek tagħmel.
U hekk aħna ve marret fuq, illum, kif tuża
id-dokumentazzjoni, dak il-bini blokki huma, u kif huwa kunċettwalment.
Allura issa sfida tiegħi lilek hija jagħmlu websajt tuża bootstrap.
Mur fil-docs.
U jużaw l-għodod li konna tgħallmu s'issa biex jippruvaw u parse minnhom
u jifhmu lilhom.
U jużaw dawk stili u għodod inti tara hemm fil-website tiegħek.
U huwa biss kbir, proċess sperimentali.
>> Ipprova l ċertu stil.
Taħdem?
Does li mhux?
Ipprova tqegħid Jittieħed flimkien.
Ara x'jiġri.
Huwa ferm awto iggwidata, proċess iskoperta.
Imma llum, konna tgħallimna l baŜi ħafna ta 'dak li huwa bootstrap?
Għaliex taħdem?
Kif taħdem?
Kif nistgħu jibdew jużaw dan, fl-ewwel post?
U hekk issa li int matul dak hump, inti
għandhom ikunu jistgħu jagħmlu dan pretty bla xkiel mill yourself.
>> Għalhekk għal darb'oħra, l- kodiċi għamilna huwa hawnhekk.
Mela jekk inti qatt tixtieq biex tikseb brush up fuq,
bħal, x'hemm iqarrqu malajr folja għal kulħadd ta 'l-istili?
Inti tista 'tmur fil dan il-kampjun hawnhekk.
Għandna xi eżempju stili hawn.
Jekk inti tixtieq li jippruvaw l- isfidi darb'oħra minnek,
inti tista 'tipprova lilhom hawnhekk u jiċċekkjaw il-soluzzjonijiet.
Allura din ir-rabta se jkun inklużi fil-slides, li
se jintbagħat lilek tal-kors.
Imma hija wkoll up here.
Inti tista nieqaf-video, jekk inti tixtieq.
L-informazzjoni kollha li għandek bżonn huwa se tkun id-dritt hawn, fuq dan is-sit.
Mela jekk xi ħadd ikollu xi mistoqsijiet, nistgħu teħodhom għall-minuti koppja li jmiss.
Inkella, nirringrazzjakom ilkoll ħafna għall-ħars.