Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: So hello sa lahat ng tao kung sino ang nanonood dito,
o panonood ng online, o sa malayo.
Ang pangalan ko ay Neel, ito ay CS50.
At seminar ngayon ay tumutugon Web Design na may Bootstrap.
Ito ay isang paksa na masyadong malapit sa aking puso.
Sana, ito ay magiging malapit sa iyong puso
pati na rin sa pagtatapos ng seminar ngayong araw.
Kaya Bootstrap.
Gaano karaming ng ikaw ay tapos na ang anumang uri ng mga web development bago?
Ang isang mahusay na halaga?
Kaunti lamang.
>> Kaya Bootstrap ay ang mundo pinaka popular, front-end framework.
Ito ay ginagamit by-- pinili ko ang isang pares ng mga random websites--
Lyft, Newsweek, at Vogue.
Ito ay ginagamit ng isang bilang ng mga website.
Ito ay isang web disenyo balangkas na hahayaan kang gumawa ng iyong mga website
parehong maganda at tumutugon.
At kukunin ko na pumunta sa paglipas ng mga dalawang konsepto dito.
Maganda.
Kaya ikaw ay may normal na website sa kaliwa, na kung saan ay ginawa sa pamamagitan lamang ng HTML.
Natutunan mo na HTML sa klase at sa seksyon sa haba.
Bootstrap ay isang paraan upang gumawa ng maganda ang iyong mga website.
Maaari kang kumuha ng kung ano ang sa kaliwang bahagi ng iyong screen
at buksan ito sa kung ano ang sa kanang bahagi ng iyong screen na may tunay,
tunay, tunay maliit code.
>> Makukuha mo ang ganda ng asul na pindutan, makakakuha ka ng ang pag-iisip, bilugan ang mga gilid sa screen,
makukuha mo ang view ng listahan, makukuha mo ang cards, at iba pa na may napakakaunting code.
Mayroon talagang walang CSS na kailangan mong isulat sa pamamagitan ng iyong sarili.
Kaya nagbibigay-daan sa iyo Bootstrap sa magkaroon ng mga pre-built na CSS
mga sangkap na maaari mong ilagay sa loob ng iyong web page
upang gawin itong magmukhang maganda na walang Sobra trabaho sa iyong sarili.
Ito ay talagang isang bootstrap, isang panimulang punto,
para sa iyong mga pakikipagsapalaran sa web development.
At kaya kapag ikaw ay lamang mapanukso up ng isang website,
ito ay isang magandang lugar upang makapagsimula.
Maaari kang makakuha ng isang mahusay na naghahanap website sa tunay, tunay maliit na trabaho.
At sa katunayan, kami ay pagpunta upang gawin ito sa ating sarili
sa kurso ng tulad ng limang minutes-- sa loob ng 10 minuto.
Kaya ito ay medyo madali upang gumawa ng ilang mga mahusay na mga website.
Kaya na ang unang bahagi.
>> Part-- sumasang pangalawa.
Mga tao, sa panahong ito, hindi lamang ma-access ang web sa kanilang mga laptop.
Sa totoo lang, tulad ng 2014, mas maraming mga tao ma-access ang web sa pamamagitan ng mga aparatong mobile,
tulad ng mga telepono, o tablet, o serbisyo, o iba pa sa website.
And mga website ay may ayon sa kaugalian ay dinisenyo na may mga laptop o desktop
sa isip.
At upang ang mga website ay madalas na hindi napakahusay ugma sa iyong phone.
Kung sakaling ikaw ay bumisita sa harvard.edu sa iyong telepono,
ito ay uri ng isang nakakainis karanasan, di ba?
Iyon ay dahil ito ay hindi na tumutugon.
Kami ay sinusubukan upang gumawa ng mga mga website na tumutugon,
na tumugon sa mga laki ng screen ng mga tao.
>> Kaya kung ito ay isang telepono, ito ay pagpunta sa pumunta sa phone.
Kung ito ay isang tablet, ito ay pagpunta sa pumunta sa tablet.
Inaayos ito upang tumugma sa screen na ito ay ginagamit.
At kaya nagbibigay din Bootstrap ilang tunay, tunay na kapaki-pakinabang utilities para doon.
At kami ay pagpunta upang talakayin na rin.
Kaya muli, may dalawang bahagi sa Bootstrap-- maganda at responsable.
Kami ay pagpunta sa makipag-usap tungkol sa mga.
Una, maganda.
At pagkatapos ay tumutugon.
>> Kaya ang lahat ng code na hindi namin pagpunta sa makipag-usap tungkol today--
kami ay pagpunta sa magkaroon ng isang pulutong ng mga halimbawa, isang pulutong ng mga hamon, at iba on-- ito
lahat ng nabubuhay sa website na ito dito.
Slide na ito ay kung ano ang ipinadala sa labas namin.
Kaya kung nandito ka, maaari mong huwag libre sa hindi kailangang isulat na pababa.
At kung ikaw ay nanonood sa malayo, pakiramdam libreng upang hilahin ito up sa iyong computer
din.
Ikaw marahil na kailangan ito sa panahon ng ang mga kurso ng seminar na ito.
>> Kaya kami ay pagpunta sa gumamit ng isang website na tinatawag CodePen,
kung saan ay isang collaborative coding kapaligiran, sa panahon na ito pantas-aral.
At CodePen-- at ko makikita ipakita mo dito real fast--
ito ay nagpapahintulot sa inyo na magsulat HTML samang.
Maaari kong isulat ito, maaari kong ipadala ito sa guys, ka guys ay maaaring i-edit ito.
Kahit na ikaw ay remote, ikaw ay maaari pa ring ma-access ang mga ito na paraan.
Maaari ninyong ilagay ang HTML code sa itaas at ito ay awtomatikong bibigyan
ma-convert sa mga web page sa ilalim.
Kaya ito ay isang paraan para sa iyo upang mabilis na subukan ang mga code
nang hindi na gawin ang anumang uri ng mga bagay-bagay sa iyong IDE, o ang iyong sariling website,
o kahit ano.
>> Kaya't sige, at makuha ang mga ito website, kung ikaw ay remote
o kung ikaw ay dito, lalo na kung ikaw ay remote.
is.gd/cs50boostrap.
Walang takip, walang underscore, walang wala.
Kaya sa mga ka na ay dito, bigyan lang ako ng thumbs
up kapag ikaw ay kinuha up na web page.
Good?
>> Madla: Oo.
>> NEEL MEHTA: So babalikan ka namin sa na sa isang segundo lang.
Kaya una, kami ay pagpunta upang makakuha ng, kung paano mo gawin ang iyong mga website maganda?
Kami ay pagpunta upang malaman kung paano kumuha ng panganganak, old HTML, tulad ng ipinakita ko sa inyo bago,
at turn na sa talagang maganda ang mga sangkap,
like nice widgets, nice, kulay mga pindutan, at mga label, at mga talahanayan,
at ang lahat, gamit Bootstrap.
Kaya kung maaari namin ang lahat ng pumunta sa ibabaw ng CodePen na nakuha up mo lamang.
Dapat itong magmukhang isang maliit na piraso tulad nito.
Ang hitsura ito tulad na ito para sa lahat?
>> Madla: Oo.
>> NEEL MEHTA: Kung ikaw ay remote, ito dapat magmukhang ganito rin.
Kung hindi, ipapakita ko sa iyo sa lalong madaling panahon kung paano maaari kang makakuha ng mga ito ang hitsura na ito
sa isang susunod na bahagi ng video.
Kaya dito kami ng nakasulat isang napaka-basic HTML,
tulad ng uri na sa iyo ay gumagamit ng sa klase.
Ito ay medyo basic.
Walang frills.
At kami ay may ilang mga bagay-bagay.
Dinisenyo namin ang isang tunay, tunay pangunahing simulan up
tumawag Yalp! na kung saan maaari mong mahanap ang mga restaurant sa lugar,
at hanapin ang mga review, at direksyon sa lahat ng mga iyon.
Ito ay isang napakahusay na konsepto.
Ito ay hindi pa nagagawa dati.
Ito ay isang napaka-natatanging pangalan, masyadong.
>> Kaya kung ano ang namin ang pagpunta sa subukan gawin ay makakatulong sa mga may-ari
ng Yalp! gumawa ng kanyang website Tumingin tunay, tunay na cool.
Kaya upang magsimula sa, ang may-ari ng Yalp! ay ginawa ng isang maliit na paghahanap
box, at isang maliit na button, at pagkatapos ay marahil isang maliit na
naka-highlight na lugar para sa isang naka-highlight na restaurant, at pagkatapos ay
isang listahan ng iba pang mga restaurant na sa lugar.
Kaya maaari naming pumunta lamang sa pamamagitan ang HTML code real mabilis.
Paano kumportable kayo guys sa HTML?
Tapos na kami ng maliit na piraso section at din sa klase.
Marangal?
>> Kaya lang bilang isang pagbabalik-tanaw, HTML ay ang lahat ng tungkol sa pagkakaroon ng
mga tag o mga elemento na sabihin ang computer kung paano mag-ipon ang web page.
Kaya here-- simulan ito h1 h1, Maligayang pagdating upang Yalp !, end h1-- nagsasabi ng computer,
gumuhit ng isang malaking header ito sabi, Maligayang pagdating sa Yalp!
sa loob doon.
Mayroon din kaming mga form.
Maaari naming input tulad nito, mga input ng teksto, na kung saan ay render ng mga kahon ng teksto
isulat mo in.
Mayroon ka ring mga pindutan.
Makakakuha ka ng isang maganda, naki-click na button.
Hindi ito ginagawa ng kahit ano karapatan ngayon, ngunit makakakuha ka ng isang pindutan.
Maaari kang magkaroon ng divs, o dividers, upang break up ang iyong pahina sa iba't ibang grupo.
>> Maaari kang magkaroon ng mga talata, mayroon kang mga pindutan.
Kung mayroon kang mga talata, pagkatapos ay mayroon kang unordered listahan, ul,
at mga listahan sa loob ng na, li.
Kaya ito ang mga tunay pangunahing bloke ng gusali ng isang web page.
At sa katunayan, medyo marami bawat website na nakikita mo
ay magiging built gamit ang mga parehong mga tool.
Siyempre, hindi sila lahat Tumingin ito masama dahil hindi namin
pagpunta upang pagandahin ito nang kaunti.
Kaya sabihin ito pagbubutas lumang HTML at start pagbabago ng ito sa mga magagandang site
na nakita namin lamang ng ilang minuto ang nakalipas.
>> Kaya natin simulan off napaka-simple ipaalam.
Kaya kami ang pindutang ito dito.
Sa Bootstrap, tulad ng nakita natin, maaari naming have a nice, maganda, asul na pindutan.
At na hindi tapos na sa pamamagitan ng paggawa ng custom na CSS.
Walang custom na CSS dito.
At iyon ay nagawa sa pamamagitan ng pagdaragdag ng mga klase sa iyong mga elemento ng HTML.
Kung nasubukan mo na klase, o HREF, o anchor, o i-type = "text" para inputs--
Mga elemento ng HTML ay maaaring magkaroon ng mga katangian.
Sila ay maaaring magkaroon ng dagdag na impormasyon na maaaring magbigay sa iyo ng mga ito.
>> At ito, sa kasong ito, klase ay ang attribute.
Kaya gusto mong isulat, class button = isang bagay sa loob ng mga string.
At attribute na magsasabi sa computer, hindi ito ang anumang, old button.
Ito ay isang button na nasa sa klase ng mga buttons.
At kaya Bootstrap, kung bibigyan mo ito isang tiyak na estilo sa iyong elemento,
ito ay gumuhit ng isang tiyak na paraan.
Kaya ako sumulat "btn btn-primary.
btn pagiging isang pagpapaikli para sa button.
Mapapansin mo na ngayon na ang aking pangit button naka
sa isang nice, maganda, asul na pindutan.
Mukhang napakabuti kapag nag-click namin ito.
>> At kaya kung ano ang mangyayari ay na namin ang mga btn klase at ang klase btn-primary
sa aming mga element.
At Bootstrap ay pumunta sa at sabihin, OK, ako malaman na may mga ito ng dalawang mga klase.
Anumang elemento na may mga dalawang mga klase ay dapat na inilabas tulad nito.
Kaya iyon ang core ng kung paano mo i-attach estilo sa mga elemento sa Bootstrap.
Ilakip Ikaw lamang ang klase upang ang mga ito at ito timbang ito bilang ito nakikita magkasya.
Kaya narito ang isa pang halimbawa.
Sa input, maaari naming magdagdag ng isang class = "form-control".
At kukunin ko na ipakita sa lalong madaling panahon na kung saan kayo malalaman kung ano ang mga klase
Available sa bawat uri ng elemento.
Ngunit sa klase na lang namin idinagdag na may nice, bilugan ang mga kanto,
ito ay may magandang padding, ito ay may a nice, asul na glow sa mga ito.
>> Maaari din naming pumunta sa form na ito.
At class = "form-inline", kung saan ay gumawa aming form, tulad ng maaari mong isipin, inline.
Kaya ito ay naghahanap ng isang maliit na piraso ng mas maraming tulad ng kung ano ang nagkaroon kami bago na.
Kaya bago tayo pumunta sa i-style ang natitirang bahagi ng pahina, ang anumang mga katanungan tungkol sa kung ano ang aming
ginawa?
Kami ay naka-attach na lang klase sa aming iba't ibang mga elemento.
At ipapakita ko sa iyo mamaya kung paano maaari mong malaman kung ano ang mga klase ay magagamit.
Nakalakip kaming mga klase na may mga tiyak na mga estilo.
At iyon ay nagsasabi ng browser kung paano ang layout ng pahina gamit
Ibinigay estilo Bootstrap ni.
Ang anumang mga katanungan mula sa mga madla?
>> Magandang sa ngayon?
Cool.
Ang isang pulutong ng mga hamon sa Bootstrap ay lamang
pag-alam kung ano ang mga bahagi ay magagamit at kung paano gamitin ang mga ito.
At iyon ay ang lahat ng natutunan may karanasan at din
sa pamamagitan ng pagbabasa ng mga babasahin, na kung saan namin makipag-usap tungkol sa lalong madaling panahon.
Kaya mayroon kaming ito div.
Ito lamang ay isang panganganak, mga lumang bagay.
Gusto naming bigyang-diin ito sa anumang paraan.
Kaya sa Bootstrap, may mga pulutong ng mga sangkap na magagamit.
At ito ay getbootstrap.com.
Ito ay isang kapaki-pakinabang na sanggunian.
Ito ay naglalaman ng mga bagay-bagay like-- narito kung paano mo gawin ang isang button.
At maaari mong gawin nav bar, maaari mong label, maaari mong progreso bar,
maaari mong gawin ang listahan groups.
Talaga, ito ay ang lahat ng uri ng maaari mong makita ang isang web page.
>> Narito ang isa na susubukan naming ngayon.
Ito ay tinatawag na panel.
Kung sakaling ikaw ay gumagamit ng Google Ngayon, mayroon sila ng cards.
O anumang mga Android device ay may card.
Ang mga ito ay maliit na puting kahon na mayroon mga bagay-bagay sa loob nito.
At kaya kami ay pagpunta sa subukan at gawin na ang ating mga sarili dito gamit ang isang bagay
tinatawag na isang panel.
Kaya kung isama namin class = "panel panel-default "sa aming mga panlabas na div,
pagkatapos ay i-attach kami ng isang div class = - sabihin tingnan lamang ito babasahin.
= "panel-heading" div class at pagkatapos div class = "panels-body".
Muli, huwag mag-alala tungkol sa pagsasaulo code na ito.
Magiging available ito online.
>> Kaya ginawa namin ito at ngayon ang aming panganganak, old div naging mga ito nice, maliit na card.
Ito ay may magandang padding, ito may hangganan, ito ay nakatayo sa labas
mula sa natitirang bahagi ng pahina, na kung saan ay medyo cool.
Kaya sabihin pumunta sa at palitan Kumuha ng mga ito button ng mga direksyon sa ganda ng itsura.
Sino sa madla ay nais na sabihin sa akin kung ano ang maaari kong gawin upang ang pindutan ng
upang gawin itong tumingin maganda gamit Bootstrap?
Oo?
>> Madla: Maaari naming magdagdag ng isang class.
At maaari naming gawin class = "btn btn-primary".
NEEL MEHTA Oo.
Mayroong isang bungkos ng iba pang kulay na magagamit para buttons--
o para sa anumang bagay, para sa mga bagay.
Maaari naming gawin btn-panganib at gawin itong pula.
Mayroon kaming pumunta.
Maaari naming gawin btn-tagumpay upang gawin itong green.
Maaari naming gawin btn-info-- mayroong isang bungkos ng mga bagay na magagamit sa iyo.
Kaya Mayroon akong maliit na hamon para sa iyo ngayon.
Kaya may isa pang bagay na ako ay may kaliwa un-istilong.
Ito Top Restaurant.
>> At gusto namin na gamitin ang isang bagay tinatawag na isang grupo list sa estilo ito.
Kaya ang aking hamon sa iyo ay pumunta sa upang getbootstrap.com--
Kukunin ko hilahin ito up dito.
getboostrap.com.
Pumunta sa getbootstrap.com, hanapin ang section kung saan sila pumunta sa paglipas ng listahan ng mga grupo.
At makikita mo dito ang isang halimbawa at ang kanang mga klase
na maaari mong gamitin upang gumawa ng iyong listahan sa mga ganda ng mga grupo list.
Ang mga ito ay nagtrabaho ang mga halimbawa mga halimbawa code, ng kung ano ang
code na gamitin mo, kung ano ang HTML code gamitin mo, at kung ano na ang output.
>> Kaya ang aking hamon sa you-- pumunta sa getbootstrap.com,
kung nandito ka o sa bahay, at upang subukan at magdagdag ng mga estilo sa ul
upang gawin itong tumingin nice.
At gumamit ng isang estilo list group.
Gusto mong tumagal ng ilang minuto, at ang paghahanap ng mga babasahin,
subukan ito sa inyong sarili?
Dahil bilang ikaw ay gumagawa ng web development, makikita mo mapagtanto ang isang pulutong ng iyong trabaho
ay magiging pagbabasa ito babasahin.
Kaya tingin ko ito ay mabuti upang makakuha ng pamilyar sa kung paano basahin ang mga babasahin,
kung paano malaman kung ano ang kung saan, kung ano ang code halimbawa maaari mong gamitin,
kung ano ang maaari mong pagkilos.
>> Kaya muli, getbootstrap.com, pumunta sa tab na Mga Bahagi,
at pagkatapos ay mag-scroll pababa sa Listahan Group.
At makikita mo ang mga halimbawa ng code na maaari mong gamitin upang gumawa ng iyong HTML magkasya iyon.
Kaya maglaan ng ilang minuto at subukan at galugarin ito sa iyong sarili,
kung nandito ka o sa bahay.
Kung ikaw ay sa bahay, i-pause ang video, marahil, at subukan ito sa iyong sarili.
Kung nandito ka, kung pumunta ka sa aming website-- kung i-refresh mo ang pahina,
makikita mo ang mga ito sa doon.
Ang tunay parehong code ay lamang pagdaragdag ng mga bagong estilo ng karapatan doon.
Kaya maglaan ng ilang minuto.
Ipaalam sa akin kapag ikaw ay pakiramdam mabuti tungkol sa mga ito o kapag ganap ka ng mawawala.
Tunog mabuti?
Cool.
Quick muna para sa mga mo sa bahay, habang kami ay naghihintay,
kung ikaw ay pupunta sa sa site GitHub na ko *** ilagay up ng isang pares ng mga slide na ang nakalipas,
patungo sa simula ng video, Mayroon akong isang GitHub repo, repository,
para sa mga ito talk.
Ang lahat ng mga halimbawa ng code na kami ay magiging pakikipag-usap tungkol ay naka-imbak dito mismo.
Kaya kung pupunta ka na hamunin-1.html, ito ay ang lahat ng mga code na kami ngayon
sa aming CodePen.
Kaya maaari ka lamang sige, at kopyahin na ito, at i-paste ito sa iyong sariling CodePen.
At na paraan, maaari mong panatilihin up sa kung ano ang ginagawa namin dito.
Kaya kailangan pati na rin buksan ang pahinang ito namin pumunta sa pamamagitan ng ang natitirang bahagi ng seminar.
Muli, nais mo ito sa hitsura ng kung ano ang iyong makita ang down sa ibaba ng iyong screen
doon.
Magandang pakiramdam?
Solid.
Sabihin maghintay para sa lahat ng ibang tao sa tapusin up sa kung ano ang kanilang ginagawa.
>> Oo?
>> Madla: Ipagpalagay na nais ko gamitin Bootstrap sa home--
NEEL MEHTA Oo.
Madla: nakikita ko, sa website, Pagsisimula page.
Nagbibigay ang mga ito sa akin ang pagpipilian Bootstrap, Source Code, o Sass.
Alin sa mga ito ang gusto ko?
>> NEEL MEHTA Oo.
Kaya ang tanong ay, kung paano ka makakakuha ng nagsimula gamit Bootstrap pamamagitan ng ating sarili?
Ito lamang ang mangyayari sa magically magtrabaho dito mismo.
Kaya kung kami ay may oras sa ang katapusan ng seminar,
Ipapakita ko sa iyo kung paano mo kumuha ito sa iyong sariling mga web page.
Tulad dito, na hindi ko talaga ilagay sa ilang mga setting na
ito ay magkakaroon ng awtomatikong load, ngunit Kukunin ko
ipakita sa iyo na gawin ito mula sa scratch sa iyong sariling mga pahina ng web.
>> Madla: Salamat sa iyo.
>> NEEL MEHTA Oo.
Magandang tanong.
Magandang pakiramdam?
Magandang pakiramdam?
Cool.
Kaya na nais na sabihin sa akin kung paano nila ginawa ang bagay na ito ganda ng itsura at Boostrappy?
Ano ang unang klase namin idagdag sa mga ul?
Madla: class = "list-group".
NEEL MEHTA Oo. listahan-group.
At pagkatapos ay kung ano ang i-attach kami sa lis?
Ibang tao?
Madla: At pagkatapos, pagkatapos na, class = "list-group-item".
>> NEEL MEHTA Oo.
>> Madla: At ito ay ang parehong para sa susunod na isa.
>> NEEL MEHTA: li class = "list-group-item".
May pumunta ka.
Mayroon kaming aming magandang listahan ng grupo, tulad namin ay inaasahan.
So doon ka pumunta.
Sa 10 minuto, kami ay ginawa ito panganganak, old Yalp! pahina
ganda ng itsura at propesyonal.
At ito lamang ang simula.
Kaya ngayon na sa tingin mo mabuti ang tungkol sa na, sabihin
lang sige, at makipag-usap tungkol ng ilang higit pang mga bahagi na
maaaring dumating sa madaling-magamit bilang ka pumunta sa kabuuan ng iyong pakikipagsapalaran.
>> Siyempre, mayroong maraming mga dito.
At ngayon na iyong natutunan kung paano gawin ang listahan ng mga grupo
maaari mong medyo marami magturo sa iyong sarili kung paano gawin ang anuman sa mga ito.
Ngunit, siyempre, subukan sabihin lang at gawin ang isang pares pa ang ating sarili,
kaya lang kumuha ka ng isang pakiramdam para sa kung paano mo maaaring gamitin ang mga ito.
Ako lamang ang pagpunta upang pumunta sa halimbawa dito.
Muli, ang mga code na ako lang nailagay in dito ay magagamit karapatan dito.
Kaya huwag mag-atubili na pull ito.
>> Kaya na wala na kami sa pamamagitan ng isang pares ng mga halimbawa.
Kaya kami ay may mga pindutan, na kung saan namin Nakita na kung paano gawin.
Maaari naming gumawa ng mga pindutan na mas malaki.
Sa pamamagitan ng button class-- ito napupunta, btn btn-lg at btn-default gumagawa ito puti.
Kaya ito ay gumagawa ng aming button mas malaki kaysa sa maaaring sa kabilang banda ito ay maaaring.
Ito ay maaaring dumating sa madaling-magamit, kung mayroon kang malaking isumite ang pindutan o isang bagay.
Nakita namin ang mga halimbawa ng listahan ng grupo, Nakita namin ang mga halimbawa form.
>> Isang napaka-mahalagang isa ay mga icon.
At icon ay isang paraan para sa iyo upang magdagdag ng kagiliw-giliw na mga bagay-bagay, tulad ng check check
mga marka, o mga plus, o kaibigan icon, o icon restart,
o kahit na ano sa iyong web app.
Kaya muli, kung kami sa dito, ang mga sangkap, glyphicons,
ang mga icon na magagamit para sa Bootstrap.
May isang malawakan listahan ng lahat ng mga bago dito.
Kaya lang bilang isang halimbawa, Subukan at magdagdag ng isa.
>> Kaya tulad ng Facebook, hindi namin na sinusubukan na magkaroon ng isang pindutan ng Magdagdag ng Kaibigan.
Sabihin unang magdagdag ng ilang mga estilo.
klase ng button = "btn btn-tagumpay".
At doon kami pumunta.
Magdagdag ng isang icon dito.
Ano icon, sa tingin ninyo, maaaring magkaroon ng kahulugan upang ilagay dito?
Malamang na nakita mo sa ang ilang mga pahina ng web o anumang,
ngunit kung ano ang isang halimbawa ng isang icon na maaaring pumunta na rin sa loob ang pindutan na ito?
Huwag mag-atubiling i-browse ang view na ito, kung kailangan mo ng anumang inspirasyon.
May isang pulutong ng mga kapaki-pakinabang mga magagamit dito.
Oo?
>> Madla: Siguro ang isa glyphicon user?
NEEL MEHTA: OK.
Itong isa.
Iyan ay medyo mabuti.
Oo.
Sa Facebook, tingin ko ito magiging hitsura ng isang bit tulad ng.
Kaya narito ang kung paano namin pumunta tungkol sa pagdaragdag ng mga icon sa aming mga pahina.
Kami lamang magkaroon ng isang span-- isang span ay isang neutral container para sa isang bagay.
A div ay isang lalagyan para sa isang bagay, isang span ay isa pang lalagyan.
divs may mga line break sa paligid ng mga ito, na sumasaklaw hindi.
Kaya may iba't ibang paraan ng pagkakaroon ng generic na lalagyan.
Tulad ng ito ay hindi magkaroon ng kahulugan upang ilagay ito sa loob ng isang talata o kahit ano.
Mayroon kaming upang ilagay ito sa loob ng isang bagay kahit na,
kaya namin lamang ilagay sa loob ng isang span.
Kaya span class = glyphicon glyphicon-user "close span.
At kami ay may ngayon icon sa loob ng button.
>> Kaya ito ay hindi tumingin ganap na hindi katulad kung ano ang maaari mong makita sa facebook.com.
At kaya ito ay magaling na ang mga ito ay maaaring talagang ilagay kahit saan gusto mo.
Sa iyong header bar, sa iyong mga grupo ng listahan.
Kahit ano.
Hindi nito kailangang maging sa loob ng isang pindutan.
Kaya bilang isang halimbawa, maaari ko ilagay ang parehong klase dito.
"glyphicon glyphicon-user".
At ito ay lilitaw lamang ang parehong.
Kaya ang mga ito icons-- maaari mong gamitin ang span class = "glyphicon glyphicon-anuman".
At na hahayaan kang magdagdag ng icon saan ninyo gusto.
At icon ay isang napakahalagang bahagi ng paggawa ng isang pagtingin website
propesyonal at magaling.
Kaya hindi lumampas ang luto ito, ngunit ito ay madalas na isang mahusay na bagay upang malaman.
>> Panel, muli.
Kukunin ko na lang gawin ito muli bilang isang pagbabalik-tanaw dahil ang uri ng mga ito ay kasangkot.
Mapapansin mo na sa pag iyong normal na HTML
site sa isang Bootstrap-afied site, magkakaroon ka ng
upang magdagdag ng karagdagang istraktura sa mga website.
Halimbawa, kami ay may mga dagdag na divs dito dahil lang sa mga
ay kinakailangan upang makagawa ng isang panel.
Kaya lamang panatilihin sa isip na magkakaroon ka upang magkaroon ng dagdag na istraktura.
Kaya "panel panel-default".
Siguro ay panel-header.
Sa tingin ko ito ang panel-heading.
Oo.
Mayroon kaming pumunta.
Kaya, muli, doon ay ang aming panel.
>> Isa pang bagay na ating Hindi pa cover, tables.
Tables, sa pamamagitan ng default na hitsura uri ng pangit.
Ganito.
Ngunit lamesa ay, of course, isang mahalagang bahagi
ng kung ano ang gagawin mo sa web development.
Sa Pset7, halimbawa, CS50 Finance, na kung saan ay darating out sa lalong madaling panahon,
kakailanganin mong gamitin ang isang pulutong ng mga tables.
At ng maraming mga web dev gumamit ng isang pulutong ng mga talahanayan upang ipakita ang impormasyon,
tulad ng stock, o marka, o anuman.
>> Kaya sa istilo ng mga talahanayan ay talagang napakadaling.
Idagdag mo ang klase ng talahanayan sa iyong talahanayan.
At, maglakas-loob ko sabihin, mukhang medyo magaling.
Maaari mong gawin ang dagdag na mga bagay-bagay, tulad ng "table table-guhit".
At makikita mo ang mga resulta dito.
Maaari mong gawin ang table-bordered.
Mayroong maraming mga pagpipilian na maaari mong.
Pero talaga, ang pagdaragdag ng isang table, ang klase table,
ay gawin ang iyong mga talahanayan tumingin pretty nice.
Kaya na ang isang maikling rundown ng ang ilan sa mga mas mahalagang mga estilo
at mga bahagi makikita mo kailangan upang gamitin para sa Bootstrap.
Kaya tingin ko na wrap up aming magagandang bahagi.
Ang anumang mga katanungan ngayon tungkol sa kung paano upang gumawa ng iyong mga website maganda?
Paano maaari mong gamitin ang mga ito mga sangkap sa iyong kalamangan?
Magandang pakiramdam?
Oo?
Madla: Maaari ito ay isang hangal na tanong,
ngunit maaari mong gamitin Bootstrap sa Wikipedia?
Kung ikaw ay pag-edit ng isang pahina ng Wikipedia?
NEEL MEHTA Oo.
Kaya ang tanong ay, ako pag-edit ng isang pahina ng Wikipedia,
Maaari ko *** isama ang Bootstrap estilo sa doon?
>> Madla: Oo.
>> NEEL MEHTA: At kaya Bootstrap ay talaga ng isang malaking CSS style sheet.
Ang isang CSS style sheet lang sabi, kahit kailan Mayroon akong klase na ito, i-attach ang mga estilo.
Kaya ang CSS style sheet para sa Bootstrap ay magiging isang bagay tulad .btn,
ang pindutan ng klase, ay makakuha ng tulad ng isang Pabilog na sulok border o kahit anong.
Kaya talaga, Bootstrap ito lamang ang isang grupo ng mga klase at ng grupo ng mga estilo
tinukoy para sa mga klase.
Kaya't hangga't mayroon kang na CSS, ang listahang ito ng patakaran sa iyong pahina,
makakakuha ka ng mga Bootstrap estilo.
Iyon ay, of course, nababatay sa ang pagkakaroon ng mga estilo Bootstrap sa iyong pahina
upang magsimula sa.
>> At kaya sa Wikipedia, mo marahil ay maaaring hindi
gawin iyon dahil Wikipedia ay walang Bootstrap sa loob nito.
Ngunit kung ito ay may Bootstrap, maaari mong malamang na gawin iyon.
At kung nais mo, maaari mong isama ito, ngunit na maaaring
basagin ang umiiral na layout ng pahina.
Ngunit napakagandang tanong.
Maaari mong gamitin ang Bootstrap kung saan man ito ay kasama,
ngunit hindi ito ang nakapaloob sa pamamagitan ng default.
>> Madla: Salamat sa iyo.
>> NEEL MEHTA Oo.
Anumang higit pang mga tanong?
Oo.
Kaya't kung ikaw ay dito o sa bahay, tandaan lamang getboostrap.com-- muli,
getboostrap.com-- ay iyong kaibigan.
Tuwing ikaw ay gumagamit ng Bootstrap, ito ay magbibigay sa iyo
mga tagubilin tungkol sa kung paano makakuha ng nagsimula, kung paano gamitin ang mga sangkap.
Mayroong ilang mga cool JavaScript mga plug-in na hindi namin ay pumunta sa paglipas dito,
ngunit ang mga ito ay nagkakahalaga ng check out pati na rin.
Kaya ito ay ang iyong kaibigan.
Ito ay mahalaga para makarating lamang sa ginagamit sa kung paano gamitin ito.
>> Kaya sabihin makipag-chat ng kaunti tungkol paggawa ng tumutugon sa mga website.
Kaya tulad ng sinabi ko bago, ginamit ng mga tao kanilang mga laptop, ginagamit nila ang kanilang mga telepono.
At bilang maaari mong isipin na rin, ito ay isang napaka-ibang laki ng screen kaysa sa.
At kaya ang parehong website na mabuti sa aking telepono
ay hindi pagpunta upang tumingin mabuti, kinakailangang, sa isang computer.
Kaya kung ano ang kailangan mong gawin ay gawin ang iyong website umangkop.
Ito ay may upang umangkop sa mga iba't-ibang laki ng screen na ito ay sa.
>> Ito ay upang sabihin, alam ko na ako sa isang computer, isang malaking laptop, dapat kong palawakin.
Alam ko na ako sa isang telepono, ang dapat kong pag-urong.
At kaya Bootstrap nagbibigay ng ilang mga tunay, tunay na kapaki-pakinabang na tool upang gawin ito.
Kaya sabihin Bootstrap ni mo pahinga isang website sa 12 mga hanay.
Maaari kang gumawa ng mga hilera at magkaroon ng 12 mga hanay.
At maaari mong pagkahati mga gayunpaman gusto mo.
Maaari kang magkaroon ng isa, malaking bagay, na kung saan ay 12 mga hanay wide.
Maaari kang magkaroon ng dalawang bagay na anim sa bawat isa.
Maaari mong gawin ang isang bagay na apat, isa na ang dalawa, o ang isa na anim ay.
Maaari mong gawin ang tatlong, tatlo, tatlo, tatlo.
Maaari mong gawin ang anumang breakdown na gusto mo.
>> Kaya marahil ang iyong mga web page ay kailangang magkaroon ng isang kaliwang haligi na isang-katlo ang lapad.
Kaya na magiging apat na mga haligi malawak at ang natitirang bahagi ng pahina
ay walong mga haligi lapad.
Kaya ito ay isang halimbawa.
Ni-pull up ng isa pang halimbawa.
>> Madla: ba ito laging kailangang maging isang kahit na nahati?
Maaaring ito ay isang pitong, limang split?
>> NEEL MEHTA Oo.
Ito ay maaaring maging pito, lima.
Oo.
Hangga't ito ay nagdadagdag sa 12, ito ay multa.
Kaya sabihin bumalik dito.
Muli, ang mga code na ito ay dito ay magagamit din dito,
sa ilalim na tumutugon sa mga halimbawa.
Kaya lang hinila ako hanggang sa ilang Halimbawa sumasang code dito.
Kaya mong gawin ito sa pamamagitan ng paggamit isang bagay na tinatawag na hilera.
Hilera ay isa pang klase lamang.
Ito ay isa pang style idagdag ka sa iyong divs na magkaroon ng mga ito ang kanilang sariling mga bahagi.
>> Kaya ang sinasabi mo, div class = "hilera" upang makagawa ng isang hilera,
upang bigyan ang iyong sarili 12 mga hanay ng mga puwang.
At pagkatapos ay ilagay mo haligi sa loob ng na.
Kaya dito col-xs-6 namin.
Huwag mag-alala tungkol sa xs.
Makikita naming makipag-usap tungkol sa isang sec.
Pero talaga, kami ay may isa bagay na anim na lapad.
Tinatawag namin ito pakaliwa.
At kaya na kaliwang kahon dito.
Mayroon kaming isang bagay na anim na ng 12 mga hanay wide.
At isa na sa kanan.
>> well nagbibigay lamang ng gumagawa punan ang iyong mga div ito up gray.
Kaya ito lamang upang maaari naming makita na ang mga ito ay naiiba.
At kaya ito ang unang halimbawa.
Ito ay isang napaka-simpleng halimbawa ng kung paano mo gagamitin ng iyong mga hanay at haligi dito.
Tinutukoy mo ang isang hilera gamit class = "hilera".
At pagkatapos ay gawin mo class = "col-xs-6" gawin kalahati, "col-xs-6" na gawin ang iba pang kalahati.
Narito ang isang mas masalimuot na halimbawa.
Tingnan natin ang mga Napakaliit Hayaan, Malaki, Ang natitirang bahagi ng isa.
>> Maaari naming gumawa ng maliit na maliit dalawang haligi malawak, maaari naming gawin Napakalaki anim na haligi malawak,
at Ang natitira apat na mga haligi lapad.
Na nagdadagdag ng hanggang sa 12.
At kaya ang mga end up na sumasaklaw ang lapad ng pahina.
Muli, kami ay may isang hilera sa labas.
Pagkatapos kami ay may div class = "col-xs-2" at pagkatapos ay 6, at pagkatapos ay 4.
At iyon ay magbibigay ng ang istraktura para sa amin.
At upang maaari naming ilagay ang kahit anong ano ba ang gusto natin dito sa loob.
Sa halip na maliit na maliit, maaari naming ilagay ang isang pindutan.
klase ng button = "btn btn-primary".
At kaya mapapansin na ang aming mga button hindi tumagal ng hanggang ang lahat ng lapad,
ngunit hindi bababa sa ito ay limitado sa na maraming space.
>> Kaya na ang lahat ng maayos at mabuti.
Kaya maaari na ngayong buksan up ang aming web pahina sa chunks, lapad matalino.
Maaari naming sabihin gusto naming magkaroon ng isang kaliwa haligi, at haligi ng isang karapatan, at iba pa.
Ngunit hindi pa namin libutin paano mo gawin ito tumutugon.
At kaya Bootstrap sabihin gawin din iyon.
Ito ay may mga bagay na tinatawag na breakpoints.
Kaya ito ay may isang paraan ng pag-alam kung ikaw ay nasa isang laptop, ikaw ay nasa isang tablet,
ikaw ay nasa isang horizontal telepono, o ikaw ay nasa isang phone vertical.
Ito alam ang laki ng screen.
At break na ito sa apat na categories-- malaki o lg, na kung saan ay mga laptop, kadalasan.
md o medium, na kung saan ay tablet.
SM, maliit.
O xs, dagdag na maliit.
At kaya kapag tinukoy mo ang ang isang haligi, sabihin mo,
ito ay dapat na anim na haligi malawak sa isang dagdag na maliit na aparato.
Iyon ay kung bakit namin ginawa col-xs-6.
Ay sinasabi namin na dapat ito maging anim na ng 12 mga hanay malawak
sa isang dagdag na maliit na aparato.
At kung ito ay mas malaki sa anumang bagay, makikita namin lamang default sa paggamit ng mga dagdag na maliit na sukat.
Kung ito ay ang anumang bagay na mas malaki kaysa sa dagdag na maliit, ito ay anim na lapad.
At upang maaari naming pagkilos mga ito upang gumawa ng aming mga haligi
tumagal ng hanggang iba't ibang mga halaga ng haligi batay sa laki ng screen.
Sabihin pumunta sa ito tumutugon sa pagbabago ng laki.
Kaya na namin ang aming mga haligi.
At sinasabi nito, "col-lg-6 col-xs-12".
Kaya ibinigay ang iyong nalalaman sa ngayon, ano ang gagawin mo
isipin ang pagpunta sa mangyayari sa isang malaking screen?
Well, ito ay uri ng ibinigay na paraan, ngunit kung ano ang ginagawa
sa tingin mo ito ay tumingin gusto sa isang malaking screen?
At bakit ganoon?
>> Madla: ba ito na sa isang malaking screen, ito ay
pagpunta sa tumagal lamang ng isang bahagi ng buong space?
Tulad ng kalahati nito, sa palagay ko?
>> NEEL MEHTA Oo.
>> Madla: At sa mas maliit screen, ito ay pagpunta
na tumagal ng hanggang ang buong screen, ang 12.
NEEL MEHTA Oo.
Right.
Kaya bilang isang halimbawa, sabihin tumungo lamang dito.
Oo.
Kaya sa anumang bagay na lg o bigger-- kaya ang aking computer ang mangyayari
na lg dahil sa ito ay pretty wide-- ito ay gumawa ng
ito magkatabi dahil sa ito ay col-lg-6.
Kaya dahil sa ito ay sa mga malalaking, ito ay gumagawa ito anim na haligi lapad at anim na haligi wide.
Tingnan natin kung ano ang mangyayari kung ako Hayaan gumawa ng mga ito sa isang mas maliit na isa.
Lamang ako ng pagpunta sa un-full screen na ito.
At ako pagpunta sa pag-urong ang screen.
Pupunta ako sa pag-urong ng screen, kaya Mukhang ako sa isang mas maliit na aparato.
Kaya ako pagpunta sa pag-urong ito tulad nito.
>> At voila.
Ito ay isinalansan ngayon dahil ngayon ay wala na kaming
mula sa malalaking to-- ito ay marahil ng dagdag na maliit na sukat ng screen.
At kaya ngayon sinasabi nito, OK, kami ay hindi sa malaki, hindi namin sa dagdag na maliit na lupa.
Kaya kami ay pagpunta upang gamitin ang ang mga dagdag na maliit na sukat.
At kami ay pagpunta sa xs-12, xs-12.
Kaya ito ay pagpunta sa nakasalansan.
At mapansin lamang na may isang bagay na tinatawag na isang breakpoint.
Ang isang breakpoint ay kung saan mo ginawa ang paglipat
mula sa dagdag na maliit na maliit, maliit hanggang sa malaki, at iba pa.
>> Mapapansin kaya lang na bilang slide ko ito out, sa huli, makukuha mo na ang punto
kung saan ang mga ito ay tumalon na magkatabi.
May pumunta ka.
Kaya may mga breakpoint may karapatan.
Kaya maaari naming gawin itong mas kumplikado.
Ngayon ay maaari naming sabihin, ang mga dapat na apat na malawak na mga bagay.
Iyon ay, sila ay dapat na tumagal ng hanggang tungkol sa isang third
ng pagsasalita sa napakalaking device.
Sa isang medium device, dapat itong tumagal hanggang sa kalahati ng screen dahil sa ito ay MD-6.
Sa isang tunay maliit na device, dapat itong tumagal nang hanggang 12.
At kaya ito ay mukhang medyo natural.
Subukan lang ni ito para sa ating sarili Hayaan.
>> Kaya sa isang malaking screen, ang mga ito ay apat na wide.
Paliitin ito nang kaunti.
At ang mga ito ay anim na ngayon ang lapad.
Kaya ito ay anim, anim, anim.
Paliitin ito kahit na higit pa at pagkatapos ay sila ay ganap na nakasalansan.
Kaya ito, halimbawa, ang akma kung nagkakaroon ka ng card, tulad ng mga balita cards,
Halimbawa, kung saan kung ito ay sa isang malaking screen,
ito ay ang OK kung ikaw ay may ilang mga side-tabi dahil sila makakuha ng lahat ng sapat na silid.
Ngunit kailangan nila upang magkaroon ng sapat na kuwarto.
Kaya sa isang mas maliit na screen, gusto mo nais na bigyan ang mga ito
higit pang room, proportionally, ng pahina.
>> Kaya bilang isang halimbawa ng tunay na mundo, sabihin natin na mayroon kami sa Twitter.
At kami ay may kahon ng teksto, sa gayon maaari mong tweet sa gilid.
At kami ay may isang listahan ng mga nagte-trend paksang ito sa kanang bahagi.
Kaya sa isang malaking screen, dapat tayong magkaroon ng mga ito na magkatabi,
upang maaari mong makita ang mga ito sa isang baso.
Ngunit sa isang mas maliit na screen, dapat naming gawin ng 12 at 12,
sa gayon ay ang mga paksa na trending ay nasa ibaba ang tweet area.
Dahil ang mga tweet na lugar ay ang pangunahing bagay at sa isang maliit na screen,
ang trending topics hindi kahit pa ng mas maraming.
At kaya namin ilagay ang mga ito sa kanan sa ibaba, para na maaaring sila ay parehong makakuha ng sapat na espasyo.
Gumawa unawa sa ngayon?
>> Madla: Oo.
>> NEEL MEHTA: Solid.
Kaya na ang lahat ng mga halimbawa ko rito.
Subukan at gawin ang isang hamon Hayaan.
Kaya muli, ito ay hamon-2.html para sa mga ka sumusunod na kasama sa bahay.
Kaya ang aking buddy, Mark Zuckerberg, dumating sa akin ang iba pang mga araw.
At siya ay tulad, Neel, mayroon akong tapat na paraan ay medyo magandang sa web design.
Maaari kong gawin ang HTML.
May ginawa akong maliit na ito, bagong edit sa Facebook.
Mayroon akong isang bagong ideya para sa kung paano dapat naming style Facebook.
At dito ito ay.
Dito.
Narito ang ilang mga halimbawa ng code.
Kaya ito ay tinatawag na Fancybook.
>> Mayroon kaming ilang mga update ng katayuan.
Mayroon kaming Nemo, Mike Kosowski, ***-- tatlong update ng katayuan.
At pagkatapos kami ay may isang listahan ng mga online na mga kaibigan sa kanan sa ibaba nito.
Kaya siya ay natapos na ang kanyang homework.
Alam niya nang kaunti tungkol sa Bootstrap, siya ay ginawa ang view ng listahan,
siya ay tapos na ang isang maliit na piraso ng HTML.
Kaya siya ay may mga web page.
Subalit siya ay tulad, Neel, hindi ako Naiintindihan tumutugon disenyo sa lahat.
Mayroon ba kayong anumang mga eksperto na maaaring makatulong sa akin na iyon?
At sa kabutihang-palad, ikaw ngayon eksperto sa tumutugon disenyo.
>> Kaya kung ano ang sinabi niya sa akin ay na siya Nais ng Fancybook sa ganito ang hitsura.
Sa isang tunay maliit na device, tulad ng isang telepono, lahat ng bagay
dapat na isinalansan, tulad dito.
Kaya mo ang timeline upfront, up itaas, at pagkatapos ay
dapat ay may bar chat sa ibaba.
Ngunit sa isang tablet o isang medium aparato, ito ay dapat na kalahati at kalahati,
tulad ng sa timeline ay dapat na half at ang listahan ng mga kaibigan chat
dapat sa iba pang kalahati.
>> Pagkatapos sa isang laptop, mga timeline dapat tumagal ng hanggang tatlong fourths
at pagkatapos ay ang chat bakod dapat tumagal ng hanggang isa quarter.
At kaya siya ay tulad, Neel, Mayroon akong na ito code dito, ngunit ito ay hindi na tumutugon.
Ito mga pangangailangan upang kumilos na tulad nito.
Kaya ang aking hamon sa iyo ay ibinigay ang code na ito here--
kung i-refresh mo ang iyong CodePens, makikita mo na ito.
O kung ilagay mo lamang ang code sa hamon-2, makikita mo ang mga ito.
>> Narito ang halimbawa ng code.
Makikita mo ang ilang xxxs.
Gusto ko sa iyo upang baguhin ang xxxs, tulad na ang timeline at ang listahan ng mga kaibigan
sumusunod sa mga specs dito.
Huwag mag-alala tungkol sa kung ano ang sa loob ng takdang panahon para sa ngayon.
Babalikan ka namin na sa susunod na hakbang.
Ngunit sa ngayon, tingnan natin kung makuha namin ang mga bagay na nahati ito tulad nito.
Kaya ang ginagawa na magkaroon ng kahulugan?
Kaya't kung ikaw ay nasa bahay, i-pause ang video at subukan
upang gumawa ng iyong web page Tumingin tumutugon tulad nito.
Kung nandito ka, dalhin tulad ng dalawa, tatlong minuto.
Huwag mag-atubiling makipag-chat sa isang kapitbahay, at subukan, at ayusin Mr. Zuckerberg
nakikiramay disenyo ng problema.
Kung mayroon kang anumang mga katanungan, huwag mag-atubiling ipaalam sa akin.
Magandang pakiramdam?
Tapos na?
Nice.
>> Madla: [hindi marinig].
NEEL MEHTA: Ano?
>> Madla: ako ay mabuti.
>> NEEL MEHTA: Oh, good.
Nice.
Madla: Ang mga bagay tungkol 12, ito na ang Bootstrap
itinuturing ng isang naibigay na puwang ng screen bilang 12 yunit sa kabuuan at pagkatapos ay naghihiwalay na up?
Paano eksaktong gumagana ang proportioning trabaho para sa mga ito?
>> NEEL MEHTA Oo.
Kaya ang tanong ay, kung paano ang ipinapakita ng proportioning
trabaho para sa Bootstrap, di ba?
>> Madla: Oo.
NEEL MEHTA: Kaya sa tuwing ikaw ay may isang div class = "hilera",
kahit gaano kalaki ang screen ay, Bootstrap ay magbibigay sa iyo ng 12 units
ng parehong sukat sa tumagal ng hanggang ganoong karaming laki.
Kaya sa col 1, ito ay palaging 8.33% ang laki ng screen,
kung na ito malawak o na ito ang lapad.
At ito, siyempre, sa isang mas maliit screen, bawat haligi ay mas maliit.
Ikaw pa rin ang 12 mga hanay malawak, ito ay isang mas maliit.
Kaya ito ay nasa sa iyo upang tiyakin na na ang mga bagay ay kumukuha ng maraming column,
proportionally, sa pagpunan para na kakulangan ng espasyo.
Ba na magkaroon ng kahulugan?
>> Madla: Oo.
Salamat.
NEEL MEHTA: Magandang katanungan.
Madla: Sa isang malaking screen, maaaring magkaroon ka
ang timeline tumagal ng hanggang tatlong fourths?
>> NEEL MEHTA Oo.
NEEL MEHTA: Paano ay pakiramdam guys?
Good?
Cool.
Kaya sabihin bumalik ipaalam.
At sabihin subukan at ayusin ang bahagi na ito ng website Mr. Zuckerberg.
Kaya ang takdang-panahon ay up dito, sa tuktok, at ang listahan ng mga kaibigan
ang nasa ibaba.
At kaya kailangan lang namin upang magtalaga hanay, na may pagpapalaki proporsyonal,
sa bawat isa ng mga ito.
Kaya ito ang unang *** ay para sa timeline.
Anong klase gawin ilalagay namin dito?
Ano ang sinabi sa iyo guys na ilagay sa dito?
Kaya tandaan, sa isang malaking screen, ang mga pangangailangan na tumagal ng hanggang tatlong-kapat ng lapad.
At kaya kung ano ang estilo ay magbibigay sa iyo iyon?
Sa isang malaking screen, tatlong tirahan ng mga lapad.
Anong klase ang ginagamit namin doon?
Madla: Kaya kami ay lamang ang pagpunta sa pag-edit na unang pagkakataon ng klase.
NEEL MEHTA: Para sa ngayon.
Oo.
>> Madla: Hindi namin ine-edit ang bawat isa, indibidwal na katangian ng timeline?
NEEL MEHTA: Hindi ngayon, hindi bababa sa.
Kaya ang buong bagay ay isang block.
Lamang Binabago namin ang pagdisenyo ng mga block.
Kaya dito namin col-lg-9 dahil sa ito ay siyam na labas sa mga 12 iba't sa isang malaking screen.
At pagkatapos ay sa isang medium screen, kung gaano karaming mga hanay ay dapat na makukuha ko?
Madla: Ito ay dapat na kalahati at kalahati.
NEEL MEHTA: Kanan.
Kaya kung gaano karaming ay na?
>> Madla: Kaya anim.
NEEL MEHTA: Six.
At pagkatapos ay dagdag na maliit dapat be-- kung ito tumatagal ng hanggang sa buong lapad ng hanay,
kung gaano karaming mga ito ay dapat?
Madla: 12.
NEEL MEHTA: 12.
Oo.
At ngayon namin nakuha upang baguhin ang iba pang mga bago,
kaya ito ay tumatagal ng hanggang sa ang magpahinga ng ang space.
Kaya col-lg--
Madla: Ito ay pagpunta sa tumagal ng hanggang ang buong screen?
NEEL MEHTA: Ito ay tumatagal ng hanggang sa apat na bahagi ng screen sa isang malaking device,
bilang namin ipinakita dito.
>> Madla: Three.
>> NEEL MEHTA: Three.
At pagkatapos ay col-MD-6 na kumuha ng up sa ibang bahagi ng espasyo.
col-xs-12.
Kaya ngayon kami ay may mga timeline pagkuha up tatlong-kapat
ng pahina sa malaking screen at pagkatapos ay isang kapat sa gilid.
At pagkatapos ay kung ang laki ng screen down, ito ay dapat na baguhin ang laki nang naaayon.
Kaya ito ay isinalansan ngayon, sa isang tunay maliit na screen.
At kung laki namin ito up nang kaunti, sila ay dapat na eksaktong kalahati at kalahati.
Kaya nagawa namin na sa ngayon.
Very cool.
At kaya hindi namin ay gawin ang iba pang mga bahagi ng hamon.
Maaari mong gawin na ang iyong sarili.
Ngunit talaga, kailangan mong subukan at gumawa ng mga tumutugon
bilang na gagawin well-- ang timeline mga bagay, sa kanilang sarili, na tumutugon.
Kaya ngayon kami ay wala na sa pamamagitan ang lahat ng kailangan mong malaman
tungkol sa mga tumutugon na bahagi ng Bootstrap.
Ang anumang mga katanungan tungkol sa tumutugon disenyo sa Bootstrap
at kung paano maaari kang pumunta tungkol sa paggawa na?
Oo?
>> Madla: Ito ba ay katulad kung nagkaroon kami ng isang naka-embed na video
at gusto naming kontrolin ang laki at kung saan ang mga video was--
ang laki ng video pagpunta mula sa laptop sa phone.
NEEL MEHTA Oo.
Humigit-kumulang.
Gusto mo kailangang sabihin ang mga video sa tumagal ng mas maraming kuwarto bilang na ito ay ibinigay,
kung saan ay isang maliit na nakakainis minsan.
Ngunit ang mga pangunahing ideya ay ang parehong.
Ang isang video, tulad ng anumang iba pang mga bagay sa mga pahina, tulad ng isang pindutan o anumang,
hangga't ginagamit mo ang mga haligi at mga hilera,
maaari mong bigyan ito ng isang tiyak na halaga ng space.
At kaya sa pagkuha ng ito sa karangalan na isang ibang tanong dahil tulad ng YouTube
Pag-embed ng isang tiyak na, ginustong laki.
Ngunit theoretically sa hindi bababa sa, ito ay gumagana.
Cool?
>> Madla: pagkatapos ipagpalagay ko, para sa isang imahe, ikaw talaga
kailangan na magkaroon ng iba't ibang bersyon ng ang parehong larawan sa iba't ibang laki
para sa laptop kumpara iPhone?
Oo ang tanong ay, ang kailangan nating magkaroon ng mga imahe na tumutugon na rin.
At sa katunayan, maaari mong gawin iyon.
Sa tingin ko ito sa CSS.
Ngunit nagbibigay-daan sa Bootstrap mong gawin din iyon.
Maaari kang magkaroon ng tumutugon imahe.
Maaari kang magkaroon ng laki ng iyong mga larawan ayon sa laki ng pahina.
At doon ay isang napaka-bagong bagay HTML5, ang pinakabagong bersyon ng HTML,
at CSS3, ang pinakabago bersyon ng CSS, na
hahayaan kang humiling ng iba't ibang mga imahe batay sa laki ng screen ikaw ay sa.
Karaniwan, ito ay mahusay na sapat upang lamang magkaroon ng iyong imahe urong lamang o maging sa
subalit malaking kailangan nito upang maging.
Ngunit maaari mo, kung nais mong sa, magkaroon ng isa 32 sa pamamagitan ng 32
para sa mga tunay maliit na screen, at 64 sa pamamagitan ng 64 para sa isang malaking screen,
at pagkatapos ay maghatid ng mga pili.
Kaya mo yan.
Ito ay ginagawa sa pamamagitan ng ilang mga tao.
Ito ay medyo cutting edge pa rin.
Ngunit maikling sagot, tumutugon images-- Bootstrap maaaring i-save ang araw doon.
Cool?
>> Madla: Salamat sa iyo.
>> NEEL MEHTA: Kaya sabihin makipag-usap sa real mabilis tungkol sa kung paano
upang makakuha ng ito sa iyong sariling web page.
Ipagpalagay natin na nais mong gawin ang iyong mga sariling website gamit Bootstrap.
At kaya sabihin lang lamang maglakad sa pamamagitan ng sama-sama.
Sabihin nating gumawa ka lamang isang normal na pahina ng HTML.
Huwag mag-atubiling sundin kasama sa ano man ang iyong mga paboritong editor ay.
Kaya kami na lang ang ilang mga pahina ng HTML.
Maaari naming gawin! Doctype html.
Ito ang html, ang aming pahina din.
Walang bago.
Kami tapos na ito bago.
Kaya dito na namin ang aming HTML at maaari naming ilagay ang mga bagay-bagay sa loob dito.
Maaari naming magkaroon ang aming mga button.
At tulad ng sinabi ko bago, ito ay hindi palaging pagpunta sa trabaho.
Bakit maaaring hindi ito gumana?
Bakit hindi kami makakuha ng aming nice, makulay na button?
>> Madla: Dahil hindi namin ginawa link ito sa proyekto Bootstrap o ang file?
NEEL MEHTA Oo.
Tamang.
Dahil Bootstrap-- ito ay lamang ng isang magarbong CSS file.
Ito ay isang serye ng mga estilo na ay naka-attach sa iyong mga elemento.
Narito Sinabi na namin ito na tayo nais na gumamit ng mga estilo.
Kukunin ko ang laki na hanggang sa ilang sandali.
Sinabi na namin ito gusto naming gamitin mga estilo, ngunit hindi namin
ipinagbigay-alam ito sa kung ano ang estilo ay.
At na kung ano ang iyong tanong mula sa mas maaga ay.
Iyan ang sagot na iyon.
Kailangan namin upang mahanap ang isang paraan upang makuha ang mga estilo at isama ang mga ito sa aming pahina sa anumang paraan.
At kaya Bootstrap kalooban ipakita sa amin kung paano gawin iyon.
>> Kaya't kung ikaw ay pumunta sa tuktok dito, Pagsisimula.
May iba't ibang paraan upang i-download ito.
Maaaring hindi magkaroon ng kahulugan kinakailangan.
Bootstrap-- ito ay nagpapahintulot sa inyo sunggaban mo ang sarili nito CSS file.
At kasama mo ito sa iyong sariling mga pahina.
Source Code ay kung gusto mong sa hack sa mga ito sa pamamagitan ng iyong sarili.
Hindi mo na kailangan na ito talaga.
Sass ay isang wika na compiles sa CSS.
Isipin ito bilang isang preprocessor.
Karamihan tulad ng PHP ay isang preprocessor ng HTML, Sass ay isang preprocessor para sa CSS.
Kaya kung nais mong gawin ito na paraan, maaari mong gawin iyon.
>> Ang pinakamadaling paraan ay ang paggamit ng isang CDN, o sa paghahatid ng network ng nilalaman.
Ito ay isang website na lamang Naghahain up ng isang kopya ng Bootstrap
napakabilis para sa iyo upang isama sa iyong sariling pahina.
Kaya narito ang isang halimbawa.
Makikita ito sa iyo ang link na element.
Ang isang link na elemento ay nagsasabi sa iyong browser, kumuha ng kahit anong file ay naka-imbak dito
at isama ito sa aming web pahina.
At sa kasong ito, ito ay saBootstrap- CSS file.
Kaya kami na lang kopyahin ang URL na iyon, o text na, at kami na itapon ito sa loob
ng ating ulo.
>> At hindi ko ay magsisimula ang page na ito para sa, ngunit maaari kang magtiwala na ito ay gumagana.
Ang link na makakapagbigay sa iyo ng CSS.
Isama ito sa iyong pahina at pagkatapos ay makikita mo ang
maaaring gamitin ang lahat ng mga Bootstrap klase na alam mo at pag-ibig.
Kung nais mong panatilihin ang mga ito sa lokal at magkaroon ng ito sa iyong sariling mga file system
sa halip ng pagkakaroon upang pumunta sa ang internet upang kunin ito,
tulad ng kung nais mong gamitin ang site offline,
maaari mong gamitin ang pagpipilian Download.
Ngunit para sa karamihan ng bahagi, ang paggamit sa CDN ay medyo mabilis dahil na paraan,
ito ay pinananatiling-update para sa iyo pati na rin.
Mayroon kang upang mano-manong i-update ito sa alinman.
Magkaroon ng kahulugan?
>> Kaya ng maraming mga kasangkapan na ito ay may ito built sa pamamagitan ng default. Sa iyong Pset7 at Pset8,
Naniniwala ako Bootstrap ay awtomatikong kasama.
At sa CodePen, para sa Halimbawa, ito ay mayroon na
kasama dahil ako idinagdag si setting na iyon.
Kaya kung nais mo mang i-play sa paligid sa mga ito, maaari kang pumunta lamang sa CodePen,
o pumunta sa iyong ID, o anumang.
At maaari mo na access Bootstrap doon,
ngunit ito ay hindi palaging built sa, sa pamamagitan ng default, sa web.
Magkaroon ng kahulugan?
>> Oo.
lamang bilang isang recap-- kami tulad ng limang minuto ang natitira.
Ngunit bilang isang pagbabalik-tanaw, sa bagong mga web page, maaari mong isama ang Bootstrap tulad nito.
At sa sandaling ikaw ay may kasama ito, maaari mong gawin ang lahat ng mga nakakatuwang bagay-bagay dito.
Maaari kang pumunta sa, at maaari mo lamang bumasang mabuti ang CSS, maaari kang magdagdag ng ilang mga cool na mga estilo,
maaari kang magkaroon ng bahagi tulad ng mga pindutan,
at ang mga talahanayan, at ang listahan mga bagay na aming nabanggit.
Mayroong ilang mga cool na plugin JavaScript, na kung saan ay maaari mong galugarin.
Sila magdagdag ng ilang mga cool na interactivity sa web page.
Tulad ng isang ito ay gumagawa ng isang modal dialogue.
>> Kaya may ilang mga bagay-bagay masaya maaari mong gawin sa Bootstrap.
Kaya ang aking payo sa iyo ay sige at gamitin ito sa iyong sariling mga proyekto,
sundin ang mga tagubilin namin ang gaya ng sa kung paano makakuha ng mga ito,
at basahin lamang ang Bootstrap dahil makikita mo matuto nang higit pa tungkol sa kung ano ang dapat gawin.
At kaya kami ay wala na sa ibabaw, ngayon, kung paano gamitin ang
ang dokumentasyon, kung ano ang mga gusali bloke, at kung paano ito ay conceptually.
Kaya ngayon ang aking hamon sa iyo ay gumawa ng isang website gamit ang Bootstrap.
Pumunta sa mga docs.
At gamitin ang mga tool na kami natutunan sa ngayon upang subukan at i-parse ang mga ito
at maunawaan ang mga ito.
At gumamit ng mga estilo at mga tool nakikita mo doon sa iyong website.
At ito ay lamang ng isang malaking, experimental proseso.
>> Subukan ang isang tiyak na estilo.
Gumagana ba ito?
Sinusuportahan ba ang hindi?
Subukan ang paglalagay ng mga bagay-bagay nang magkakasama.
Tingnan kung ano ang mangyayari.
Ito ay napaka isang sa sarili guided, pagkatuklas proseso.
Ngunit ngayon, ang aming natutunan ang tunay pangunahing kaalaman ng kung ano ang Bootstrap?
Bakit ito gumagana?
Paano ito gumagana?
Paano ko sisimulan namin ang paggamit ng ito, sa unang lugar?
At kaya ngayon na kayo higit na maumbok, ikaw
dapat na magawa ito medyo maayos sa pamamagitan ng iyong sarili.
>> Kaya muli, ang lahat ng mga code na aming ginawa ay dito.
Kaya kung sakaling gusto mong upang makakuha ng isang brush up on,
tulad ng, kung ano ang isang mabilis na cheat sheet para sa lahat ng estilo?
Maaari kang pumunta sa sample na ito dito.
Mayroon kaming ilang mga halimbawa estilo dito.
Kung nais mong subukan ang hamon muli sa pamamagitan ng iyong sarili,
maaari mong subukan ang mga ito dito at suriin ang mga solusyon.
Kaya ang link na ito ay magiging Kasama sa mga slide, na kung saan
ay ipapadala sa iyo ng mga kurso.
Ngunit ito ay din up dito.
Maaari mong i-pause ang video, kung gusto mo.
Ang lahat ng impormasyon na kailangan mo ay magiging dito mismo, sa site na ito.
Kaya kung ang sinuman ay may anumang mga katanungan, maaari naming kunin ang mga ito para sa susunod na ilang minuto.
Kung hindi man, salamat sa lahat napaka para sa panonood.