Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Pra përshëndetje për kushdo që është shikuar këtu,
ose shikuar në internet, ose nga distanca.
Emri im është Neel, kjo është CS50.
Dhe Seminari i sotëm është i përgjegjshëm Web Dizajn me bootstrap.
Kjo është një temë që është shumë afër zemrës sime.
Shpresojmë, kjo do të jetë afërt për zemrën tuaj
si dhe deri në fund të seminarit të sotëm.
Pra bootstrap.
Sa prej jush e kanë bërë ndonjë lloj i zhvillimit web para?
Një sasi e mirë?
Pak.
>> Pra bootstrap është në botë më popullor, korniza front-end.
Është përdorur by-- unë kam zgjedhur një çift i websites-- rastit
Lyft, Newsweek, dhe Vogue.
Ajo është përdorur nga një numër i faqeve.
Kjo është një kornizë web design që do të ju lejojnë të bëni faqet e internetit tuaj
e bukur dhe të përgjegjshëm.
Dhe unë do të shkoj për këto dy koncepte këtu.
Bukur.
Pra, ju keni faqen e internetit normale në majtë, e cila është bërë nga vetëm HTML.
Ju keni mësuar HTML në klasë dhe në pjesën në gjatësi.
Bootstrap është një mënyrë për të bërë faqet e internetit tuaj të bukur.
Ju mund të merrni atë që është mbi të Krahu i majtë i ekranit tuaj
dhe të kthehet në atë që është mbi Anën e djathtë të ekranit tuaj me shumë,
shumë, kodi shumë pak.
>> Ju merrni butonin e bukur blu, ju merrni dashuroj, rrumbullakuar edges në ekran,
ju merrni listën e parë, ju merrni Kartat, dhe kështu me radhë me shumë pak kod.
Nuk ka në fakt asnjë CSS se ju duhet të shkruani me veten.
Pra bootstrap ju lejon të kanë këto CSS para-ndërtuar
Komponentët ju mund të vënë brenda e faqes tuaj web
për ta bërë atë të duket bukur pa shumë punë në tuaj.
Është me të vërtetë një bootstrap, një pikënisje,
për aventurat tuaja të zhvillimit web.
Dhe kështu, kur ju jeni vetëm tallës e një faqe interneti,
kjo është një vend shumë i mirë për të marrë filluar.
Ju mund të merrni një të mirë në kërkim website me shumë punë, shumë pak.
Dhe me të vërtetë, ne jemi duke shkuar për të bërë këtë veten
në rrjedhën e si pesë minutes-- brenda 10 minutave.
Pra, kjo është goxha e lehtë për të të bëjë disa faqet e internetit të mëdha.
Pra, kjo është pjesa e parë.
>> E dyta part-- përgjegjshëm.
Njerëzit, në ditët e sotme, të bëjë jo vetëm hyrë në web në laptopët e tyre.
Në fakt, që nga vitit 2014, më shumë njerëz hyni në web nëpërmjet pajisjeve mobile,
si telefonat, ose tableta, ose shërbimet ose kështu me radhë se faqet e internetit.
Dhe faqet e internetit kanë qenë tradicionalisht projektuar me laptopë apo Desktop
në mendje.
Dhe kështu faqet e internetit shpesh nuk janë përshtatshme shumë mirë në telefonin tuaj.
Nëse keni vizituar ndonjëherë harvard.edu në telefonin tuaj,
kjo është lloj i një bezdisshëm Përvoja, e drejtë?
Kjo për shkak se ajo nuk është e përgjegjshme.
Ne jemi duke u përpjekur për të bërë faqet e internetit që janë të përgjegjshëm,
që i përgjigjen madhësive të njerëzve ekran.
>> Pra, nëse kjo është një telefon, është do të shkojnë në telefon.
Në qoftë se kjo është një tabletë, është e do të shkojnë në tabletë.
Ajo rregullon për ndeshjen ekran që është duke u përdorur.
Dhe kështu bootstrap gjithashtu ofron disa shumë, shërbimet shumë të dobishme për këtë.
Dhe ne jemi duke shkuar për të diskutuar se si.
Pra, përsëri, ka dy pjesë të Bootstrap-- bukur dhe përgjegjës.
Ne do të flasim për ato.
Së pari, i bukur.
Dhe pastaj të përgjegjshëm.
>> Pra, të gjitha kodi që ne jemi do të flasim për today--
ne do të kemi shumë shembuj, shumë sfida, dhe kështu on-- saj
gjithë jeton në këtë website këtu.
Kjo rrëshqitje është ajo që kemi dërguar jashtë.
Pra, nëse ju jeni këtu, ju mund të ndjeheni lirë nuk duhet të shkruani atë poshtë.
Dhe nëse ju jeni duke shikuar nga distanca, të ndjehen të të lirë për të tërhequr këtë deri në kompjuterin tuaj
gjithashtu.
Ju ndoshta do të duhet atë gjatë kursi i këtij seminari.
>> Pra, ne jemi duke shkuar për të përdorur një Faqja e internetit të quajtur CodePen,
i cili është një kodimi bashkëpunues mjedisit, gjatë këtij seminari.
Dhe CodePen-- dhe unë do të ju tregojnë se këtu vërtetë fast--
kjo ju mundëson për të shkruar HTML bashkëpunim.
Unë mund të shkruaj atë, unë mund të dërgoni atë për të ju djema, ju djema mund ta redaktojnë.
Edhe në qoftë se ju jeni të largët, ju ende mund të hyni në atë në këtë mënyrë.
Ju mund të shtypni kodin HTML në nivel të lartë dhe kjo do të automatikisht
do të konvertohet në të faqe web në fund.
Pra, kjo është një mënyrë për ju të shpejt të provoni kodin
pa pasur nevojë të bëni ndonjë lloj stuff në IDE tuaj, ose vetë web faqen tuaj,
apo çfarëdo.
>> Pra shkoni përpara dhe tërheq lart kjo faqen e internetit, nëse ju jeni të largët
ose në qoftë se ju jeni këtu, veçanërisht nëse ju jeni të largët.
is.gd/cs50boostrap.
Pa kapele, pa nënvizon, nuk ka asgjë.
Pra, ata prej jush që janë këtu, vetëm të më jepni një bravo
deri kur keni tërhequr up këtë web faqe.
Mirë?
>> Audienca: Po.
>> NEEL Mehta: Pra, ne do të merrni me atë në vetëm një të dytë.
Pra, së pari, ne jemi duke shkuar për të marrë në, si A jeni të bëjë faqet e internetit tuaj të bukur?
Ne jemi duke shkuar për të mësuar se si për të marrë mërzitshëm, HTML vjetër, ashtu si unë ju tregoi më parë,
dhe të kthehet kjo në Komponentët vërtetë e bukur,
si Widgets bukur, e bukur, me ngjyra buttons, dhe etiketat, dhe tavolina,
dhe të gjithë, duke përdorur bootstrap.
Pra, nëse ne mund të gjithë të shkojnë mbi të CodePen që ju sapo u tërhoq deri.
Ajo duhet të duken pak si kjo.
E bën atë të duket si ky për të gjithë?
>> Audienca: Po.
>> NEEL Mehta: Nëse ju jeni të largët, atë duhet të duket si ky si.
Nëse jo, unë do të ju tregojnë se si së shpejti ju mund të merrni atë të duket si ky
në një pjesë të ardhmen e video.
Pra, këtu ne kemi shkruar një HTML shumë bazë,
si lloj ju keni përdorur në klasë.
Është mjaft themelore.
Nuk frills.
Dhe ne kemi disa gjëra.
Ne kemi projektuar një shumë, shumë themelore brof
thërrasë Yalp! me të cilat ju mund të gjeni restorante në zonë,
dhe për të gjetur komente, dhe Drejtimet mbi të gjithë ata.
Kjo është një koncept shumë i mirë.
Ajo kurrë nuk është bërë më parë.
Është një emër shumë të veçantë, too.
>> Pra, ajo që ne jemi duke shkuar për të provoni të bëni është të ndihmuar pronarin
i Yalp! të bëjë faqen e tij duken me të vërtetë, me të vërtetë cool.
Pra, për të filluar me të, pronari i Yalp! ka bërë një kërkim të vogël
kuti, dhe një buton të vogël, dhe pastaj ndoshta pak
zonën e theksuar për një restorant theksuar, dhe pastaj
një listë e restorante të tjera që janë në zonën.
Pra, ne mund të shkoni vetëm përmes kodin HTML reale të shpejtë.
Sa rehat jeni ju djema me HTML?
Ne kemi bërë një pak Seksioni dhe gjithashtu në klasë.
Tunelit?
>> Pra, ashtu si një radhitje, HTML është e gjitha në lidhje me të paturit
tags ose elementë që tregojnë kompjuter si për të hedhur jashtë web faqe.
Pra, kjo H1 here-- fillojnë H1, Mirë se vini të Yalp !, fund h1-- tregon kompjuterin,
të nxjerrë një kokë të madhe ajo thotë, Mirë se vini në Yalp!
brenda atje.
Ne gjithashtu kemi forma.
Ne mund të inputeve si ky, inputeve tekst, e cila do të bëjë si kutitë e tekstit
ju shkruani në.
Ju gjithashtu të ketë butona.
Ju merrni një të bukur, buton klikueshme.
Ajo nuk ka të bëjë asgjë të drejtë tani, por ju merrni një buton.
Ju mund të keni divs, apo kompas, për pushim deri faqen tuaj në grupe të ndryshme.
>> Ju mund të keni paragrafëve, ju keni butonat.
Nëse keni paragrafë, pastaj ju keni listat e renditura, ul,
dhe listat brenda e atij, li.
Pra, këto janë shumë themelore Ndërtimi i blloqeve të një faqe interneti.
Dhe me të vërtetë, shumë e shumë çdo faqen e internetit ju shikoni
do të ndërtohet duke përdorur këto mjete të njëjta.
Sigurisht, ata nuk e bëjnë të gjithë shikoni kjo e keqe, sepse ne jemi
duke shkuar për të erëz atë pak.
Pra, le të këtë HTML mërzitshëm të vjetër dhe fillimin transformuar atë në vend të bukur
që ne vetëm e pa minuta një çift më parë.
>> Pra, le të nisem shumë e thjeshtë.
Pra, ne kemi këtë buton këtu.
Në bootstrap, siç e pamë, ne mund të të ketë një të bukur, bukur, butonin e kaltër.
Dhe kjo nuk është bërë nga bërë me porosi CSS.
Nuk ka CSS zakon këtu.
Kjo është bërë duke shtuar nga klasa të elementeve tuaj HTML.
Nëse e keni provuar klasa, apo hrefs, ose anchors, ose tip = "text" për inputs--
Elementet HTML mund të ketë këto atribute.
Ata mund të kenë informacione shtesë që ju mund të jepni atyre.
>> Dhe kështu, në këtë rast, Klasat janë atribut.
Pra, ju do të shkruani, klasë button = diçka brenda strings.
Dhe kjo atribut do të tregojë kompjuter, kjo nuk është ndonjë, buton vjetër.
Është një buton që është në kjo klasë e butonave.
Dhe kështu bootstrap, në qoftë se ju jepni atë një stil të caktuar në elementin tuaj,
ajo do të tërheqë atë një mënyrë të caktuar.
Kështu që unë shkruaj "btn BTN-fillor.
BTN qenë një shkurtim për butonin.
Ju do të vëreni se tani Butoni im shëmtuar kthyer
në një të bukur, i bukur, buton blu.
Ajo duket shumë e bukur kur ne click it.
>> Dhe kështu ajo që ndodh është që ne kemi klasë BTN dhe klasa BTN-fillore
në elementin tonë.
Dhe bootstrap do të shkojnë në dhe të thonë, OK, unë e di se ka këto dy klasa.
Çdo element që ka këto dy Klasat duhet të nxirren si kjo.
Pra, kjo është thelbi i se si ju lidhni Stilet e elementeve në bootstrap.
Ju vetëm të bashkëngjitni klasa për ta dhe ajo do peshe atë si ajo e sheh të arsyeshme.
Kështu që këtu është një tjetër shembull.
Në input, ne mund të shtoni një klasë = "formë-kontrollit".
Dhe unë do të tregoj shpejt ku ju mund të gjeni se çfarë klasa
janë në dispozicion të çdo lloj elementi.
Por klasa që ne vetëm Shtuar ka bukur, qoshe të rrumbullakosura,
ajo ka mbushje të mirë, ajo ka një të mirë, shkëlqim blu me të.
>> Ne gjithashtu mund të shkojnë në këtë formë.
Dhe class = "formë-inline", i cili do të bëjë formë jonë, si ju mund të imagjinoni, inline.
Pra, kjo është duke kërkuar një pak më shumë si ajo që kemi pasur më parë tashmë.
Pra, para se të shkojmë në të stilit pjesën tjetër të faqja, ndonjë pyetje për atë që ne
e bëri?
Ne klasat e bashkëngjitura vetëm për elementet tona të ndryshme.
Dhe unë do të ju tregojnë se si ju mund të më vonë kuptoj se çfarë klasat janë në dispozicion.
Ne bashkangjitur klasa se kanë stile të caktuara.
Dhe kjo tregon shfletuesit si për layout faqe duke përdorur
Ofruara stilet bootstrap-së.
Çdo pyetje nga audienca?
>> Mirë deri më tani?
Ftohtë.
Një shumë prej sfidave me bootstrap është vetëm
ditur se çfarë përbërësit janë në dispozicion dhe se si ti përdorin ato.
Dhe kjo është mësuar të gjithë me përvojë dhe gjithashtu
përmes leximit të dokumentacionit, të cilat ne do të flasim për së shpejti.
Pra, ne kemi këtë div.
Kjo është vetëm një i mërzitshëm, gjë e vjetër.
Ne duam të theksojmë atë disi.
Pra në bootstrap, ka një shumë i komponentëve në dispozicion.
Dhe kjo është getbootstrap.com.
Kjo është një referencë shumë e dobishme.
Ai përmban gjëra like-- këtu është se si ju bëni një buton.
Dhe ju mund të bëni bare nav, ju mund të etiketat, ju mund të përparojë bare,
ju mund të bëni grupet lista.
Në thelb, kjo është të gjitha llojet e ju mund të shihni një web faqe.
>> Këtu është një që ne do të përpiqemi të drejtë tani.
Ajo që quhet panel.
Në qoftë se ju përdorni ndonjëherë Google Tani, ata kanë kartat.
Ose ndonjë pajisje Android ka karta.
Ata kanë kuti të vogël të bardhë që kanë sende në brendësi të saj.
Dhe kështu që ne jemi duke shkuar për të provoni dhe të bëjë që vetë këtu duke përdorur një gjë
quajtur një panel.
Pra, nëse ne i japim klasë = "panel panel-default "për div tonë të jashtme,
atëherë ne i japim një klasë div = - le vetëm kontrolluar këtë dokumentacion.
klasë div = "panel-titulli" dhe pastaj div class = "paneleve-trup".
Përsëri, mos u shqetësoni për memorizimin këtë kod.
Ajo do të jetë në dispozicion në internet.
>> Pra, ne e bëmë këtë dhe tani mërzitshëm tonë, i vjetër div kthyer në këtë bukur, kartë të vogël.
Ajo ka mbushje të bukur, atë ka kufij, ajo qëndron jashtë
nga pjesa tjetër e faqes, e cila është pretty cool.
Pra, le të shkojnë në dhe për të ndryshuar këtë Get Drejtimet butonin për të duken bukur.
Kush në audiencë dëshiron të tregojë mua atë që unë mund të bëj për butonin
për të bërë atë të duket bukur duke përdorur bootstrap?
Po?
>> Audienca: Ne mund të shtoni një klasë.
Dhe ne mund të bëjmë klasë = "btn BTN-fillore".
NEEL Mehta: Po.
Ka një bandë e të tjera ngjyra në dispozicion për buttons--
ose për ndonjë gjë, për këtë çështje.
Ne mund të bëjmë BTN-rrezik dhe të bëjë atë të kuqe.
Atje shkojmë.
Ne mund të bëjmë BTN-sukses për ta bërë atë të gjelbër.
Ne mund të bëjmë BTN-info-- ka një bandë gjëra që janë në dispozicion për ty.
Pra, unë kam pak sfidë për ju tani.
Pra, ka një gjë më shumë që kam lënë OKB-vetëquajtur.
Kjo Restorante kryesore.
>> Dhe ne duam të përdorim një gjë quajtur një grup listë të stilit atë.
Pra, sfida ime për ju është shkojnë për në getbootstrap.com--
Unë do të tërheqë atë deri këtu.
getboostrap.com.
Shko në getbootstrap.com, gjeni seksion ku ata shkojnë mbi grupe të listës.
Dhe ju do të shihni këtu një shembull dhe klasa e duhura
që ju mund të përdorni për të bërë tuaj Listat në këto grupe bukur listë.
Këto janë përpunuar shembuj e shembujve të kodit, çfarë
Kodi ju përdorni, çfarë kodin HTML ju përdorni, dhe se çfarë nxjerr.
>> Pra, sfida ime për ju, duke filluar shkojnë në getbootstrap.com,
nëse ju jeni këtu ose në shtëpi, dhe për të provoni dhe shtoni stile të këtij ul
për ta bërë atë të duket bukur.
Dhe të përdorin një stil grup lista.
Ju dëshironi që të marrë një disa minuta, dhe të kërkoni në dokumentacionin,
provoni këtë veten?
Sepse si ju jeni duke bërë web zhvillim, ju do të kuptojë shumë punë tuaj
do të jetë e lexuar ky dokumentacion.
Kështu që unë mendoj se është e mirë për t'u njohur me atë se si të lexuar dokumentacionin,
si për të kuptoj se çfarë është ku, çfarë kodi shembuj ju mund të përdorni,
çfarë ju mund të levave.
>> Pra, përsëri, getbootstrap.com, shkoni në tab Components,
dhe pastaj lëviz nëpër Lista Group.
Dhe ju do të shihni shembuj të kodit që ju mund të përdorni për të bërë HTML tuaj të përshtaten atë.
Pra, të marrë disa minuta dhe të përpiqet dhe të eksplorojnë vetë,
nëse ju jeni këtu ose në shtëpi.
Nëse ju jeni në shtëpi, pauzë video, ndoshta, dhe të provoni se veten.
Nëse ju jeni këtu, në qoftë se ju shkoni në tonë website-- nëse ju rifreskoni faqen,
ju do të shihni këtë në atje.
Ky kod shumë i njëjtë është vetëm duke shtuar stile të reja të drejtë atje.
Pra, të marrë disa minuta.
Më lejoni të dinë kur ju ndjeheni mirë në lidhje me të, ose kur ju jeni të humbur plotësisht.
Shëndoshë e mirë?
Ftohtë.
Quick mënjanë për ato prej jush në shtëpi, ndërsa ne jemi duke pritur,
në qoftë se ju shkoni në këtë faqe interneti GitHub që kam vënë një çift slides më parë,
drejt fillim te videos, Unë kam një repo Github, depo,
për këtë bisedë.
Të gjithë këta shembuj kodin që ne do të duke folur për janë të ruajtura të drejtë këtu.
Pra, nëse ju shkoni për të sfiduar-1.html, kjo është e gjitha kodi që ne kemi të drejtë tani
në CodePen tonë.
Kështu që ju mund të shkoni vetëm përpara, dhe kopje kjo, dhe ngjitur atë në vetë CodePen tuaj.
Dhe në këtë mënyrë, ju mund të mbani lart me atë që ne jemi duke bërë këtu.
Pra, kanë këtë faqe të hapur, si dhe ne kalojnë nëpër pjesën tjetër të seminarit.
Përsëri, ju dëshironi që ajo të duket si ajo që ju shih poshtë në pjesën e poshtme të ekranit tuaj
atje.
Ndjehem mirë?
Të ngurta.
Le të presim për të gjithë të tjerët të të përfundojë me atë që ata po bëjnë.
>> Po?
>> Audienca: Supozoni se kam kërkuar për të përdorur bootstrap në home--
NEEL Mehta: Po.
Audienca: Unë shoh, në faqen e internetit, T'ia Fillohet faqe.
Ata jepni opsionet Bootstrap, Kodi Burim, ose Sass.
Cila nga këto nuk dua?
>> NEEL Mehta: Po.
Pra, pyetja është, si ju merrni filloi duke përdorur bootstrap nga vetja?
Kjo ndodh vetëm për të magjike të punuar drejtë këtu.
Pra, nëse kemi kohë në në fund të seminarit,
Unë do të ju tregojnë se si ju mund të marrë atë në vetë faqen tuaj web.
Si këtu, unë kam në fakt vënë në disa cilësimet që
do të keni atë automatikisht ngarkuar, por unë do të
tregoni që ju të bëni atë nga zeroja në faqet tuaja web.
>> Audienca: Ju faleminderit.
>> NEEL Mehta: Po.
Pyetje e mirë.
Ndjehem mirë?
Ndjehem mirë?
Ftohtë.
Pra, kush dëshiron të më tregoni se si ata e bëri kjo gjë duket bukur dhe Boostrappy?
Çfarë është klasa e parë që ne të shtoni në ul?
Audienca: class = "list-grup".
NEEL Mehta: Po. list-grup.
Dhe pastaj çfarë ne i japim me lis?
Dikush tjeter?
Audienca: Dhe pastaj, pas se, class = "list-grup-pika".
>> NEEL Mehta: Po.
>> Audienca: Dhe kjo është njëjtën gjë për një tjetër.
>> NEEL Mehta: klasë li = "list-grup-pika".
Nuk ju shkoni.
Ne kemi grupin tonë të bukur listë, ashtu si kishim pritur.
Pra shkoni atje.
Në 10 minuta, ne kemi bërë kjo mërzitshëm, Yalp vjetër! faqe
duken bukur dhe profesional.
Dhe kjo është vetëm fillimi.
Pra, tani që ju mendoni mirë për këtë, le të
thjesht shkoni përpara dhe të flasim për një çift shumë komponentë që
mund të jetë në dispozicion si ti shkoni në të gjithë aventurën tuaj.
>> Sigurisht, ka një ato shumë këtu.
Dhe tani që e keni mësuar si për të bërë grupet lista,
ju mund të pretty much të mësojnë veten si për të bërë ndonjë nga këto.
Por, natyrisht, le të vetëm të përpiqemi dhe të bëjë një çift më shumë veten,
vetëm kështu që ju të merrni një të ndjehen për si ju mund të përdorni ato.
Unë jam vetëm duke shkuar për të shkuar në këtë shembull këtu.
Përsëri, kodi që unë sapo ngjit këtu është në dispozicion këtu.
Pra, të ndjehen të lirë për të tërhequr atë.
>> Pra, ne kemi shkuar tashmë përmes disa nga këto shembuj.
Pra, ne kemi butonat, të cilat ne kemi parë tashmë se si për të bërë.
Ne mund të bëjë buttons më të mëdha.
Duke buton class-- ajo shkon, btn BTN-lg dhe BTN-parazgjedhur e bën atë të bardhë.
Pra, kjo e bën buton jonë më e madhe se ajo mund të jetë ndryshe.
Ajo mund të jetë në dispozicion, nëse keni i madh submit button apo diçka.
Ne pamë shembullin grupit lista, ne pamë shembullin formë.
>> Një njeri shumë i rëndësishëm është ikona.
Dhe ikonat janë një mënyrë për ju për të shtuar gjëra interesante, si check kontrollon
shenjat, ose pluses apo shoku icons, icons ose restart,
apo çfarëdo të app tuaj web.
Pra, përsëri, në qoftë se ne në këtu, komponentët, glyphicons,
janë ikonat në dispozicion për bootstrap.
Ka një shterues Lista e të gjitha ato këtu.
Pra, ashtu si një shembull, le të përpiqemi dhe të shtoni një të tillë.
>> Pra si Facebook, ne jemi duke u përpjekur të ketë një buton Shto shok.
Le të parë të shtoni disa stil.
klasë button = "btn BTN-sukses".
Dhe atje ne do të shkojmë.
Le të shtoni një ikonë këtu.
Çfarë ikonë, mendoni, mund të ketë kuptim për të vënë këtu?
Ju ndoshta keni parë në disa faqet e internetit apo çfarëdo,
por çfarë është një shembull i një ikonë që mund të shkojë edhe brenda këtë buton?
Ndjehen të lirë për të shfletoni këtë pikëpamje, në qoftë se keni nevojë për ndonjë frymëzim.
Nuk është një shumë e dobishme ato në dispozicion këtu.
Po?
>> Audienca: Ndoshta një përdorues glyphicon?
NEEL Mehta: OK.
Këtë.
Kjo është shumë e mirë.
Po.
Në Facebook, unë mendoj se do të dukej pak si kjo.
Kështu që këtu është se si ne do të shkojmë për duke shtuar ikona të faqet tona.
Ne vetëm kemi një span-- një hapësirë është një enë neutral për diçka.
Një div është një enë për diçka, një hapësirë është një tjetër enë.
divs kanë thyen linjë rreth tyre, përfshin jo.
Pra, ka mënyra të ndryshme të duke pasur kontejnerët gjenerike.
Ashtu si kjo nuk ka kuptim për të vënë atë brenda një paragraf apo ndonjë gjë.
Ne kemi marrë për të vënë atë brenda diçka edhe pse,
kështu që ne vetëm vënë brenda një hapësirë.
Pra span class = glyphicon glyphicon-user "hapësirë të ngushtë.
Dhe ne tani kemi icon brenda butonin.
>> Pra, kjo nuk duket krejtësisht ndryshe nga Çfarë ju mund të shihni në facebook.com.
Dhe kështu është mirë që këto mund të në fakt të vendoset kudo që ju dëshironi.
Në header bare tuaja, në grupe tuaj listës.
Cfaredo.
Ajo nuk duhet të jetë brenda një butoni.
Pra, si një shembull, unë mund të vënë të njëjtën klasë këtu.
"glyphicon glyphicon-user".
Dhe kjo duket vetëm njëjtë.
Pra, këto icons-- ju mund të përdorni hapësirën class = "glyphicon glyphicon-çfarëdo".
Dhe që do të ju lejojnë të shtoni Ikonat kudo që ju dëshironi.
Dhe ikonat janë një shumë të rëndësishme pjesë e bërë një vështrim website
profesional dhe të bërë mirë.
Pra, nuk e teproj, por kjo është shpesh një gjë e mirë për të dini.
>> Kolegjet, përsëri.
Unë do të bëj pikërisht këtë përsëri si një radhitje sepse ata janë lloj i përfshirë.
Ju do të vëreni se në kthyer HTML tuaj normale
faqe në një bootstrap-afied faqe, ju do të keni
të shtoni struktura shtesë në faqen e internetit.
Për shembull, ne kemi shtesë divs këtu vetëm për shkak se ata
janë të nevojshme për të bërë një panel.
Pra, vetëm mbani në mend se ju do të duhet të ketë strukturë shtesë.
Pra, "panel-default panel".
Ndoshta kjo është panel-header.
Unë mendoj se është panel-titull.
Po.
Atje shkojmë.
Pra, përsëri, nuk është panel ynë.
>> Një gjë më shumë se ne nuk ka mbuluar ende, tavolina.
Tabelat, by default vështrim llojit të shëmtuar.
Ashtu si kjo.
Por tabelat janë, natyrisht, një pjesë shumë e rëndësishme
të asaj që ju do të bëni në zhvillimin e web.
Në Pset7, për shembull, CS50 Financave, i cili do të dalë së shpejti,
ju do të përdorni një shumë të tabelave.
Dhe një shumë e web dev përdorin një shumë e tabelave për të shfaqur informacion,
si aksione, ose rezultatet, ose çfarëdo.
>> Pra, styling tabelave në fakt është shumë e lehtë.
Ju shtoni klasën tryezë në tryezën tuaj.
Dhe, unë guxoj të them, ajo duket goxha e bukur.
Ju mund të bëni gjëra ekstra, si "table table-shirita".
Dhe ju do të shihni rezultatet këtu.
Ju mund të bëni tryezë-kufizohet.
Ka shumë opsione që ju mund të.
Por në thelb, duke shtuar një tavolinë, klasa tryezë,
do të bëjë tavolina juaj të duket shumë e bukur.
Pra, kjo është një i lodhur shkurtër të disa nga stilet më të rëndësishme
dhe komponente ju do të duhet të përdorni për bootstrap.
Kështu që unë mendoj se përfundon up pjesën tonë të bukur.
Çdo pyetje tani rreth asaj se si për të bërë faqet e internetit tuaj të bukur?
Si ju mund të përdorni këto Komponentët në avantazhin tuaj?
Ndjehem mirë?
Po?
Audienca: Ndoshta kjo është një pyetje pa kuptim,
por ju mund të përdorni bootstrap në Wikipedia?
Nëse jeni të redaktoni një faqe Wikipedia?
NEEL Mehta: Po.
Pra, pyetja ishte, unë jam redaktoni një faqe Wikipedia,
mund të përfshijnë stilet bootstrap në atje?
>> Audienca: Po.
>> NEEL Mehta: Dhe kështu bootstrap është në thelb një fletë e madhe stil CSS.
Një fletë stil CSS vetëm thotë, sa herë Unë kam këtë klasë, bashkangjitni këto stile.
Pra, fletë stil CSS për bootstrap do të jetë diçka si .btn,
klasa buton, do të merrni si një Kufiri rrumbullakuar qoshe apo çfarëdo.
Pra, në thelb, bootstrap atë vetëm një bandë e klasave dhe një bandë e stileve
specifikuar për këto klasa.
Pra, për aq kohë sa ju keni atë CSS, kjo listë e rregullave në faqen tuaj,
ju do të merrni styling bootstrap.
Kjo është, natyrisht, të kushtëzuara nga duke pasur stilet bootstrap në faqen tuaj
për të filluar me.
>> Dhe kështu në Wikipedia, ju ndoshta nuk mund të
ta bëjë këtë për shkak se Wikipedia nuk ka bootstrap në të.
Por në qoftë se ai e bëri ketë bootstrap, ju ndoshta mund të bëni atë.
Dhe në qoftë se ju të kërkuar, ju mund të të përfshijë atë, por që mund të
thyejnë paraqitjen ekzistuese të faqes.
Por pyetje shumë e mirë.
Ju mund të përdorni bootstrap kudo që ajo është përfshirë,
por kjo nuk është e ndërtuar në by default.
>> Audienca: Ju faleminderit.
>> NEEL Mehta: Po.
Çdo pyetje më shumë?
Po.
Pra, nëse ju jeni këtu apo në shtëpi, vetëm mos harroni getboostrap.com-- përsëri,
getboostrap.com-- është miku juaj.
Kurdo që jeni duke përdorur Bootstrap, kjo do t'ju ***ë
udhëzime se si të merrni filluar, se si të përdorin komponente.
Ka disa cool JavaScript plug-ins që ne nuk do të shkojnë gjatë këtu,
por ata janë me vlerë checking out si.
Pra, kjo është miku juaj.
Është vetëm e rëndësishme për të marrë përdoret për të se si të përdorin këtë.
>> Pra, le të bisedojnë pak për duke e bërë faqet e internetit të përgjegjshëm.
Pra, siç thashë më parë, njerëzit e përdorur laptopët e tyre, ata përdorin telefonat e tyre.
Dhe si ju mund të imagjinoni, kjo është një madhësi shumë të ndryshme ekran se kaq.
Dhe kështu e njëjta internetit që duket e mirë në telefonin tim
nuk do të duken të mira, domosdoshmërisht, në një kompjuter.
Pra, çfarë ju duhet të bëni është bërë faqen tuaj të përshtatur.
Ajo ka për të përshtatur të ndryshme ekran madhësive që kjo është mbi.
>> Ajo ka për të thënë, unë e di unë jam në një kompjuter, një laptop i madh, unë duhet të zgjerohet.
Unë e di unë jam në një telefon, unë duhet të tkurret.
Dhe kështu bootstrap ofron disa , mjete shumë të dobishme shumë për të bërë këtë.
Pra bootstrap le të ju pushim një website në 12 kolona.
Ju mund të bëni rreshtave dhe 12 kolona.
Dhe ju mund të ndarjes ata megjithatë ju dëshironi.
Ju mund të keni një, gjë e madhe, e cila është 12 kolona e gjerë.
Ju mund të keni dy gjëra se janë gjashtë secili.
Ju mund ta bëni një gjë që është katër, një që është dy, ose një që është gjashtë.
Ju mund të bëni tre, tre, tre, tre.
Ju mund të bëni çfarë ndarje që ju dëshironi.
>> Pra, ndoshta web faqja juaj duhet të ketë një Kolona e majtë që është një e treta e gjerësi.
Kështu që do të jetë katër kolona gjerë dhe pjesa tjetër e faqes
do të jetë tetë kolona e gjerë.
Pra, ky është një shembull.
Le të tërheq një tjetër shembull.
>> Audienca: A ka gjithmonë duhet të jetë një edhe më të ndarë?
Mund të jetë një shtatë, pesë ndarje?
>> NEEL Mehta: Po.
Kjo mund të jetë shtatë, pesë.
Po.
Për sa kohë që ajo shton deri në 12, kjo është në rregull.
Pra, le të kthehemi këtu.
Përsëri, kodi që është i këtu është gjithashtu në dispozicion këtu,
nën shembull përgjegjshëm.
Kështu që unë vetëm u tërhoq deri disa Shembulli kod përgjegjshëm këtu.
Kështu që ju të bëni këtë duke përdorur një gjë e quajtur rresht.
Row është vetëm një tjetër klasë.
Kjo është një tjetër stil të shtoni onto tuaj divs për t'i bërë ato komponentët e tyre.
>> Pra ju thoni: div class = "rresht" për të bërë një rresht,
për t'i dhënë vetes 12 kolona të hapësirës.
Dhe pastaj të vendosni kolona brenda atë.
Pra, këtu ne COL-XS-6.
Mos u shqetësoni për XS.
Ne do të flasim në një sec.
Por në thelb, ne kemi një të tillë gjë që është e gjerë gjashtë.
Ne e quajmë atë majtas.
Dhe kështu që është kutia e majtë këtu.
Ne kemi një gjë që është gjashtë nga 12 kolonave gjerë.
Dhe se njëri është në të djathtë.
>> dhe vetëm jep bën të div juaj plotësoni atë gri.
Pra, kjo është vetëm kështu që ne mund të shihni se ata janë të dallueshme.
Dhe kështu ky shembulli i parë.
Kjo është një shembull shumë i thjeshtë si ju do të përdorin rreshtave dhe kolonave tuaja këtu.
Ju përcaktoni një rresht përdorur class = "rresht".
Dhe pastaj ju bëni class = "COL-XS-6" bëj gjysmë, "Kol-XS-6" për të bërë gjysmën tjetër.
Ja një shembull më i komplikuar.
Le të shikojmë në Tiny, I madh, pjesa tjetër një.
>> Ne mund të bëjë dy kolona Tiny gjerë, ne mund të bëjë të mëdha gjashtë kolona të gjerë,
Dhe pjesa tjetër katër kolona gjerë.
Kjo shton deri në 12.
Dhe kështu që këto të përfundojnë që përfshin gjerësia e faqes.
Përsëri, ne kemi një rresht jashtë.
Pastaj ne kemi div class = "COL-XS-2" dhe pastaj 6, dhe pastaj 4.
Dhe kjo do të sigurojë struktura për ne.
Dhe kështu që ne mund të vënë çfarëdo dreq duam brenda këtu.
Në vend të vogël, ne mund të vënë një buton.
klasë button = "btn BTN-fillore".
Dhe kështu vini re se butoni ynë nuk ka marrë të gjithë gjerësinë e,
por të paktën është e kufizuar në atë hapësirë shumë.
>> Pra, kjo është e gjitha mirë dhe të mirë.
Pra, ne tani mund të thyejnë deri faqen tonë faqe në chunks, gjerësi mençur.
Ne mund të themi se ne duam të kemi një majtë kolonë, dhe një kolonë e drejtë, dhe kështu me radhë.
Por ne nuk kemi shkuar mbi si ju bëni atë të përgjegjshëm.
Dhe kështu bootstrap, le të bëjmë atë si të mirë.
Ajo ka këto gjëra quajtur pikat e ndalimit.
Pra, ajo ka një mënyrë për të ditur nëse ju jeni në një kompjuter portativ, ju jeni në një tabletë,
ju jeni në një horizontale të telefonit, ose ju jeni në një telefon vertikale.
Ai e di madhësinë e ekranit.
Dhe thyen kjo në katër categories-- e madhe ose lg, e cila është laptopë, zakonisht.
MD ose medium, e cila është tableta.
SM, i vogël.
Ose XS, ekstra i vogël.
Dhe kështu, kur ju specifikoni një kolonë, ju thoni:
ajo duhet të jetë gjashtë kolona e gjerë në një pajisje shtesë të vogël.
Kjo është arsyeja pse ne e bëmë COL-XS-6.
Ne jemi duke thënë se ajo duhet të jetë gjashtë nga 12 kolonat e gjerë
në një pajisje shtesë të vogël.
Dhe në qoftë se është diçka më e madhe, ne do të vetëm parazgjedhur për të përdorur madhësinë e ekstra të vogël.
Në qoftë se kjo është diçka më e madhe se shtesë të vogël, kjo do të jetë gjashtë gjerë.
Dhe kështu që ne mund të levave këto për të bërë të kolonave tona
të marrë sasi të ndryshme të kolona bazuar në madhësinë e ekranit.
Le të shkojnë në këtë Resizing përgjegjshëm.
Pra, ne kemi shtyllat tona.
Dhe ai thotë, "col-lg-6 col-XS-12".
Pra, duke pasur parasysh atë që ju e dini deri më tani, çfarë ju
mendoj se do të të ndodhë në një ekran të madh?
E pra, kjo është lloj i dhënë mënyrë, por çfarë
ju mendoni se kjo do të duket si në një ekran të madh?
Dhe pse është kjo?
>> Audienca: A është ajo që në një ekran të madh, kjo është
do të marrë vetëm një pjesa e hapësirës së plotë?
Si gjysma e saj, I guess?
>> NEEL Mehta: Po.
>> Audienca: Dhe në më të vogla ekran, ajo do
për të marrë të gjithë ekranin, 12.
NEEL Mehta: Po.
E drejtë.
Pra, si një shembull, le të vetëm shikoni këtu poshtë.
Po.
Pra, në çdo gjë që është e LG ose bigger-- kështu kompjuterin tim ndodh
të LG, sepse kjo është goxha wide-- ajo do të bëjë
ai krah për krah sepse kjo është col-lg-6.
Pra, për shkak se kjo është në të mëdha, kjo e bën atë gjashtë kolona gjerë dhe gjashtë kolona gjerë.
Le të shohim se çfarë ndodh në qoftë se unë e bëjnë këtë në një të vogël.
Unë jam vetëm duke shkuar për të ekran të un-plotë këtë.
Dhe unë jam duke shkuar për të tkurret në ekran.
Unë do të tkurret në ekran, kështu që duket sikur unë jam në një pajisje të vogël.
Kështu që unë jam duke shkuar për të tkurret atë si kjo.
>> Dhe voila.
Ajo është bërë pirg tani sepse tani ne kemi shkuar
nga to-- i madh kjo është ndoshta një madhësi shtesë ekran të vogël.
Dhe kështu tani ajo thotë, OK, ne nuk jemi në të mëdha, ne jemi në tokë shtesë të vogël.
Pra, ne jemi duke shkuar për të përdorur ekstra vogla.
Dhe ne jemi duke shkuar për XS-12, XS-12.
Kështu ajo do të jetë bërë pirg.
Dhe vetëm të vini re se nuk ka një gjë e quajtur një breakpoint.
Një breakpoint është ajo ku ju e bëri tranzicionin
nga shtesë të vogël për të vogla, vogla në të mëdha, dhe kështu me radhë.
>> Pra, vetëm të vini re se si unë rrëshqitje kjo jashtë, në fund, ju do të merrni deri në pikën
ku ata do të hidhen të jetë krah për krah.
Nuk ju shkoni.
Pra, nuk është breakpoint drejtë atje.
Pra, ne mund të bëjë atë edhe më të komplikuar.
Tani ne mund të themi, këto gjëra duhet të jetë i gjerë katër.
Kjo është, ata duhet marrë rreth një të tretën
i fjalimit mbi pajisjet shumë të mëdha.
Në një pajisje të mesme, ajo duhet të marrë deri gjysmën e ekranit për shkak se është MD-6.
Në një pajisje shumë të vogël, ajo duhet të marrë 12.
Dhe kështu kjo duket fare e natyrshme.
Le të provoni këtë për veten tonë.
>> Pra, në një ekran të madh, ata janë katër të gjerë.
Shrink Ajo pak.
Dhe ata tani janë gjashtë të gjerë.
Pra, kjo është gjashtë, gjashtë, gjashtë.
Shrink atë edhe më shumë dhe pastaj ata do të jetë bërë pirg tërësisht.
Pra kjo, për shembull, ka kuptim nëse ju jeni ka kartat, të tilla si kartat e lajmeve,
për shembull, ku në qoftë se kjo është në një ekran shumë të madh,
është në rregull në qoftë se ju keni disa krah për krah sepse ata të gjithë do të merrni hapësirë të mjaftueshme.
Por ata duhet të kenë hapësirë të mjaftueshme.
Pra, në një ekran të vogël, ju do të doni të jepni atyre
më shumë hapësirë, proporcionale, të faqes.
>> Pra, si një shembull botës reale, le të thonë se ne kemi Twitter.
Dhe ne kemi kutinë e tekstit, në mënyrë ju mund të cicëroj në anën.
Dhe ne kemi një listë të trending tema në anën e djathtë.
Pra, në një ekran të madh, ne duhet kanë ata të jenë krah për krah,
kështu që ju mund të shihni ato në një gotë.
Por në një ekran të vogël, ne duhet të bëjmë 12 dhe 12,
në mënyrë që tema trending janë nën zonën cicërimë.
Për shkak se zona cicëroj është Gjëja kryesore dhe në një ekran të vogël,
tema trending nuk çështje mjaft sa më shumë.
Dhe kështu që ne kemi vënë të drejtën e tyre më poshtë, kështu që që ata të mund të të dy të marrë hapësirë të mjaftueshme.
Kuptim deri tani?
>> Audienca: Po.
>> NEEL Mehta: ngurta.
Pra, kjo është gjithë shembujt kam këtu.
Le të përpiqet dhe të bëjë një sfidë.
Pra, përsëri, kjo është sfidë-2.html për ata prej jush pas së bashku në shtëpi.
Pra mik im, Mark Zuckerberg, erdhi tek unë pardje.
Dhe ai është si, Neel, unë kam marrë goxha mirë në web design.
Unë mund të bëjë HTML.
Unë kam bërë këtë pak, edit i ri në Facebook.
Unë kam një ide të re për mënyrën se si ne duhet stil Facebook.
Dhe këtu është.
Mu ketu.
Ja disa kod shembull.
Pra, ajo që quhet Fancybook.
>> Ne kemi disa përditësime statusit.
Ne kemi Nemo, Mike Kosowski, ***-- tre rinfreskime të statusit.
Dhe pastaj ne kemi një listë të online Miqtë e drejtë poshtë atë.
Pra, ai është bërë detyrat e shtëpisë.
Ai e di pak për Bootstrap, ai bëri listën e parë,
ai ka bërë një pak të HTML.
Pra, ai ka web faqe.
Por ai është si, Neel, unë nuk e bëj kuptoj dizajn të përgjegjshëm në të gjithë.
A keni ndonjë ekspertë të cilët mund të më ndihmoni me këtë?
Dhe për fat të mirë, ju jeni tani ekspertë në dizajn të përgjegjshëm.
>> Pra, ajo që ai më tha ishte se ai dëshiron Fancybook të duket si ky.
Në një pajisje shumë të vogël, si një telefon, gjithçka
duhet të jetë bërë pirg, si këtu.
Pra, ju keni afatin kohor upfront deri krye, dhe pastaj
Ju duhet të ketë chat bar në pjesën e poshtme.
Por në një tabletë ose një të mesme pajisje, ajo duhet të jetë gjysmë dhe gjysmë,
si në afatin kohor duhet të jetë gjysmë dhe lista e chat miqve
duhet të jetë në gjysmën tjetër.
>> Pastaj në një kompjuter portativ, afati kohor duhet të marrë tre të katërtat
dhe pastaj mbrojtja chat duhet të marrë një tjetër një të katërtën.
Dhe kështu ai është si, Neel, unë kam këtë Kodi këtu, por kjo nuk është e përgjegjshme.
Ajo duhet të sillen si kjo.
Pra, sfida ime për ju është dhënë këtë kod here--
në qoftë se ju refresh tuaj CodePens, ju do të shihni këtë.
Ose në qoftë se ju vetëm të ngjitur në kodin në sfidë-2, ju do të shihni këtë.
>> Ja ky kod shembull.
Ju do të shihni disa xxxs.
Unë dua që ju të ndryshoni xxxs, e tillë që afatet dhe lista e miqve
ndjek këto syze këtu.
Mos u shqetësoni për atë që është brenda afatit për tani.
Ne do të merrni atë në hapin e ardhshëm.
Por tani për tani, le të shohim nëse ne të merrni këto gjëra për të ndarë atë si kjo.
Pra, ka që e bëjnë kuptim?
Pra, nëse ju jeni në shtëpi, pauzë video dhe provoni
për të bërë faqen tuaj web duken të përgjegjshëm si kjo.
Në qoftë se ju jeni këtu, të marrë si dy, tre minuta.
Ndjehen të lirë për të biseduar me një fqinj, dhe të përpiqemi, dhe fix Z. Zuckerberg-së
Problemi përgjegjshëm dizajn.
Nëse keni ndonjë pyetje, të ndjehen të lirë të let me know.
Ndjehem mirë?
Bërë?
Bukur.
>> Audienca: [padëgjueshme].
NEEL Mehta: Çfarë?
>> Audienca: Unë jam mirë.
>> NEEL Mehta: Oh, mirë.
Bukur.
Audienca: Gjë për 12, është ajo se bootstrap
trajton një hapësirë të caktuar ekran si 12 Njësi të gjithë dhe pastaj e ndan atë lart?
Si pikërisht bën proportioning punën për këtë?
>> NEEL Mehta: Po.
Pra, pyetja është, si bën proportioning
punojnë për bootstrap, e drejtë?
>> Audienca: Po.
NEEL Mehta: Pra, sa herë ju keni një klasë div = "rresht",
pa marrë parasysh se sa i madh është ekran, Bootstrap do të ju *** 12 njësi
të njëjtën madhësi me marrë atë madhësi shumë.
Pra, në qafë 1, është gjithmonë 8.33% e madhësisë së ekranit,
nëse kjo është kjo e gjerë apo se është kjo e gjerë.
Dhe kështu, sigurisht, në një më të vogël ekran, çdo kolonë është më i vogël.
Ju ende keni 12 kolona i gjerë, kjo është një më të vogël.
Kështu që është e deri tek ju për të siguruar që që gjërat të marrë më shumë kolonë,
proporcionale, për të kompensuar për këtë shkak të mungesës së hapësirës.
A ka kjo kuptim?
>> Audienca: Po.
Faleminderit.
NEEL Mehta: Pyetje e mirë.
Audienca: Në një pjesë të madhe ekran, mund të keni
afati kohor të marrë tre të katërtat?
>> NEEL Mehta: Po.
NEEL Mehta: Si djema ndjenja?
Mirë?
Ftohtë.
Pra, le të kthehen.
Dhe le të përpiqen dhe të rregulluar këtë pjesë e internetit zotit Zuckerberg.
Pra, afatet kohore është këtu, në të lartë, dhe lista e miqve
është në pjesën e poshtme.
Dhe kështu që ne vetëm duhet të caktojë kolona, me sizing proporcional,
Në secilën nga këto.
Pra, kjo *** parë është për afat kohor.
Çfarë klasa nuk kemi vënë në këtu?
Çfarë ju djema vënë në këtu?
Pra mbani mend, në një ekran të madh, ajo ka nevojë për për të marrë tre të katërtat e gjerësisë.
Dhe kështu çfarë stil do të ju *** atë?
Në një ekran të madh, tre katërtat e gjerësisë.
Çfarë klasë nuk kemi përdorim atje?
Audienca: Pra, ne jemi vetëm do të jetë redaktimi atë rast e parë të klasës.
NEEL Mehta: Tani për tani.
Po.
>> Audienca: Ne nuk jemi duke redaktimi secili, tipar individual i afatit?
NEEL Mehta: Jo tani, të paktën.
Pra, kjo gjë e tërë është një bllok.
Ne jemi vetëm duke ndryshuar dizajnimin e bllokut.
Pra, këtu ne do të COL-lg-9 sepse kjo është nëntë nga 12 të gjerë në një ekran të madh.
Dhe pastaj në një ekran të mesme, Sa kolona duhet të shkoj?
Audienca: Është menduar të jetë gjysmë për gjysmë.
NEEL Mehta: E drejta.
Pra, sa është kjo?
>> Audienca: Pra gjashtë.
NEEL Mehta: Gjashtë.
Dhe pastaj shtesë të vogël duhet të be-- nëse ajo merr të gjithë gjerësinë e rresht,
sa duhet të jetë?
Audienca: 12.
NEEL Mehta: 12.
Po.
Dhe tani ne kemi marrë për ndryshuar këtë ato të tjera,
kështu që ajo merr pjesën tjetër të hapësirës.
Pra, col-lg--
Audienca: Ajo do të të marrë të gjithë ekranin?
NEEL Mehta: Ajo merr një të katërtën e ekranit në një pajisje të madhe,
siç kemi treguar këtu.
>> Audienca: Tre.
>> NEEL Mehta: Tre.
Dhe pastaj col-MD-6 për të marrë deri pjesa tjetër e hapësirës.
COL-XS-12.
Deri tani ne kemi afatin kohor duke marrë deri tre të katërtat
të faqes në ekranin e madh dhe pastaj një e katërta në anën.
Dhe pastaj në qoftë se madhësia ekran poshtë, ajo duhet të resize në përputhje me rrethanat.
Pra, kjo është bërë pirg tani, në një ekran shumë të vogël.
Dhe nëse ne madhësi atë pak, ata duhet të jenë saktësisht gjysmë dhe gjysmë.
Pra, ne kemi bërë atë deri tani.
Shumë i ftohtë.
Dhe kështu që ne nuk do të bëjmë të Pjesa tjetër e sfidës.
Ju mund ta bëni atë veten.
Por në thelb, ju keni për të të përpiqet dhe të bëjë këto të përgjegjshëm
si well-- bëjë kohor artikuj, vetë, të përgjegjshëm.
Deri tani ne kemi kaluar nëpër të gjithë ju duhet të dini
për anën përgjegjshëm të bootstrap.
Ndonjë pyetje në lidhje me të përgjegjshme Dizajni me bootstrap
dhe se si ju mund të shkoni për të bërë këtë?
Po?
>> Audienca: A është e ngjashme në qoftë se kemi pasur një video ngulitur
dhe ne të kërkuar për të kontrolluar Shkalla në të cilën was-- Video
madhësia e video duke shkuar nga laptop në telefonin.
NEEL Mehta: Po.
Pak a shume.
Ju do të duhet të tregojnë video të marrë sa më shumë vend si ajo e dhënë,
i cili është pak i bezdisshëm ndonjëherë.
Por ideja kryesore është e njëjtë.
Një video, si çdo objekt tjetër në faqja, si një buton apo çfarëdo,
sa kohë që ju përdorni kolona dhe rreshtave,
ju mund të jepni atë një sasi të caktuar të hapësirës.
Dhe kështu duke marrë atë për të nderuar që është një pyetje të ndryshme, sepse si YouTube
embeds kanë një të caktuar, madhësinë preferuar.
Por teorikisht në të paktën, ajo do të punojë.
Ftohtë?
>> Audienca: Unë mendoj, pra, për një imazh, a në fakt
duhet të ketë versione të ndryshme të imazhin e njëjtë në madhësi të ndryshme
për laptop kundrejt iPhone?
Po Pyetja është, nuk kemi nevojë për të ketë imazhe që janë të përgjegjshëm, si dhe.
Dhe me të vërtetë, ju mund të bëni atë.
Unë mendoj se është në CSS.
Por bootstrap lejon që ju të bëni atë si të mirë.
Ju mund të ketë imazhe të përgjegjshëm.
Ju mund të keni imazhet tuaja resize sipas madhësisë së faqes.
Dhe ka një gjë shumë të re HTML5, versioni më i ri i HTML,
dhe CSS3, të rinj version i CSS, e cila
do të ju lejojnë të kërkoni imazhe të ndryshme bazuar në madhësinë e ekranit që ju jeni në.
Zakonisht, kjo është mjaft e mirë për të vetëm kanë imazhin tuaj vetëm tkurret ose të rritet në
megjithatë madhe ajo duhet të jetë.
Por ju mund të, në qoftë se ju doni të, të ketë një 32 nga 32
për ekranet e shumë të vogla, dhe 64 nga 64 për një ekran të madh,
dhe pastaj të shërbejë atyre selektive.
Ti mund ta besh.
Kjo është bërë nga disa njerëz.
Është ende prerjes avantazh mjaft.
Por Përgjigja e shkurtër, images-- përgjegjshëm Bootstrap mund të shpëtojë ditë atje.
Ftohtë?
>> Audienca: Ju faleminderit.
>> NEEL Mehta: Pra, le të flasim reale të shpejtë rreth asaj se si
për të marrë këtë në vetë faqen tuaj web.
Le të thonë se ju doni të bëni tuaj Faqja e internetit e vet duke përdorur bootstrap.
Dhe kështu le të vetëm vetëm ecin nëpër atë së bashku.
Le të thonë se ju bëni vetëm një faqe normale HTML.
Ndjehen të lirë për të ndjekin së bashku në çfarëdo redaktor tuaj të preferuar është.
Pra, ne vetëm kemi disa faqe HTML.
Ne mund të bëjmë! DOCTYPE html.
Kjo është gjithashtu html, faqe ynë.
Asgjë e re.
Ne e kemi bërë këtë më parë.
Kështu që këtu kemi HTML tonë dhe ne mund të vënë gjëra brenda këtu.
Ne mund të kemi butonin tonë.
Dhe siç kam thënë më parë, ky nuk është domosdoshmërisht do të punojë.
Pse nuk mund të këtë punë?
Pse nuk do të marrim tonë bukur, button ngjyra?
>> Audienca: Sepse ne nuk e lidhë atë me projektin bootstrap apo file?
NEEL Mehta: Po.
E saktë.
Sepse Bootstrap-- është vetëm një skedar CSS dashuroj.
Kjo është një seri e stileve që janë bashkangjitur elemente tuaj.
Këtu ne kemi thënë atë që ne doni të përdorni këto stile.
Unë do madhësi që deri pak.
Ne e kemi thënë atë që ne duam përdorim këto stilet, por ne kurrë nuk
tregoi se çfarë stilet janë.
Dhe kjo është ajo tuaj pyetje nga më herët ishte.
Kjo është përgjigje për këtë.
Ne kemi nevojë për të gjetur një mënyrë për të marrë stilet dhe përfshirjen e tyre në faqen tonë disi.
Dhe vullneti kështu bootstrap na tregojnë se si për të bërë këtë.
>> Pra, nëse ju shkoni në krye këtu, T'ia Fillohet.
Ka mënyra të ndryshme për ta shkarkuar atë.
Kjo nuk mund të ketë kuptim domosdoshmërisht.
Bootstrap-- kjo do të le të ju kap file CSS vetë.
Dhe ju e përfshirë atë në faqen tuaj.
Kodi Burim është në qoftë se ju doni të kollitem në atë me veten.
Ju nuk keni nevojë për këtë të vërtetë.
SASS është një gjuhë që përpilon në CSS.
Mendoni se si një preprocessor.
Shumë si PHP është një preprocessor e HTML, Sass është një preprocessor për CSS.
Pra, nëse ju doni të bëni atë Në këtë mënyrë, ju mund të bëni atë.
>> Mënyra më e lehtë është duke përdorur një CDN, ose Rrjeti ofrimit të përmbajtje.
Kjo është një faqe interneti që vetëm shërben një kopje të bootstrap
shumë shpejt për ju për të të përfshijë në faqen tuaj.
Kështu që këtu është një shembull.
Kjo do të ju *** këtë element link.
Një element lidhje i tregon shfletuesit tuaj, të marrin çfarëdo dosjet janë ruajtur këtu
dhe të përfshijë atë në faqen tonë të internetit.
Dhe në këtë rast, është CSS skedar bootstrap.
Pra, ne vetëm do të kopjoni atë URL, ose që teksti, dhe ne do të hedhin atë brenda
e kokën tonë.
>> Dhe unë nuk do të fillojë faqe për këtë, por ju mund të besimit se kjo funksionon.
Lidhje do të merrni ju CSS.
Të përfshijë atë në tuaj faqe dhe pastaj ju do të jetë
në gjendje të përdorin të gjitha të bootstrap Klasat që ju e dini dhe dashuri.
Në qoftë se ju doni të mbani atë në nivel lokal dhe kanë atë në sistemin tuaj fotografi
në vend që të shkojnë në interneti për të rrëmbyer atë,
si në qoftë se ju doni të përdorin vend offline,
ju mund të përdorni Shkarko opsion.
Por, për pjesën më të madhe, duke përdorur CDN është shumë e shpejtë, sepse në këtë mënyrë,
ajo është mbajtur përditësuar si edhe për ju.
Ju keni në dorë të rinovuar atë ose.
Ka kuptim?
>> Pra, një shumë e mjeteve do të ketë këtë ndërtuar në by default. Në Pset7 tuaj dhe Pset8,
Unë besoj se bootstrap është përfshihen automatikisht.
Dhe në CodePen, për shembull, kjo është tashmë
përfshirë për shkak unë shtoi shtoni këtë mjedis.
Pra, nëse ndonjëherë ju doni të luajnë rreth me atë, ju mund të shkoni vetëm në CodePen,
ose shkoni në ID tuaj, ose çfarëdo.
Dhe ju mund të jetë në gjendje të Qasje bootstrap atje,
por kjo nuk është gjithmonë i ndërtuar në, si parazgjedhje, në web.
Ka kuptim?
>> Po.
ashtu si një recap-- kemi si pesë minuta lënë.
Por si një radhitje, në faqet e reja web, ju mund të përfshijnë bootstrap si kjo.
Dhe një herë ju keni atë përfshira, ju mund të bëni të gjitha stuff fun këtu.
Ju mund të shkoni në, dhe ju vetëm mund të lexoj CSS, ju mund të shtoni disa stile të ftohtë,
ju mund të keni komponente si butonat,
dhe tavolina, dhe lista Artikujt që kemi përmendur.
Ka disa plugins të ftohtë JavaScript, që ju mund të dëshironi të eksploruar.
Ata shtojnë disa cool interaktive në faqen e internetit.
Si ky bën një dialog modale.
>> Pra, ka disa sende argëtim ju mund të bëni me bootstrap.
Kështu që këshilla ime për ju është të shkoni përpara dhe e përdorin atë në projektet tuaja,
ndiqni udhëzimet ne vetëm e bëri se si të merrni atë,
dhe vetëm lexoni bootstrap sepse ju do të mësoni më shumë në lidhje me çfarë duhet të bëni.
Dhe kështu që ne kemi shkuar mbi, sot, se si të përdorin
dokumentacioni, çfarë ndërtesa blloqe janë, dhe se si ajo është konceptualisht.
Deri tani sfida ime për ju është bërë një faqe interneti duke përdorur bootstrap.
Shkoni në docs.
Dhe të përdorin mjetet që kemi mësuar deri më tani për të përpiqen dhe të kuptoj ato
dhe të kuptojnë ato.
Dhe përdorin këto stilet dhe mjete ju shihni atje në faqen tuaj te internetit.
Dhe kjo është vetëm një i madh, proces eksperimentale.
>> Provoni një stil të caktuar.
E bën këtë punë?
A nuk është?
Provoni të vënë gjëra së bashku.
Shih se çfarë ndodh.
Kjo është shumë e shumë një vetë udhëzuar, Procesi i zbulimit.
Por sot, ne kemi mësuar shumë bazat e asaj që është bootstrap?
Pse e bën këtë punë?
Si punon?
Si mund të filloni duke e përdorur ajo, në radhë të parë?
Dhe kështu që tani që ju jeni mbi këtë breg, ju
duhet të jetë në gjendje të bëjë atë goxha probleme me veten.
>> Pra edhe një herë, të gjithë Kodi kemi bërë është këtu.
Pra, nëse ju doni ndonjëherë për të marrë një furçë deri në,
si, çfarë është një mashtrim i shpejtë fletë për të gjitha stilet?
Ju mund të shkoni në këtë mostër këtu.
Ne kemi disa shembuj stile këtu.
Nëse ju doni të provoni Sfidat përsëri me veten,
ju mund të provoni ato këtu dhe shikoni zgjidhjet.
Pra, kjo lidhje do të jetë përfshirë në slides, të cilat
do të dërgohet tek ju sigurisht.
Por është edhe këtu.
Ju mund të pauzë video, në qoftë se ju dëshironi.
Të gjitha informatat që ju duhet është do të jetë e drejtë këtu, në këtë vend.
Pra, nëse dikush ka ndonjë pyetje, ne mund të marrë ato për të ardhshëm minuta çift.
Përndryshe, ju falenderoj të gjithë shumë për të shikuar.