Tip:
Highlight text to annotate it
X
>> NEEL Mehta: Kwa hiyo hello kila mtu ambaye ni kuangalia hapa,
au kuangalia online, au remotely.
Jina langu ni Neel, hii ni CS50.
Na semina ya leo ni shukrani Web Design na Bootstrap.
Ni somo hilo ni karibu sana na moyo wangu.
Hopefully, itakuwa karibu na moyo wako
ikiwa ni pamoja na mwisho wa semina ya leo.
Hivyo Bootstrap.
Ni wangapi wenu wamefanya yoyote aina ya maendeleo ya mtandao kabla?
Kiasi nzuri?
Kidogo.
>> Hivyo Bootstrap ni wengi zaidi duniani maarufu, mbele-mwisho mfumo.
Ni kutumika by-- nimekuwa waliochaguliwa michache ya random websites--
Lyft, Newsweek, na Vogue.
Ni kutumiwa na idadi ya Nje.
Ni kubuni mfumo kuwa basi wewe kufanya tovuti yako
wote nzuri na msikivu.
Na mimi itabidi kwenda juu hivi dhana mbili hapa.
Nzuri.
Hivyo una tovuti ya kawaida juu ya kushoto, ambayo ni yaliyotolewa na tu HTML.
Wameweza kujifunza HTML katika darasa na katika sehemu kwa kirefu.
Bootstrap ni njia ya kufanya tovuti yako nzuri.
Unaweza kuchukua nini juu ya upande wa kushoto wa screen yako
na kugeuka ndani nini juu ya upande wa screen wako wa kulia na sana,
sana, kidogo sana kificho.
>> Wewe kupata nzuri ya bluu kifungo, kupata dhana tu, rounded edges juu ya screen,
kupata orodha mtazamo, unaweza kupata kadi, na kadhalika kwa kificho kidogo sana.
Kuna kweli hakuna CSS kwamba una kuandika na wewe mwenyewe.
Hivyo Bootstrap utapata na hizi CSS kabla ya kujengwa
vipengele unaweza kuweka ndani ya mtandao ukurasa wako
kufanya ni kuangalia nzuri bila kazi sana juu yako mwenyewe.
Ni kweli bootstrap, kianzio,
kwa Adventures yako maendeleo ya mtandao.
Na hivyo wakati uko tu mzaha up tovuti,
ni nafasi nzuri sana ya kupata kuanza.
Unaweza kupata nzuri kuangalia tovuti pamoja sana, kazi kidogo sana.
Na hakika, tunakwenda kufanya hivyo wenyewe
katika mwendo wa kama tano minutes-- ndani ya dakika 10.
Hivyo ni rahisi sana kufanya tovuti ya baadhi kubwa.
Hivyo hiyo ni sehemu ya kwanza.
>> Pili part-- msikivu.
Watu, siku hizi, kufanya sio tu kupata mtandao juu ya Laptops yao.
Kwa kweli, kama wa 2014, watu zaidi kupata mtandao kupitia vyombo vya muziki,
kama simu, au vidonge, au huduma, au kadhalika kuliko Nje.
Na tovuti kijadi yamekuwa iliyoundwa na Laptops au kopyuta
katika akili.
Na hivyo Nje ni mara nyingi si vizuri sana inafaa kwa simu yako.
Kama umewahi alitembelea harvard.edu kwenye simu yako,
ni aina ya annoying uzoefu, sawa?
Hiyo ni kwa sababu si msikivu.
Sisi ni kujaribu kufanya Nje kwamba ni msikivu,
kwamba kukabiliana na screen ukubwa wa watu.
>> Hivyo kama ni simu, ni kwenda kwenye simu.
Kama ni kibao, ni kwenda kwenye kompyuta.
Ni anpassar kwa mechi screen kwamba ni kuwa kutumika.
Na hivyo Bootstrap pia inatoa baadhi ya sana, muhimu sana huduma kwa ajili hiyo.
Na tunakwenda kujadili kuwa vilevile.
Hivyo tena, kuna sehemu mbili kwa Bootstrap-- nzuri na kuwajibika.
Tunakwenda kuzungumzia hayo.
Kwanza, nzuri.
Na kisha msikivu.
>> Basi wote kificho kwamba tuko kwenda kuzungumza kuhusu today--
tunakwenda kuwa na mengi ya mifano, changamoto nyingi, na hivyo on-- ni
zote anaishi katika tovuti hii hapa.
Slide Hii ni nini sisi kupelekwa nje.
Hivyo kama wewe ni hapa, unaweza kujisikia bure kwa kuwa na kuandika kwamba chini.
Na kama wewe ni kuangalia remotely, kuhisi bure kuvuta hii up kwenye kompyuta yako
vilevile.
Pengine utasikia haja yake wakati wa kozi ya semina hii.
>> Hivyo sisi ni kwenda kutumia tovuti inayoitwa CodePen,
ambayo ni coding shirikishi mazingira, wakati wa semina hii.
Na CodePen-- na mimi itabidi kuonyesha hapa halisi fast--
utapata kuandika HTML kwa kushirikiana.
Siwezi kuandika, siwezi kutuma kwa nyie, nyie unaweza hariri yake.
Hata kama wewe ni kijijini, wewe bado wanaweza kupata njia hiyo.
Unaweza aina HTML kificho katika juu na itabidi moja kwa moja
kuwa waongofu katika ukurasa wa mtandao chini.
Hivyo ni njia kwa wewe haraka kujaribu nje kificho
bila ya kuwa na kufanya aina yoyote ya mambo juu ya IDE yako, au tovuti yako mwenyewe,
au chochote.
>> Hivyo kwenda mbele na kuvuta up hii tovuti, ikiwa ni kijijini
au kama wewe ni hapa, hasa kama wewe ni mbali.
is.gd/cs50boostrap.
Hakuna kofia, hakuna inasisitiza, hakuna kitu.
Hivyo wale ambao ni hapa, nipe tu Thumbs
up wakati una kujiondoa up kwamba ukurasa wa mtandao.
Nzuri?
>> Watazamaji: Ndiyo.
>> NEEL Mehta: Hivyo tutaweza kupata kwa kuwa katika haki ya pili.
Hivyo kwanza, tunakwenda kupata, jinsi gani ya kufanya tovuti yako nzuri?
Tunakwenda kujifunza jinsi ya kuchukua boring, HTML zamani, kama mimi ilionyesha wewe kabla,
na kugeuka kuwa katika vipengele ni nzuri,
kama nzuri vilivyoandikwa, nzuri, rangi vifungo, na maandiko, na meza,
na wote, kwa kutumia Bootstrap.
Hivyo kama tunaweza zote kwenda juu ya CodePen kwamba wewe tu vunjwa juu.
Ni lazima kuangalia kidogo kama hii.
Je, ni kuangalia kama hii kwa kila mtu?
>> Watazamaji: Ndiyo.
>> NEEL Mehta: Kama uko mbali, ni inapaswa kuangalia kama hii pia.
Kama siyo, nami nitakuonyesha jinsi haraka unaweza kupata kuangalia kama hii
katika sehemu ya baadaye ya video.
Hivyo hapa sisi wameandika HTML msingi sana,
kama aina wameweza wamekuwa wakitumia darasani.
Ni pretty msingi.
Hakuna madaha.
Na tuna baadhi ya mambo.
Tumekuwa iliyoundwa sana, msingi sana kuanzisha
piga Yalp! na ambayo unaweza kupata migahawa katika eneo hilo,
na kupata maoni, na maelekezo juu ya wale wote.
Ni dhana nzuri sana.
Ni haijawahi kufanyika kabla.
Ni jina la kipekee sana, pia.
>> Hivyo kile sisi ni kwenda kujaribu kufanya ni kusaidia mmiliki
ya Yalp! kufanya tovuti yake kuangalia kweli, kweli cool.
Hivyo kwa kuanzia, mmiliki wa Yalp! imefanya la kidogo
sanduku, na kifungo kidogo, na kisha labda kidogo
yalionyesha eneo kwa yalionyesha mgahawa, na kisha
orodha ya migahawa mengine walio katika eneo hilo.
Ili tuweze tu kwenda kwa njia HTML code halisi kwa haraka.
Jinsi vizuri ni nyie na HTML?
Tumefanya kidogo sehemu na pia darasani.
Heshima?
>> Hivyo tu kama kurejea, HTML ni wote juu ya kuwa
vitambulisho au mambo ambayo kuwaambia kompyuta jinsi ya kuweka nje ukurasa wa mtandao.
Hivyo h1 hii here-- kuanza h1, Karibu kwa Yalp !, mwisho h1-- anasema kompyuta,
kuteka kichwa kubwa ni anasema, Karibu Yalp!
ndani ya huko.
Sisi pia kuwa fomu.
Tunaweza pembejeo kama hii, pembejeo maandishi, ambayo atatoa kama masanduku Nakala
kuandika katika.
Unaweza pia kuwa vifungo.
Wewe kupata nzuri, clickable kifungo.
Haina kufanya chochote haki sasa, lakini wewe kupata kifungo.
Unaweza kuwa divs, au dividers, kwa kuvunja ukurasa wako katika makundi mbalimbali.
>> Unaweza kuwa aya, una vifungo.
Kama una aya, kisha una orodha unordered, ul,
na orodha ya ndani ya kwamba, li.
Basi hizi ni za msingi sana kuanza ujenzi wa ukurasa wa mtandao.
Na hakika, pretty much kila tovuti ya kuona
ni kwenda kuwa kujengwa kwa kutumia zana hizo hizo.
Bila shaka, hawana wote kuangalia mbaya hivyo kwa sababu tuko
kwenda spice up kidogo.
Basi hebu hii HTML boring zamani na kuanza kubadilisha ndani ya tovuti nzuri
kwamba sisi tu kuona dakika kadhaa iliyopita.
>> Basi hebu kuanza mbali rahisi sana.
Hivyo tuna kifungo hii hapa.
Katika Bootstrap, kama tuliona, tunaweza kuwa nzuri, nzuri, bluu kifungo.
Na kwamba kosa si kwa kufanya desturi CSS.
Hakuna CSS desturi hapa.
Hiyo ni kufanyika kwa kuongeza madarasa kwa HTML mambo yako.
Kama umefanya walijaribu madarasa, au hrefs, au nanga, au aina = "Nakala" kwa inputs--
Vipengele HTML unaweza kuwa na sifa hizi.
Wanaweza kuwa na taarifa za ziada kwamba unaweza kuwapa.
>> Na hivyo, katika kesi hii, madarasa ni sifa.
Hivyo d kuandika, kifungo darasa = kitu fulani ndani ya masharti.
Na kwamba sifa atakuambia kompyuta, hii si yoyote, mwenye umri wa kifungo.
Ni kifungo kwamba ni katika darasa hili la vifungo.
Na hivyo Bootstrap, kama wewe kuwapa mtindo fulani juu ya kipengele yako,
itakuwa kuteka ni njia fulani.
Hivyo mimi kuandika "BTN btn-msingi.
btn kuwa kifupi kwa ajili ya kifungo.
Utagundua kwamba sasa kifungo changu mbaya akageuka
ndani ya nzuri, nzuri, bluu kifungo.
Inaonekana nzuri sana wakati sisi bonyeza yake.
>> Na hivyo kile kinachotokea ni tuna btn darasa na darasa btn-msingi
juu ya kipengele yetu.
Na Bootstrap ataingia na kusema, sawa, mimi tunajua kwamba kuna madarasa haya mawili.
Kipengele yoyote ambayo ina hizi mbili madarasa vinapaswa kama hii.
Hivyo hiyo ni kiini cha jinsi gani ambatanisha mitindo na mambo katika Bootstrap.
Wewe tu ambatisha madarasa yao na itakuwa uzito ni nje kama anaona inafaa.
Hivyo hapa ni mfano mwingine.
Katika pembejeo, tunaweza kuongeza darasa = "fomu za kudhibiti".
Na mimi itabidi kuonyesha karibuni ambapo Unaweza kujua nini madarasa
zinapatikana wa kila aina ya kipengele.
Lakini darasani kwamba sisi tu aliongeza ina nzuri, pembe rounded,
ina nzuri padding, ina nzuri, bluu mwanga na hiyo.
>> Tunaweza pia kwenda katika fomu hii.
Na darasa = "aina-inline", ambayo itafanya fomu yetu, kama unaweza kufikiria, inline.
Hivyo ni kuangalia kidogo zaidi kama yale tulikuwa na kabla tayari.
Hivyo kabla ya sisi kwenda juu ya style mapumziko ya ukurasa, maswali yoyote kuhusu nini sisi
alivyofanya?
Sisi madarasa tu masharti na mambo yetu mbalimbali.
Na mimi itabidi kuonyesha jinsi baadaye unaweza kufikiri nini madarasa zinapatikana.
Sisi masharti madarasa ambayo na mitindo fulani.
Na kwamba anaelezea browser jinsi ya mpangilio ukurasa kutumia
Zinazotolewa mitindo Bootstrap ya.
Maswali yoyote kutoka kwa watazamaji?
>> Nzuri hadi sasa?
Baridi.
Changamoto nyingi naBootstrap ni
kujua nini vipengele ni inapatikana na jinsi ya matumizi yao.
Na kwamba ni wote kujifunza na uzoefu na pia
njia ya kusoma nyaraka, ambayo tutaweza majadiliano juu ya hivi karibuni.
Hivyo tuna div hii.
Ni tu boring, mwenye umri wa kitu.
Tunataka kusisitiza kwa namna fulani.
Hivyo katika Bootstrap, kuna mengi ya vipengele zinapatikana.
Na hii ni getbootstrap.com.
Ni kumbukumbu muhimu sana.
Ina mambo like-- hapa ni jinsi ya kufanya kifungo.
Na unaweza kufanya baa nav, unaweza maandiko, unaweza maendeleo baa,
unaweza kufanya makundi orodha.
Kimsingi, ni kila aina ya unaweza kuona ukurasa wa mtandao.
>> Hapa ni moja kwamba tutaweza kujaribu hivi sasa.
Ni wito jopo.
Kama umewahi kutumia Google Sasa, wana kadi.
Au kifaa chochote Android ana kadi.
Wana kidogo masanduku nyeupe ambazo zina mambo ndani yake.
Na hivyo sisi ni kwenda kujaribu na kufanya kwamba sisi wenyewe hapa kwa kutumia kitu
aitwaye jopo.
Hivyo kama sisi ambatisha darasa = "jopo jopo-msingi "kwa div yetu nje,
kisha sisi ambatisha div darasa = - hebu tu kuangalia nyaraka hii.
div darasa = "jopo-kichwa" na kisha div darasa = "paneli-mwili".
Tena, msiwe na wasiwasi juu kukariri kanuni hii.
Itakuwa inapatikana online.
>> Hivyo sisi alifanya hivyo na sasa boring yetu, mwenye umri div yamegeuka hii nzuri, kadi kidogo.
Ina nzuri padding, ni ina mipaka, anasimama nje
na wengine wa ukurasa, ambayo ni pretty cool.
Basi hebu kwenda katika na kubadili hali hii Kupata maelekezo kifungo kuangalia nzuri.
Ambao katika watazamaji anataka kuwaambia mimi nini siwezi kufanya kwa kifungo
kufanya ni kuangalia nzuri kwa kutumia Bootstrap?
Ndiyo?
>> Watazamaji: Tunaweza kuongeza darasani.
Na tunaweza kufanya darasa = "BTN btn-msingi".
NEEL Mehta: Ndiyo.
Kuna kundi la wengine rangi inapatikana kwa buttons--
au kwa jambo lolote, kwa jambo hilo.
Tunaweza kufanya btn-hatari na kufanya hivyo nyekundu.
Kuna sisi kwenda.
Tunaweza kufanya btn-mafanikio kwa kufanya hivyo kijani.
Tunaweza kufanya btn-info-- kuna rundo mambo ambayo inapatikana na wewe.
Hivyo nina changamoto kidogo kwa sasa.
Hivyo kuna jambo moja zaidi kwamba mimi kushoto un-haswa.
Hii Juu mahoteli.
>> Na tunataka kutumia kitu aitwaye orodha kundi style yake.
Hivyo changamoto yangu na wewe ni kwenda kwenye getbootstrap.com--
Mimi itabidi kuvuta it up hapa.
getboostrap.com.
Kwenda getbootstrap.com, kupata sehemu ambapo wao kwenda juu ya makundi orodha.
Na utaona hapa mfano na madarasa haki
kwamba unaweza kutumia kufanya yako orodha katika makundi haya mazuri orodha.
Hizi ni kazi nje mifano ya maadili ya mifano, nini
kificho matumizi, nini HTML code matumizi, na kile kwamba matokeo.
>> Hivyo changamoto yangu kwa you-- kwenda juu getbootstrap.com,
kama wewe ni hapa au nyumbani, na kujaribu na kuongeza mitindo kwa ul hii
kufanya ni kuangalia nzuri.
Na kutumia orodha kundi style.
Unataka kuchukua dakika kadhaa, na kutafuta nyaraka,
kujaribu wenyewe huu?
Kwa sababu kama unafanya maendeleo ya mtandao, utasikia kutambua mengi ya kazi yako
ni kwenda kuwa kusoma nyaraka hii.
Hivyo nadhani ni vizuri kupata ukoo kwa jinsi ya kusoma nyaraka,
jinsi ya kufikiri nini wapi, nini kificho mifano unaweza kutumia,
nini unaweza kujiinua.
>> Hivyo tena, getbootstrap.com, kwenda tab Components,
na kisha kitabu chini ya Orodha Group.
Na utaona mifano ya kificho kwamba unaweza kutumia kufanya HTML yako fit hiyo.
Hivyo kuchukua dakika kadhaa na kujaribu na kuchunguza yake mwenyewe,
kama wewe ni hapa au nyumbani.
Kama uko nyumbani, pause video, pengine, na kujaribu nje mwenyewe.
Kama uko hapa, kama wewe kwenda yetu website-- kama wewe mahitaji ukurasa,
utaona hii juu ya huko.
Hii kificho sawa sana ni kuongeza mitindo mpya pale pale.
Hivyo kuchukua dakika chache.
Napenda kujua wakati wewe ni hisia nzuri kuhusu suala hilo au wakati wewe ni kupotea kabisa.
Sauti nzuri?
Baridi.
Haraka kando kwa ajili ya wale nyumbani, wakati sisi ni kusubiri,
kama wewe kwenda kwenye GitHub tovuti kwamba mimi kuweka slides michache iliyopita,
kuelekea mwanzo wa video, Nina GitHub repo, there,
kwa majadiliano hayo.
Wote kificho mifano hii kwamba tutaweza kuwa kuzungumza juu ya ni kuhifadhiwa hapa hapa.
Hivyo kama wewe kwenda kutoa changamoto-1.html, hii ni wote kificho kwamba tuna haki sasa
juu ya CodePen yetu.
Hivyo unaweza tu kwenda mbele, na nakala huu, na kuweka katika CodePen yako mwenyewe.
Na kwa njia hiyo, unaweza kuendelea hadi kwa nini sisi ni kufanya hapa.
Hivyo kuwa na ukurasa huu wazi kama vile sisi kwenda kwa njia ya mapumziko ya semina.
Tena, unataka kwa kuangalia kama yale ona chini chini ya screen yako
huko.
Hisia nzuri?
Imara.
Hebu kusubiri kwa kila mtu mwingine kwa kumaliza up kwa nini re kufanya.
>> Ndiyo?
>> Watazamaji: Tuseme kwamba nilitaka kutumia Bootstrap katika home--
NEEL Mehta: Ndiyo.
Watazamaji: Mimi naona, kwenye tovuti, Anza ukurasa.
Wao nipe chaguzi Bootstrap, Chanzo Kanuni, au Sass.
Kati ya hao mimi nataka?
>> NEEL Mehta: Ndiyo.
Hivyo swali ni, ni jinsi gani unaweza kupata kuanza kutumia Bootstrap na sisi wenyewe?
Ni hutokea tu magically kazi hapa hapa.
Hivyo kama tuna muda katika Mwishoni mwa semina hiyo,
Mimi itabidi kuonyesha jinsi unaweza kupata juu wenyewe mtandao ukurasa wako.
Kama hapa, nimekuwa kweli kuweka katika mazingira ya baadhi ya kwamba
itakuwa na ni moja kwa moja kubeba, lakini mimi itabidi
kuonyesha ya kufanya hivyo kutoka scratch kwenye kurasa yako mwenyewe mtandao.
>> Watazamaji: Asante.
>> NEEL Mehta: Ndiyo.
Nzuri swali.
Hisia nzuri?
Hisia nzuri?
Baridi.
Hivyo ambaye anataka kuniambia jinsi walifanya jambo hili kuangalia nzuri na Boostrappy?
Nini darasa la kwanza sisi kuongeza ul?
Watazamaji: darasa = "orodha ya kundi".
NEEL Mehta: Ndiyo. orodha ya vikundi.
Na kisha je, sisi ambatanisha na lis?
Mtu mwingine?
Watazamaji: Na kisha, baada ya kwamba, darasa = "orodha ya kundi-item".
>> NEEL Mehta: Ndiyo.
>> Watazamaji: Na ni sawa kwa moja ijayo.
>> NEEL Mehta: li darasa = "orodha ya kundi-item".
Kuna kwenda.
Tuna nzuri yetu orodha kundi, tu kama sisi walitarajia.
Hivyo kuna kwenda.
Katika dakika ya 10, tumefanya huu boring, mwenye umri wa Yalp! ukurasa
kuangalia nzuri na kitaaluma.
Na kwamba ni mwanzo tu.
Hivyo sasa kwamba wewe kujisikia vizuri kuhusu hilo, hebu
tu kwenda mbele na majadiliano juu ya vipengele kadhaa zaidi kwamba
inaweza kuja katika Handy kama wewe kwenda katika adventure yako.
>> Bila shaka, kuna wale mengi hapa.
Na sasa kwamba wameweza kujifunza jinsi ya kufanya makundi orodha,
unaweza pretty much kufundisha mwenyewe jinsi ya kufanya yoyote ya hizi.
Lakini, bila shaka, hebu tu kujaribu na kufanya michache zaidi sisi wenyewe,
ili tu kupata kujisikia kwa jinsi unavyoweza kuzitumia.
Mimi tu kwenda kwenda kwa mfano huu hapa.
Tena, kanuni na kwamba mimi tu pasted humu inapatikana hapa hapa.
Ili kujisikia huru na kuvuta it up.
>> Hivyo tumekuwa tayari wamekwenda kupitia mifano michache haya.
Hivyo tuna vifungo, ambayo sisi Tayari tumeona jinsi ya kufanya.
Tunaweza kufanya vifungo kubwa.
By kifungo class-- unaendelea, BTN btn-lg na btn-msingi inafanya nyeupe.
Hivyo hii inafanya kifungo yetu kubwa kuliko inaweza vinginevyo kuwa.
Ni inaweza kuja katika Handy, kama una kubwa kuwasilisha kifungo au kitu.
Tuliona orodha kundi mfano, tuliona namna mfano.
>> Moja moja muhimu sana ni alama.
Na icons ni njia kwa wewe kuongeza mambo ya kuvutia, kama kuangalia kuangalia
alama, au pluses, au rafiki icons, au icons kuanzisha upya,
au chochote kwa mtandao programu yako.
Hivyo tena, kama sisi katika hapa, vipengele, glyphicons,
ni icons inapatikana kwa Bootstrap.
Kuna kina orodha ya wale wote hapa.
Hivyo tu kama mfano, hebu jaribu na kuongeza moja.
>> Hivyo kama Facebook, tuko kwa kujaribu kuwa na Kuongeza Friend kifungo.
Hebu kwanza kuongeza baadhi ya style.
kifungo darasa = "BTN btn-mafanikio".
Na kuna sisi kwenda.
Hebu kuongeza icon hapa.
Nini icon, unafikiri, inaweza kufanya maana ya kuweka hapa?
Ve pengine kuonekana kwenye kurasa baadhi ya tovuti au chochote,
lakini kile ni mfano wa picha kwamba wanaweza kwenda vizuri ndani ya kifungo hii?
Kujisikia huru na kuvinjari mtazamo huu, kama unahitaji msukumo wowote.
Kuna mengi ya muhimu ndio inapatikana hapa.
Ndiyo?
>> Watazamaji: Labda moja Glyphicon mtumiaji?
NEEL Mehta: Sawa.
Hii moja.
Hiyo ni nzuri sana.
Ndiyo.
Kwenye Facebook, nadhani ni bila kuangalia kidogo kama hicho.
Hivyo hapa ni jinsi sisi kwenda juu kuongeza icons kwa kurasa zetu.
Sisi tu span-- span ni chombo upande wowote kwa kitu fulani.
Div ni chombo kwa ajili ya kitu, span ni chombo kingine.
divs na mapumziko line inayowazunguka, kuzua hawana.
Hivyo kuna njia mbalimbali za kuwa vyombo kurefusha maisha.
Kama haina mantiki na kuiweka ndani ya aya au kitu chochote.
Sisi tumepewa kuiweka ndani ya kitu ingawa,
hivyo sisi tu ya kuweka ndani ya shibiri moja.
Hivyo span class = Glyphicon Glyphicon mtumiaji "span karibu.
Na sasa tuna icon ndani ya kifungo.
>> Hivyo haina kuangalia kabisa tofauti na nini unaweza kuona kwenye facebook.com.
Na hivyo ni nzuri kwamba hawa wanaweza kweli kuwekwa mahali popote unataka.
Katika kichwa baa yako, katika orodha ya makundi yako.
Chochote.
Haina kuwa ndani ya kifungo.
Hivyo kama mfano, naweza kuweka darasa moja hapa.
"Glyphicon Glyphicon mtumiaji".
Na inaonekana sawa tu.
Basi hizi icons-- unaweza kutumia span darasa = "Glyphicon Glyphicon-chochote".
Na kwamba basi wewe kuongeza icons popote unataka.
Na icons ni muhimu sana sehemu ya kufanya tovuti kuangalia
kitaalamu na vizuri.
Hivyo si overdo yake, lakini ni mara nyingi ni jambo jema kujua.
>> Vikao, tena.
Mimi itabidi kufanya hivyo tena kama kurejea kwa sababu wao ni aina ya wanaohusika.
Utagundua kuwa katika kugeuka HTML yako ya kawaida
Tovuti ndani ya Bootstrap-afied Tovuti, itabidi
kuongeza muundo wa ziada na tovuti.
Kwa mfano, tuna ziada divs hapa kwa sababu tu wale
zinahitajika ili kufanya jopo.
Hivyo tu kuendelea kuwa katika akili kwamba itabidi kuwa na muundo wa ziada.
Hivyo "jopo jopo-msingi".
Labda ni jopo-kichwa.
Nadhani ni ya jopo-kichwa.
Ndiyo.
Kuna sisi kwenda.
Hivyo, tena, kuna jopo yetu.
>> Jambo moja zaidi kwamba sisi hakuwa cover bado, meza.
Meza, na msingi kuangalia aina ya mbaya.
Kama hii.
Lakini meza ni, bila shaka, sehemu muhimu sana
ya nini utafanya katika maendeleo ya mtandao.
Katika Pset7, kwa mfano, CS50 Fedha, ambayo atakuja nje hivi karibuni,
itabidi kutumia mengi ya meza.
Na mengi ya mtandao Dev matumizi mengi ya meza kuonyesha taarifa,
kama hifadhi, au alama, au chochote.
>> Hivyo styling meza ni kweli rahisi sana.
Wewe kuongeza darasa meza kwa meza yako.
Na, mimi kuthubutu kusema, inaonekana pretty nzuri.
Unaweza kufanya mambo ya ziada, kama "meza meza-striped".
Na utaona matokeo hapa.
Unaweza kufanya meza-Imepakana.
Kuna mengi ya chaguzi unaweza.
Lakini kimsingi, na kuongeza meza, daraja la meza,
itafanya meza yako kuangalia pretty nzuri.
Hivyo hiyo ni mnyonge mafupi ya baadhi ya mitindo muhimu zaidi
na vipengele utasikia haja ya kutumia kwa Bootstrap.
Hivyo nadhani kwamba Wraps up sehemu yetu nzuri.
Maswali yoyote hivi sasa kuhusu jinsi kufanya tovuti yako nzuri?
Jinsi gani unaweza kutumia hizi vipengele kwa faida yako?
Hisia nzuri?
Ndiyo?
Watazamaji: Labda hii ni swali silly,
lakini unaweza kutumia Bootstrap kwenye Wikipedia?
Kama wewe ni editing ukurasa Wikipedia?
NEEL Mehta: Ndiyo.
Hivyo swali lilikuwa, mimi nina uhariri wa ukurasa Wikipedia,
naweza pamoja na mitindo Bootstrap katika huko?
>> Watazamaji: Ndiyo.
>> NEEL Mehta: Na hivyo Bootstrap ni kimsingi kubwa karatasi CSS style.
Karatasi CSS style tu anasema, wakati wowote Nina darasa hili, ambatisha mitindo haya.
Hivyo karatasi style CSS kwa Bootstrap ni kwenda kuwa kitu kama .btn,
tabaka la kifungo, kupata kama rounded kona mpaka au chochote.
Hivyo kimsingi, Bootstrap tu rundo la madarasa na kundi la mitindo
maalum kwa ajili ya madarasa hayo.
Hivyo muda mrefu kama una kwamba CSS, orodha hii ya sheria katika ukurasa wako,
utapata Bootstrap styling.
Hiyo ni, bila shaka, sanjari na kuwa mitindo Bootstrap katika ukurasa wako
kwa kuanzia.
>> Na hivyo katika Wikipedia, pengine hawakuweza
kufanya hivyo kwa sababu Wikipedia hana Bootstrap ndani yake.
Lakini kama ilivyokuwa na Bootstrap, labda unaweza kufanya hivyo.
Na kama alitaka, ungeweza pamoja na hayo, lakini kwamba huenda
kuvunja mpangilio wa sasa wa ukurasa.
Lakini swali nzuri sana.
Unaweza kutumia Bootstrap popote ni pamoja na,
lakini siyo kujengwa katika na msingi.
>> Watazamaji: Asante.
>> NEEL Mehta: Ndiyo.
Maswali yoyote zaidi?
Ndiyo.
Hivyo kama wewe ni hapa au nyumbani, kumbuka tu getboostrap.com-- tena,
getboostrap.com-- ni rafiki yako.
Kila unatumia Bootstrap, hii nitakupa
maelekezo kuhusu jinsi ya kupata kuanza, jinsi ya kutumia vipengele.
Kuna baadhi ya baridi na javascript kuziba-ins kwamba sisi si kwenda zaidi ya hapa,
lakini wao ni thamani ya kuangalia nje vilevile.
Hivyo hii ni rafiki yako.
Ni muhimu tu kupata kutumika jinsi ya kutumia hiyo.
>> Basi hebu kuzungumza kidogo kuhusu kufanya tovuti msikivu.
Hivyo kama nilivyosema hapo kabla, watu kutumika Laptops yao, wanatumia simu zao.
Na kama unaweza vizuri kufikiria, hii ni tofauti sana screen kawaida kuliko hiyo.
Na hivyo tovuti hiyo kwamba inaonekana ni nzuri kwenye simu yangu
si kwenda kuangalia vizuri, lazima, kwenye kompyuta.
Kwa hiyo kile una kufanya ni kufanya tovuti yako kubadilika.
Ina kukabiliana na mbalimbali screen ukubwa kwamba ni juu ya.
>> Ina kusema, najua mimi nina juu ya kompyuta, mbali kubwa, ni lazima kupanua.
Najua mimi nina kwenye simu, ni lazima kuogopa.
Na hivyo Bootstrap hutoa baadhi sana, zana muhimu sana kwa kufanya hivyo.
Hivyo Bootstrap hebu wewe kuvunja tovuti katika nguzo 12.
Unaweza kufanya safu na kuwa nguzo 12.
Na unaweza kuigawa wale hata hivyo unataka.
Unaweza kuwa moja, jambo kubwa, ambayo ni nguzo 12 kote.
Unaweza kuwa na mambo mawili ambazo ni sita kila moja.
Unaweza kufanya jambo moja kwamba ni nne, moja kwamba ni wawili, au moja kwamba ni sita.
Unaweza kufanya tatu, tatu, tatu, tatu.
Unaweza kufanya chochote kuvunjika kwa kuwa unataka.
>> Hivyo labda mtandao ukurasa wako anahitaji kuwa na safu ya kushoto hiyo ni moja ya tatu upana.
Hivyo kwamba itakuwa nguzo nne pana na maeneo mengine ya ukurasa
itakuwa nguzo nane kote.
Hivyo hii ni mfano.
Hebu vuta hadi mfano mwingine.
>> Watazamaji: Je, ni daima kuwa hata kupasuliwa?
Je, yawezekana saba, watano mgawanyiko?
>> NEEL Mehta: Ndiyo.
Ni inaweza kuwa saba, watano.
Ndiyo.
Muda mrefu kama inaongeza hadi 12, ni faini.
Basi hebu kwenda nyuma hapa.
Tena, kanuni na kwamba ni hapa ni pia inapatikana hapa,
chini ya mfano msikivu.
Hivyo mimi tu anapigiwa baadhi mfano msikivu kificho hapa.
Hivyo kufanya hivyo kwa kutumia Jambo aitwaye mfululizo.
Mstari ni kundi jingine.
Ni mtindo mwingine wewe kuongeza kwenye yako divs kuwafanya vipengele yao wenyewe.
>> Wewe umesema, div darasa = "mstari" kufanya mstari,
kujipa nguzo 12 ya nafasi.
Na kisha kuweka nguzo ndani ya kwamba.
Hivyo hapa sisi Kanali-xs-6.
Msiwe na wasiwasi juu xs.
Tutaweza majadiliano juu katika sec.
Lakini kimsingi, tuna moja jambo ambalo ni sita pana.
Sisi kuiita kushoto.
Na hivyo ndiyo sanduku kushoto hapa.
Tuna jambo moja kwamba ni sita ya nguzo 12 kote.
Na kwamba moja ni juu ya haki.
>> vizuri tu anatoa hufanya div yako kujaza it up kijivu.
Hivyo hiyo ni hivyo tu tunaweza kuona kwamba wao ni tofauti.
Na hivyo hii mfano wa kwanza.
Ni mfano rahisi sana wa jinsi bila kutumia safu yako na nguzo hapa.
Unaweza kufafanua mstari kwa kutumia darasa = "mstari".
Na kisha kufanya darasa = "col-xs-6" kufanya nusu, "Kanali-xs-6" kufanya nusu nyingine.
Hapa ni mfano ngumu zaidi.
Hebu tuangalie vidogo, Kubwa, wengine moja.
>> Tunaweza kufanya vidogo nguzo mbili pana, tunaweza kufanya Kubwa nguzo sita pana,
na wengine nguzo nne pana.
Kwamba anaongeza hadi 12.
Na hivyo hizi kuishia Guinea upana wa ukurasa.
Tena, tuna mfululizo nje.
Basi tuna div darasa = "col-xs-2" na kisha 6, na kisha 4.
Na ambao utatoa muundo wa kwetu.
Na ili tuweze kuweka chochote heck tunataka ndani ya hapa.
Badala ya vidogo, tunaweza kuweka kifungo.
kifungo darasa = "BTN btn-msingi".
Na hivyo taarifa kwamba kifungo yetu haina kuchukua upana wote,
lakini angalau ni vikwazo kwa nafasi kwamba mengi.
>> Hivyo hiyo ni yote vizuri na nzuri.
Ili tuweze sasa kuvunja mtandao wetu ukurasa katika chunks, upana busara.
Tunaweza kusema tunataka kuwa na kushoto safu, na safu haki, na kadhalika.
Lakini sisi si wamekwenda juu jinsi ya kufanya hivyo msikivu.
Na hivyo Bootstrap hebu kufanya hivyo pia.
Ina mambo haya kuitwa breakpoints.
Hivyo ina njia ya kujua kama uko juu ya mbali, upo katika kibao,
uko juu ya usawa simu, au uko kwenye simu wima.
Ni anajua screen kawaida.
Na mapumziko hii katika categories-- nne kubwa au lg, ambayo ni Laptops, kwa kawaida.
md au wa kati, ambayo ni vidonge.
sm, dogo.
Au xs, ziada ndogo.
Na hivyo wakati wewe taja safu, unaweza kusema,
ni lazima nguzo sita pana kwenye kifaa ziada ndogo.
Hiyo ni kwa nini sisi hivyo Kanali-xs-6.
Sisi ni kusema kwamba ni lazima kuwa sita ya nguzo 12 upana
kwenye kifaa ziada ndogo.
Na kama ni kitu chochote kubwa, tutaweza tu default kwa kutumia ndogo ziada Mkono.
Kama ni kubwa kuliko kitu chochote ziada ndogo, utakuwa ni sita pana.
Na ili tuweze kujiinua hizi kufanya ya nguzo wetu
kuchukua kiasi tofauti ya nguzo kulingana na ukubwa screen.
Hebu kwenda resizing hii msikivu.
Hivyo tuna nguzo yetu.
Na inasema, "Kanali-lg-6 Kanali-xs-12".
Hivyo kutokana na kile unajua hadi sasa, je, wewe
kufikiri ni kwenda kutokea kwenye screen kubwa?
Naam, ni aina ya kutokana na njia, lakini kufanya nini
unafikiri itakuwa kuangalia kama kwenye screen kubwa?
Na kwa nini ni kwamba?
>> Watazamaji: Je, ni kwamba kwenye screen kubwa, ni
kwenda kuchukua tu sehemu ya nafasi kamili?
Kama nusu yake, mimi nadhani?
>> NEEL Mehta: Ndiyo.
>> Watazamaji: Na juu ya ndogo screen, ni kwenda
kuchukua screen nzima, 12.
NEEL Mehta: Ndiyo.
Kulia.
Hivyo kama mfano, hebu kuangalia chini tu hapa.
Ndiyo.
Kadhalika chochote ambacho ni lg au bigger-- hivyo kompyuta yangu hutokea
kuwa Nokia sababu ni pretty wide-- itafanya
ni bega kwa bega kwa sababu ni Kanali-lg-6.
Hivyo kwa sababu ni juu ya kubwa, inafanya nguzo sita pana na nguzo sita pana.
Hebu kuona nini kinatokea kama mimi kufanya hii katika moja ndogo.
Mimi nina kwenda tu kwa screen un-full huu.
Na mimi nina kwenda kwa kuogopa screen.
Mimi nina kwenda kuogopa screen, hivyo ni Inaonekana kama mimi ni juu ya kifaa ndogo.
Hivyo nina kwenda kwa kuogopa hilo kama hii.
>> Na voila.
Sasa ni sifa kwa sababu sasa tumekwenda
kutoka to-- kubwa hii pengine ni ziada ndogo screen kawaida.
Na hivyo sasa inasema, sawa, sisi siyo katika kubwa, tuko katika nchi za ziada kidogo.
Hivyo sisi ni kwenda kutumia ndogo ziada Mkono.
Na tunakwenda xs-12, xs-12.
Hivyo ni kwenda kwa kuwa sifa.
Na tu taarifa kwamba kuna Jambo aitwaye breakpoint.
Breakpoint ndiko wewe alifanya mpito
kutoka ziada ndogo ndogo, ndogo na kubwa, na kadhalika.
>> Hivyo tu taarifa kwamba kama mimi slide huu nje, hatimaye, utasikia kupata uhakika
ambapo wao itabidi kuruka kuwa bega kwa bega.
Kuna kwenda.
Hivyo kuna breakpoint pale pale.
Ili tuweze kufanya hivyo hata ngumu zaidi.
Sasa tunaweza kusema, hizi mambo lazima nne pana.
Yaani, ni lazima kuchukua theluthi moja
ya hotuba juu ya vifaa kubwa sana.
Kwenye kifaa kati, ni lazima kuchukua up nusu screen kwa sababu ni md-6.
Kwenye kifaa ndogo sana, ni lazima kuchukua 12.
Na hivyo hii inaonekana pretty asili.
Hebu tu kujaribu hii nje kwa wenyewe.
>> Hivyo kwenye screen kubwa, wao uko nne pana.
Kuogopa hilo kidogo.
Na sasa wao ni sita pana.
Hivyo hii ni sita, sita, sita.
Kuogopa hata zaidi na kisha watakuwa sifa kabisa.
Hivyo hii, kwa mfano, mantiki kama wewe ni kuwa na kadi, kama kadi habari,
Kwa mfano, ambapo kama ni juu ya screen kubwa sana,
ni sawa kama una upande kadhaa kando kwa sababu wangeweza wote kupata nafasi ya kutosha.
Lakini wao haja ya kuwa na nafasi ya kutosha.
Hivyo kwenye screen ndogo, wewe d wanataka kuwapa
chumba zaidi, kutia, ya ukurasa.
>> Hivyo kama ulimwengu halisi mfano, hebu sema tuna Twitter.
Na tuna sanduku maandishi, hivyo unaweza tweet upande.
Na sisi kuwa na orodha ya trending mada upande wa kulia.
Hivyo kwenye screen kubwa, tunapaswa kuwa nao kuwa bega kwa bega,
hivyo unaweza kuona yao katika kioo.
Lakini juu ya screen ndogo, tunapaswa kufanya 12 na 12,
ili mada trending ni chini eneo tweet.
Kwa sababu eneo tweet ni Jambo kuu na kwenye screen ndogo,
mada trending hawana jambo kama kabisa mengi.
Na hivyo sisi kuziweka haki chini, hivyo waweze wote kupata nafasi ya kutosha.
Mantiki hadi sasa?
>> Watazamaji: Ndiyo.
>> NEEL Mehta: Mango.
Hivyo hiyo ni mifano yote ninayo hapa.
Hebu jaribu na kufanya changamoto.
Hivyo tena, hii ni changamoto-2.html kwa wale wa wewe kufuatia pamoja nyumbani.
Hivyo rafiki yangu, Mark Zuckerberg, likanijia siku nyingine.
Na yeye ni kama, Neel, nina wamezipata nzuri katika kubuni mtandao.
Siwezi kufanya HTML.
Nimekufanya huyu, hariri mpya kwa Facebook.
Nina wazo jipya kwa jinsi tunapaswa style Facebook.
Na hapa ni.
Hapa hapa.
Hapa ni baadhi mfano kificho.
Hivyo ni kuitwa Fancybook.
>> Tuna baadhi ya updates hadhi.
Tuna Nemo, Mike Kosowski, ***-- tatu updates hadhi.
Na kisha tuna orodha ya marafiki online sasa chini yake.
Hivyo yeye amefanya kazi zake za nyumbani.
Yeye anajua kidogo kuhusu Bootstrap, yeye alifanya orodha mtazamo,
amefanya kidogo ya HTML.
Hivyo yeye ana ukurasa wa mtandao.
Lakini yeye kama, Neel, sijui kuelewa msikivu kubuni wakati wote.
Je, una wataalam yeyote ambaye inaweza kusaidia yangu kwa hilo?
Na kwa bahati nzuri, wewe ni sasa wataalam katika kubuni msikivu.
>> Kwa hiyo kile yeye aliniambia kuwa yeye alikuwa anataka Fancybook kwa kuangalia kama hii.
Kwenye kifaa ndogo sana, kama simu, kila kitu
lazima sifa, kama hapa.
Hivyo kuwa ratiba upfront, juu juu, na kisha
unapaswa kuwa mazungumzo bar chini.
Lakini juu ya kibao au ukubwa wa kifaa, ni lazima kuwa nusu na nusu,
kama katika ratiba lazima nusu na orodha ya marafiki mazungumzo
lazima juu ya nusu nyingine.
>> Kisha juu ya mbali, ratiba lazima kuchukua robo tatu
na kisha mazungumzo ua lazima kuchukua mwingine robo moja.
Na hivyo yeye kama, Neel, nina hii kificho hapa, lakini siyo msikivu.
Inahitaji kuwa na tabia kama hii.
Hivyo changamoto yangu na wewe anapewa kanuni hii here--
kama wewe kupata mahitaji yako CodePens, utaona huu.
Au kama wewe tu kuweka katika kanuni changamoto-2, utaona huu.
>> Hapa ni huu kificho mfano.
Utaona baadhi xxxs.
Nataka mabadiliko xxxs, kiasi kwamba ratiba na orodha ya marafiki
ifuatavyo specs haya hapa.
Msiwe na wasiwasi juu ya nini ndani ya ratiba kwa sasa.
Tutaweza kupata kwamba katika hatua inayofuata.
Lakini kwa sasa, hebu angalia kama sisi kupata mambo haya kwa kupasuliwa it up kama hii.
Hivyo haina hiyo mantiki?
Hivyo kama wewe ni nyumbani, pause video na kujaribu
kufanya mtandao ukurasa wako kuangalia msikivu kama hii.
Kama uko hapa, kuchukua kama mbili, dakika tatu.
Kujisikia huru kuzungumza na jirani, na kujaribu, na kurekebisha Mheshimiwa Zuckerberg ya
msikivu kubuni tatizo.
Kama una maswali yoyote, kujisikia huru basi mimi kujua.
Hisia nzuri?
Kosa gani?
Nzuri.
>> Watazamaji: [inaudible].
NEEL Mehta: nini?
>> Watazamaji: Mimi nina nzuri.
>> NEEL Mehta: Oh, nzuri.
Nzuri.
Watazamaji: kitu kuhusu 12, ni kwamba Bootstrap
chipsi kutolewa screen nafasi kama 12 vitengo hela na kisha mgawanyiko kwamba up?
Jinsi gani hasa gani proportioning kazi kwa hili?
>> NEEL Mehta: Ndiyo.
Hivyo swali ni, jinsi anafanya proportioning
kazi kwa Bootstrap, sawa?
>> Watazamaji: Ndiyo.
NEEL Mehta: Kwa hiyo wakati wowote una div darasa = "mstari",
bila kujali jinsi kubwa screen ni, Bootstrap nitakupa vitengo 12
ya kawaida sawa kwa kuchukua kwamba ukubwa gani.
Hivyo katika Kanali 1, mara nyingi ni 8.33% ukubwa wa screen,
kama hiyo ni pana huu au kwamba ni hii pana.
Na hivyo, bila shaka, juu ya ndogo screen, kila safu ni ndogo.
Bado una nguzo 12 pana, ni ndogo.
Hivyo ni juu yako na kuhakikisha kwamba mambo kuchukua safu zaidi,
kutia, fidia kwa kuwa ukosefu wa nafasi.
Je, hiyo mantiki?
>> Watazamaji: Ndiyo.
Asante.
NEEL Mehta: Swali Mwema.
Watazamaji: Kwa kubwa screen, unaweza kuwa na
ratiba kuchukua robo tatu?
>> NEEL Mehta: Ndiyo.
NEEL Mehta: Habari za vijana hisia?
Nzuri?
Baridi.
Basi hebu kuja nyuma.
Na hebu jaribu na kurekebisha sehemu hii ya tovuti Mheshimiwa Zuckerberg ya.
Hivyo kalenda ni hapa, katika juu, na orodha ya marafiki
ni chini.
Na hivyo sisi tu haja ya kuwapa nguzo, na sizing sawia,
katika kila moja ya haya.
Hivyo *** hii kwanza ni kwa ratiba.
Nini madarasa kufanya sisi kuweka katika hapa?
Je, nyie kuweka katika hapa?
Basi kumbuka, juu ya screen kubwa, inahitaji kuchukua robo tatu ya upana.
Na hivyo kile mtindo bila kutoa kwamba?
Juu ya screen kubwa, tatu robo ya upana.
Nini darasa tunatumia huko?
Watazamaji: Hivyo sisi ni kwenda tu kuwa uhariri kwamba tukio la kwanza ya darasa.
NEEL Mehta: Kwa sasa.
Ndiyo.
>> Watazamaji: Sisi siyo editing kila moja, kipengele ya mtu binafsi ya ratiba?
NEEL Mehta: Si sasa, angalau.
Hivyo jambo hili zima ni kuzuia.
Tunabadilisha tu kubuni ya kuzuia.
Hivyo hapa hatuwezi Kanali-lg-9 kwa sababu ni tisa kati ya 12 mbalimbali kwenye screen kubwa.
Na kisha kwenye screen kati, jinsi wengi nguzo anatakiwa kupata?
Watazamaji: Ni walidhani kuwa nusu na nusu.
NEEL Mehta: Haki.
Hivyo ni wangapi ni kwamba?
>> Watazamaji: Hivyo sita.
NEEL Mehta: Six.
Na kisha ziada ndogo lazima be-- ikiwa ni unachukua upana mzima wa mfululizo,
wangapi wanapaswa kuwa kitu gani?
Watazamaji: 12.
NEEL Mehta: 12.
Ndiyo.
Na sasa sisi tumepewa kubadili hali hii wale wengine,
hivyo inachukua up wengine wa nafasi.
Hivyo Kanali-lg--
Watazamaji: Ni kwenda kuchukua screen nzima?
NEEL Mehta: Ni inachukua hadi robo ya screen kwenye kifaa kubwa,
kama sisi ilionyesha hapa.
>> Watazamaji: Tatu.
>> NEEL Mehta: Tatu.
Na kisha Kanali-md-6 kuchukua up wengine wa nafasi.
Kanali-xs-12.
Hivyo basi, tuna ratiba kuchukua robo tatu
ya ukurasa katika screen kubwa na kisha robo moja upande.
Na kisha kama kawaida screen chini, ni lazima resize ipasavyo.
Hivyo ni sifa sasa, juu ya screen ndogo sana.
Na kama sisi ukubwa it up kidogo, wanapaswa kuwa na hasa nusu na nusu.
Hivyo tumefanya kwamba hadi sasa.
Baridi sana.
Na hivyo sisi si kufanya sehemu nyingine ya changamoto.
Unaweza kufanya hivyo mwenyewe.
Lakini kimsingi, una kujaribu na kufanya hivi msikivu
kama well-- kufanya ratiba vitu, wenyewe, msikivu.
Hivyo sasa tumeenda kupitia wote unahitaji kujua
kuhusu upande msikivu wa Bootstrap.
Maswali yoyote kuhusu msikivu kubuni na Bootstrap
na jinsi gani wanaweza kwenda juu ya kufanya hivyo?
Ndiyo?
>> Watazamaji: Je, ni sawa kama tulikuwa na video iliyoingia
na sisi alitaka kudhibiti wadogo ambapo video was--
ukubwa wa video kwenda kutoka mbali kwa simu.
NEEL Mehta: Ndiyo.
Zaidi au chache.
Wewe d na kuwaambia video kwa kuchukua chumba kadri ni aliyopewa,
ambayo ni kidogo annoying wakati mwingine.
Lakini msingi Wazo ni sawa.
Video, kama kitu kingine chochote katika ukurasa, kama kifungo au chochote,
muda mrefu kama wewe kutumia nguzo na safu,
unaweza kuwapa kiasi fulani cha nafasi.
Na hivyo kupata ni kwa heshima ya kwamba ni swali tofauti kwa sababu kama YouTube
embeds na fulani, kuliko ukubwa.
Lakini kinadharia katika uchache, ingekuwa kazi.
Baridi?
>> Watazamaji: Nadhani wakati huo, kwa mfano, je kweli
haja ya kuwa na matoleo tofauti ya mfano uo huo, katika ukubwa tofauti
kwa mbali dhidi ya iPhone?
Yeah Swali ni kwamba, tunahitaji na picha kwamba ni msikivu pia.
Na hakika, unaweza kufanya hivyo.
Nadhani ni katika CSS.
Lakini Bootstrap inaruhusu wewe kufanya hivyo pia.
Unaweza kuwa na taswira msikivu.
Unaweza kuwa na picha yako resize kulingana na ukubwa wa ukurasa.
Na kuna jambo jipya sana ni HTML5, toleo newest wa HTML,
na CSS3, newest toleo la CSS, ambayo
basi wewe kuomba picha tofauti kulingana na ukubwa screen uko katika.
Kwa kawaida, ni nzuri ya kutosha tu kuwa na picha yako tu kuogopa au kukua kwa
Hata hivyo kubwa inahitaji kuwa.
Lakini unaweza, ukitaka kwa, na moja 32 kwa 32
kwa skrini ndogo sana, na 64 na 64 kwa screen kubwa,
na kisha kutumika wale selectively.
Unaweza kufanya hivyo.
Ni kosa kwa baadhi ya watu.
Bado pretty kupunguza makali.
Lakini jibu fupi, msikivu images-- Bootstrap inaweza kuokoa siku huko.
Baridi?
>> Watazamaji: Asante.
>> NEEL Mehta: Basi hebu majadiliano halisi kuhusu jinsi ya kufunga
kupata hii katika mwenyewe mtandao ukurasa wako.
Hebu sema unataka kufanya yako tovuti mwenyewe kwa kutumia Bootstrap.
Na hivyo hebu tu tu kutembea kwa njia hiyo kwa pamoja.
Hebu sema wewe kufanya tu kawaida HTML ukurasa.
Kujisikia huru kufuata pamoja katika chochote mhariri wako favorite ni.
Hivyo sisi tu na baadhi ukurasa HTML.
Tunaweza kufanya! Doctype html.
Hii pia ni html, ukurasa wetu.
Hakuna jipya.
Tumefanya hii kabla.
Hivyo hapa tuna HTML yetu na tunaweza kuweka mambo ndani ya hapa.
Tunaweza kuwa na kifungo yetu.
Na kama nilivyosema hapo kabla, hii si lazima kwenda kufanya kazi.
Kwa nini huenda hii si kazi?
Kwa nini si sisi kupata wetu nzuri, rangi ya kifungo?
>> Watazamaji: Kwa sababu hatukuwa kuhusisha kwa mradi Bootstrap au faili?
NEEL Mehta: Ndiyo.
Sahihi.
Kwa sababu Bootstrap-- ni dhana tu CSS faili.
Ni mfululizo wa mitindo kwamba ni masharti ya vipengele yako.
Hapa tumekuwa aliiambia yake kwamba sisi wanataka kutumia mitindo haya.
Mimi itabidi ukubwa kwamba juu kidogo.
Tumekuwa habari, tunataka kutumia mitindo hizi, lakini sisi kamwe
aliiambia yake nini mitindo ni.
Na kwamba ni nini yako swali kutoka mapema alikuwa.
Hiyo ni jibu la kwamba.
Tunahitaji kutafuta njia ya kupata mitindo na pamoja nao katika ukurasa wetu kwa namna fulani.
Na hivyo Bootstrap mapenzi kutuonyesha jinsi ya kufanya hivyo.
>> Hivyo kama wewe kwenda juu hapa, Anza.
Kuna njia tofauti kushusha ni.
Hii inaweza kufanya maana lazima.
Bootstrap-- hii basi kunyakua CSS faili yenyewe.
Na wewe ni pamoja na ni katika ukurasa wako mwenyewe.
Kanuni chanzo ni kama unataka hack juu yake na wewe mwenyewe.
Huna haja kweli hii.
Sass ni lugha kwamba inaandaa katika CSS.
Fikiria kama preprocessor.
Kiasi kama PHP ni preprocessor ya HTML, Sass ni preprocessor kwa CSS.
Hivyo kama unataka kufanya hivyo njia hiyo, unaweza kufanya hivyo.
>> Njia rahisi ni kutumia CDN, au maudhui utoaji wa mtandao.
Ni tovuti ambayo tu mtumishi up nakala ya Bootstrap
haraka sana kwa wewe pamoja na katika ukurasa wako mwenyewe.
Hivyo hapa ni mfano.
Ni nitakupa hili kipengele kiungo.
Kipengele kiungo anaelezea browser yako, kuchukua chochote files kuhifadhiwa hapa
na ni pamoja na katika mtandao wetu ukurasa.
Na katika kesi hii, ni Bootstrap CSS faili.
Hivyo tutaweza tu nakala kwamba URL, au Nakala kwamba, na tutaweza kutupa ndani ya
ya kichwa chetu.
>> Na mimi si kuanza ukurasa ajili ya hii, lakini unaweza kutegemea kwamba hii kazi.
Kiungo kupata wewe CSS.
Pamoja katika yako ukurasa na basi utakuwa na
uwezo wa kutumia yote ya Bootstrap madarasa kwamba unajua na upendo.
Kama unataka kuitunza ndani ya nchi na kuwa ni juu ya faili yako mwenyewe mfumo
badala ya kuwa na kwenda biashara kwa kunyakua hiyo,
kama ukitaka kutumia tovuti now,
unaweza kutumia Shusha chaguo.
Lakini kwa sehemu kubwa, kwa kutumia CDN ni pretty kufunga kwa sababu kwa njia hiyo,
ni agizo updated kwa ajili yenu pia.
Una manually update ama.
Mantiki?
>> Hivyo mengi ya zana itakuwa na hii kujengwa katika na msingi. Katika Pset7 yako na Pset8,
Naamini Bootstrap ni moja kwa moja pamoja.
Na katika CodePen, kwa mfano, ni tayari
pamoja kwa sababu mimi aliongeza kuongeza mpangilio huo.
Hivyo kama wewe milele unataka kucheza karibu pamoja na hayo, unaweza tu kwenda juu ya CodePen,
au kwenda kwenye ID yako, au chochote.
Na unaweza kuwa na uwezo wa upatikanaji Bootstrap huko,
lakini siyo kila mara kujengwa katika, kwa default, na mtandao.
Mantiki?
>> Ndiyo.
kama recap-- tuna kama dakika tano kushoto.
Lakini kama kurejea, katika kurasa mpya ya mtandao, unaweza ni pamoja na Bootstrap kama hii.
Na mara moja kuwa ni pamoja na, unaweza kufanya mambo ya kujifurahisha yote hapa.
Unaweza kwenda juu, na unaweza tu peruse CSS, unaweza kuongeza baadhi ya mitindo baridi,
unaweza kuwa na vipengele kama vifungo,
na meza, na orodha vitu kwamba sisi zilizotajwa.
Kuna baadhi ya JavaScript Plugins baridi, ambayo unaweza kutaka kutafiti.
Wao kuongeza baadhi ya baridi interactivity kwa ukurasa wa mtandao.
Kama hii moja hufanya mazungumzo modal.
>> Hivyo kuna baadhi ya mambo ya kujifurahisha unaweza kufanya na Bootstrap.
Hivyo ushauri wangu kwako ni kwenda mbele na kuitumia katika miradi yako mwenyewe,
kufuata maelekezo sisi tu alifanya kama kwa jinsi ya kupata hiyo,
na tu kusoma Bootstrap kwa sababu itabidi kujifunza zaidi juu ya nini cha kufanya.
Na hivyo tumeenda zaidi, leo, jinsi ya kutumia
nyaraka, nini jengo vitalu ni, na jinsi gani ni conceptually.
Hivyo sasa changamoto yangu na wewe ni kufanya tovuti kwa kutumia Bootstrap.
Kwenda katika maandiko.
Na matumizi ya zana kwamba tumekuwa kujifunza hadi sasa kujaribu na Hazrat yao
na kuelewa kwao.
Na kutumia mitindo hizo na zana unaona kuna katika tovuti yako.
Na ni tu kubwa, mchakato wa majaribio.
>> Jaribu nje style fulani.
Gani kazi?
Je, si?
Jaribu kuweka mambo pamoja.
Kuona nini kinatokea.
Ni mengi sana binafsi kuongozwa, mchakato wa ugunduzi.
Lakini leo hii, tumejifunza misingi kabisa ya kile ni Bootstrap?
Kwa nini gani kazi?
Jinsi gani kazi?
Je, sisi kuanza kutumia hivyo, katika nafasi ya kwanza?
Na hivyo sasa kwamba wewe ni zaidi ya kwamba nundu, wewe
wanapaswa kuwa na uwezo wa kufanya hivyo pretty vizuri na wewe mwenyewe.
>> Hivyo mara nyingine tena, kila kificho tulivyofanya ni hapa.
Hivyo kama wewe milele unataka kupata brashi juu,
kama, nini kudanganya haraka karatasi kwa wote wa mitindo?
Unaweza kwenda katika sampuli hii hapa.
Tuna baadhi ya mitindo mfano hapa.
Kama unataka kujaribu changamoto tena na wewe mwenyewe,
unaweza kujaribu yao hapa na kuangalia nje ufumbuzi.
Hivyo kiungo huu utakuwa pamoja na kwenye slides, ambayo
watapelekwa nje kwenu bila shaka.
Lakini ni juu hapa pia.
Unaweza pause video, kama unataka.
Taarifa zote unahitaji ni kwenda kuwa haki hapa, kwenye tovuti hii.
Hivyo kama mtu ana maswali yoyote, tunaweza kuwapeleka kwa ajili ya pili dakika kadhaa.
Vinginevyo, kuwashukuru wote sana kwa kuangalia.