Tip:
Highlight text to annotate it
X
>> Neel Mehta: Nii tere igaüks, kes valvab siin
või vaadates online, või eemalt.
Minu nimi on Neel, see on CS50.
Ja tänane seminar on tundlik Web Design Bootstrap.
See on teema, mis on väga mulle südamelähedane.
Loodetavasti on see südamelähedaste
samuti lõpuks tänane seminar.
Nii Bootstrap.
Kui paljud teist on teinud ühtegi Selline veebi arengut enne?
Hea summa?
Natukene.
>> Nii Bootstrap on maailma kõige populaarne, esiotsa raames.
Seda kasutatakse by-- olen valinud Paar juhuslikult websites--
Lyft, Newsweek, ja Vogue.
See on kasutatud mitmeid veebisaite.
See on web design raamistik, mis lasen teil teha oma veebilehed
nii ilus ja tundlik.
Ja ma lähen üle neid kaks mõistet siin.
Ilus.
Nii et teil on normaalne kodulehel Vasakul mis on tehtud vaid HTML.
Sa oled õppinud HTML klassis ja punktis pikalt.
Bootstrap on võimalus teha oma veebilehed ilus.
Te võite võtta, mis on kohta vasak pool ekraani
ja muuta see, mis on kohta paremal pool ekraani väga,
väga, väga vähe koodi.
>> Sa saad kena sinist nuppu, saad väljamõeldud, ümarad servad ekraanil,
sa saad nimekirja vaates saada kaarte ja nii edasi väga vähe koodi.
Seal on tegelikult mingit CSS teil on kirjutada ise.
Nii Bootstrap saate on need eelnevalt loodud CSS
komponendid, mida saab panna sees oma veebilehele
et oleks ilus ilma väga palju tööd ise.
See on tõesti alglaadimise, lähtepunkt,
veebi arengut seiklusi.
Ja nii, kui sa oled lihtsalt pilkav up veebilehel,
see on väga hea koht alustamiseks.
Saad stiilne kodulehel väga, väga vähe tööd.
Ja tõepoolest, me läheme seda teha ise
käigus, nagu viis minutes-- 10 minuti jooksul.
Nii et see on üsna lihtne teha mõned suured veebilehed.
Nii et esimene osa.
>> Teine part-- tundlik.
Inimesed, tänapäeval ei ole lihtsalt juurdepääsu veebis oma sülearvuteid.
Tegelikult alates 2014. aastast rohkem inimesi juurdepääs veebi kaudu mobiilseadmete
nagu telefonid või tabletid, või teenuseid, või nii edasi kui veebilehed.
Ja veebilehed on traditsiooniliselt olnud projekteeritud sülearvutid või lauaarvutid
meeles.
Ja nii veebilehed on sageli väga hästi sobib teie telefoni.
Kui olete kunagi käinud harvard.edu telefoni,
see on selline tüütu kogemused, eks?
Seda sellepärast, et see ei ole tundlik.
Me püüame teha veebisaidid, mis on tundlik,
et vastata inimeste ekraani suurust.
>> Nii et kui see on telefon, see on lähe telefoni.
Kui see on tablett, see on minemas tablett.
See reguleerib sobitada ekraan on kasutusel.
Ja nii Bootstrap tagab ka väga, väga kasulik kommunaalteenuste eest.
Ja me ei kavatse arutada, mis samuti.
Nii jällegi on jaotatud kaheks osaks Bootstrap-- ilus ja vastutustundlik.
Me räägime neile.
Esiteks ilus.
Ja siis reageerib.
>> Nii et kõik koodi, et me oleme räägime today--
me ei kavatse on palju näiteid, palju väljakutseid, ja nii nüüd-- see
kõik elab sellel veebilehel siin.
See klapp on see, mida me välja saadetud.
Nii et kui sa oled siin, võite tunda tasuta pea üles kirjutama.
Ja kui sa vaatad eemalt, tunnen tasuta tõmmake see üles arvutisse
samuti.
Tõenäoliselt vajate seda ajal Selle käigus seminar.
>> Nii et me läheme kasutada veebisait nimega CodePen,
mis on koostöö kodeerimine keskkond, Seminari käigus.
Ja CodePen-- ja ma näitan sulle siin tõeline fast--
see võimaldab teil kirjutada HTML üheskoos.
Ma ei kirjuta, võin saata kutid, kutid saavad seda muuta.
Isegi kui sa oled kaugel, sa on siiski võimalik seda.
Sa võid kirjutada HTML kood on top ja see saab automaatselt
muundada Veebilehe allosas.
Nii et see on viis, kuidas saad kiiresti proovida koodi
ilma teha mingeid asju Teie IDE või oma veebilehel,
või mis iganes.
>> Nii et laske käia ja tõmba see kodulehel, kui sa oled remote
või kui te olete siin, eriti kui oled serveri.
is.gd/cs50boostrap.
No mütsid, ei allkriipsud ei midagi.
Nii et need, kes on siin, lihtsalt anna mulle thumbs
up, kui olete tõmbas up, et veebilehel.
Hea?
>> Sihtrühm: Jah.
>> Neel Mehta: Nii jõuame seda vaid korraks.
Nii esimene, me ei kavatse saada, kuidas sa teha oma veebilehed ilus?
Me läheme õppida tegema igavad, vana HTML, nagu ma näitasin teile enne,
ja keerake seda arvesse tõesti kena komponendid,
nagu kena vidinad, kena, värviline nupud ja etikette ja lauad,
ja kõik, kasutades Bootstrap.
Nii et kui me võiks kõik minna üle CodePen, et sa lihtsalt üles tõmmata.
See peaks välja natuke nagu see.
Kas see näeb välja selline kõigile?
>> Sihtrühm: Jah.
>> Neel Mehta: Kui oled kaugel, siis peaks nägema ka seda.
Kui ei, ma näitan sulle varsti, kuidas saad seda näeb välja selline
Tulevasel osa video.
Nii et siin me oleme kirjutanud väga HTML,
nagu mingi olete kasutanud klassis.
See on päris lihtne.
No Põhi.
Ja meil on mõned asjad.
Me oleme loonud väga, väga lihtne alustada
helistada YALP! millega saab leida restoranid piirkonnas,
ja leida ülevaateid ja suundades kõigil neil.
See on väga hea idee.
See pole kunagi varem teinud.
See on väga unikaalne nimi, liiga.
>> Nii et me läheme püüdma teha, on aidata omanik
of YALP! teha oma kodulehel vaadata tõesti, tõesti lahe.
Nii alustada, omanik YALP! on teinud natuke otsingut
kast ja väike nupp, ja siis võib-olla veidi
esiletõstetud ala jaoks Esiletõstetud restoran ja seejärel
nimekiri teistes restoranides mis on selle ala.
Nii saame lihtsalt läbi minema HTML kood reaalne kiire.
Kuidas mugav on kutid koos HTML?
Oleme teinud natuke osa ja klassis.
Korralike?
>> Nii nagu sulgege, HTML on kõike võttes
sildid või elemendid, mis ütlevad arvuti, kuidas panema veebilehel.
Nii et see h1 siin-- alustada h1, Tere to YALP !, lõpus h1-- ütleb arvutile,
juhtida suur päise kaudu ta ütleb, Welcome to YALP!
sees olemas.
Meil on ka vorme.
Me ei sisendite, nagu see, teksti sisendid, mis muudab teksti kasti
te kirjutate.
Sul on ka nupud.
Sa saad kena, klikitav nupp.
Ta ei tee midagi õigesti nüüd, aga sa saad nuppu.
Sul võib olla divs või sirkel, et lõhkuda oma lehele erinevatesse rühmadesse.
>> Sul võib olla lõiked, nuppudega.
Kui teil on punktid, siis sul on järjestamata nimekirju, ul,
ja nimekirjad sees, et li.
Nii et need on väga lihtne ehituskivid veebilehel.
Ja tõepoolest, päris palju Iga veebileht näed
läheb ehitatud kasutades samu vahendeid.
Muidugi, *** kõik ei otsida see halb, sest me oleme
läheb vürtsi see üles natuke.
Nii saab see igav vana HTML ja start muutes selle kauni site
et me just nägin paar minutit tagasi.
>> Nii alustame väga lihtne.
Nii et meil on seda nuppu siin.
In Bootstrap, nagu me nägime, saame on kena, ilus, sinine nupp.
Ja see on tehtud mitte tehes custom CSS.
Ei ole kohandatud CSS siin.
See on tehtud, lisades klassi Teie HTML elemente.
Kui olete proovinud klasside või hrefs või ankrud, või type = "text" eest inputs--
HTML elemente võib olla need omadused.
*** võivad olla lisainfot et sa võiksid anda neile.
>> Ja nii sel juhul, Klassid on atribuudi.
Nii võid kirjutada, nupp class = midagi sees stringid.
Ja see atribuut ütleb arvuti, see ei ole üldse, vanad nuppu.
See on nupp, mis on Selle klassi nupud.
Ja nii Bootstrap, kui annad talle teatud stiili oma element,
see tõmbab ta teatud viisil.
Nii et ma kirjutan "btn btn-algkooli.
btn olles lühend nuppu.
Märkad nüüd, et minu kole nupp välja
arvesse kena, ilus, sinine nupp.
Tundub väga kena, kui me klõpsake seda.
>> Ja mis siis juhtub, on meil btn klassi ja btn-algkoolis
meie element.
Ja Bootstrap lähevad ja öelda, OK, ma tean, et seal on neid kahte klassi.
Iga element, mis on nende kahe klasside tuleks teha niimoodi.
Nii et see tuum, kuidas sa lisada stiilide elemente Bootstrap.
Sa lihtsalt lisada klasside neile ja see kaalu seda oma äranägemise järgi.
Nii et siin on veel üks näide.
Kui sisend, võime lisada klassi = "vormi kontrolli".
Ja ma näitan varsti kus sa saab teada, mis liiki
Saadaval on iga selline element.
Aga klassi, et me lihtsalt Lisatud on kena, ümarate nurkadega,
see on kena polster, see on kena, sinine kuma ta.
>> Me võime ka minna seda vormi.
Ja class = "vormi-inline", mis muudab Meie kujul, nagu te võite ette kujutada, inline.
Nii ta otsib natuke rohkem nagu mis meil oli enne juba.
Nii et enne kui me minna stiili ülejäänud Lehe küsimusi, mida me
tegin?
Me lihtsalt külge klassi meie erinevaid elemente.
Ja ma näitan sulle hiljem, kui saate aru saada, mis klassid on kättesaadavad.
Me lisatud klasside on teatud stiile.
Ja mis ütleb brauser kuidas paigutus lehel abil
Bootstrap on ette stiile.
Iga publiku küsimustele?
>> Hea nii palju?
Cool.
Paljud väljakutsed koos Bootstrap on lihtsalt
teades, millised komponendid saadaval ja kuidas neid kasutada.
Ja see on kõik õppinud kellel on kogemusi ning ka
lugedes dokumentatsiooni, mida me räägime varsti.
Nii et meil on see div.
See on lihtsalt igav, vana asi.
Tahame rõhutada seda kuidagi.
Nii Bootstrap, seal on palju komponente saadaval.
Ja see on getbootstrap.com.
See on väga kasulik allikas.
See sisaldab asjade like-- Siin on, kuidas teha nupp.
Ja seda saab teha nav baarid, saate etiketid, saate liikuda baarid,
saate teha nimekirja rühmad.
Põhimõtteliselt on igasuguseid kohta võite näha veebilehel.
>> Siin on üks, et me praegu proovima.
Seda nimetatakse paneeli.
Kui te olete kunagi kasutada Google Nüüd on neil kaarte.
Või mis tahes Android seade on kaardid.
Neil on väike valge kastid et on asju sees on.
Ja nii me ei kavatse proovida ja teha et end siin kasutades asi
nimetatakse paneeli.
Nii et kui me omistame class = "panel panel-default "meie välimine div,
siis lisage div class = - olgem lihtsalt vaadata seda dokumentatsiooni.
div class = "panel-pealkirja" ja siis div class = "paneelid keha".
Jällegi, ärge muretsege meeldejätmist see kood.
See on kättesaadavad Internetis.
>> Nii et me tegime seda ja nüüd meie igavad, vanad div kujunes see kena, veidi kaardi.
See on kena polster, siis on piirid, see paistab
muust lehel mis on päris lahe.
Nii lähme ja muuta see siia suundades nuppu otsima kena.
Kes publiku tahab öelda mulle, mida ma teha saan nuppu
teha seda vaadata kena kasutades Bootstrap?
Jah?
>> Sihtrühm: Võiksime lisada klassis.
Ja me võiksime teha class = "btn btn-algkooli".
Neel Mehta: Jah.
Seal on hunnik muid värvid saadaval buttons--
või midagi, et asi.
Me ei saa teha btn-ohu ja muuta see punane.
Seal me läheme.
Me ei saa teha btn-edu, et muuta see roheliseks.
Me ei saa teha btn-info-- seal on kamp asju, mis on teile kättesaadavaks.
Nii et mul on väike probleem nüüd.
Nii et üks asi veel et olen jäänud un-stiilis.
See Top Restoranid.
>> Ja me tahame asja kasutada nimetatakse nimekirja rühma stiil.
Nii et minu ülesanne on teile minna getbootstrap.com--
Ma tõmba see siia üles.
getboostrap.com.
Mine getbootstrap.com, leida sektsiooni, kus *** lähevad üle nimekirja rühmad.
Ja te näete siin Näiteks ja õige klassi
mida saab kasutada, et muuta oma loetelud nendest kena nimekirja rühmad.
Need on välja töötatud näited koodi näited, mida
mida kasutad, mida HTML kood te kasutate, ja mida väljundiks.
>> Nii et minu väljakutse Sa-- minna getbootstrap.com,
kas sa oled siin või kodus, ja proovida ja lisada stiilid sellele ul
teha seda vaadata kena.
Ja kasutada nimekirja grupp stiilis.
Tahad võtta paar minutit, ja otsida dokumente
proovida seda ise?
Sest kui sa teed veebi arengut, saate aru palju oma töö
läheb lugemine Selle dokumentatsiooni.
Nii et ma arvan, et see on hea tutvuda kuidas lugeda dokumentatsiooni,
kuidas aru saada, mis on kui, Mis koodi näited, mida saab kasutada,
mida saate kasutada.
>> Nii jälle, getbootstrap.com, minna Components tab,
ja siis liigu lehel alla kuni Nimekiri Group.
Ja te näete näiteid koodi saate teha oma HTML sobivad nii.
Nii, et võta paar minutit ja proovida ja uurida ise,
kas sa oled siin või kodus.
Kui oled kodus, Video peatamiseks ehk ja seda proovida ise.
Kui sa oled siin, kui te lähete meie website-- kui te värskenda lehekülge,
näete seda seal.
See seesama kood on lihtsalt lisades uusi stiile seal.
Nii, et võta paar minutit.
Anna mulle teada, kui teil on tunne hea midagi või kui sa oled täiesti kadunud.
Kõlab hästi?
Cool.
Quick kõrvale neile, kodus, samal ajal kui me ootame,
kui te lähete edasi github site et ma panna paar slaidi tagasi
suunas video alguse, Mul on github repo, hoidla,
seda juttu.
Kõik need kood näiteid, et me oleme räägime hoitakse siin.
Nii et kui te lähete vaidlustada-1.html, seda kõik on kood, mis meil praegu
meie CodePen.
Nii saate lihtsalt minna ja kopeerida seda ja kleepige see oma CodePen.
Ja nii saab kursis mida me siin teeme.
Nii on see leht avatud, samuti oleme läbida ülejäänud seminar.
Jällegi, sa tahad seda nägema, mida sa vaata maha allosas ekraani
seal.
Hästi tundma?
Solid.
Ootame kõik teisedki ongi see läbi, mida *** teevad.
>> Jah?
>> Sihtrühm: Oletame, et ma tahtsin kasutada Bootstrap kell koju--
Neel Mehta: Jah.
Sihtrühm: Ma näen, kodulehel, Alustamine lehel.
*** annavad mulle võimalusi Bootstrap, lähtekoodi, või Sass.
Milline neist ma tahan?
>> Neel Mehta: Jah.
Seega on küsimus selles, kuidas sa saad hakkasin kasutama Bootstrap ise?
See lihtsalt juhtub võluväel tööd siin.
Nii et kui meil on aega lõpuks seminar,
Ma näitan teile, kuidas saada see oma veebilehel.
Nagu siin, ma olen tegelikult panna mõned seaded,
on see automaatselt koormatud, kuid ma
näitavad, et sa seda tühjalt oma veebilehti.
>> Sihtrühm: Aitäh.
>> Neel Mehta: Jah.
Hea küsimus.
Hästi tundma?
Hästi tundma?
Cool.
Nii et kes tahab mulle öelda, kuidas *** tegid see asi vaadata kena ja Boostrappy?
Mis on esimese klassi lisame ul?
Sihtrühm: class = "list-rühm".
Neel Mehta: Jah. list-rühm.
Ja siis mida me kinnituvad lis?
Keegi teine?
Sihtrühm: Ja siis, pärast et class = "list-grupi-objekt".
>> Neel Mehta: Jah.
>> Sihtrühm: Ja see on Sama järgmise üks.
>> Neel Mehta: li class = "list-grupi-objekt".
Palun.
Meil on kena nimekirja rühm, nagu me lootsime.
Nii et te lähete.
In 10 minutit, oleme teinud see igav, vana YALP! lehekülg
vaadata kena ja professionaalne.
Ja see on alles algus.
Nüüd, et sa tunned head kohta, et lähme
lihtsalt minna ja rääkida veel paar komponente
võib tulla mugav, kui minge kogu oma seiklus.
>> Muidugi, seal on palju need siin.
Ja nüüd, et olete õppinud kuidas teha nimekirja rühmad,
saab päris palju õpetada ise, kuidas seda teha mõni neist.
Aga muidugi, olgem lihtsalt proovida ja teha veel paar ise,
lihtsalt nii saad tunda kuidas te võite neid kasutada.
Ma lihtsalt minna Selle näiteks on siin.
Jällegi, kood, et ma lihtsalt kleepida siin on saadaval siin.
Nii võid vabalt tõmmake see üles.
>> Nii et me oleme juba läbi käinud Paar need näited.
Nii et meil on nupud, mis me oleme juba näinud, kuidas seda teha.
Me ei saa teha nupud rohkem.
Autor nuppu class-- läheb, btn btn-lg ja btn-default muudab valge.
Nii et see muudab meie nupp suurem kui see muidu oleks.
See võib tulla mugav, kui teil on suur esitada nuppu või midagi.
Nägime nimekirja rühm näiteks nägime kujul näiteks.
>> Üks väga oluline on ikoonid.
Ja ikoonid on viis, kuidas saate lisada huvitavaid asju, nagu check check
märgid või plussid või sõber ikoonid või restart ikoonid,
või mis iganes teie web app.
Nii jälle, kui me siin rohkem, komponendid, Glyphicons,
on ikoonid saadaval Bootstrap.
Seal on ammendav nimekiri kõigist neist siin.
Nii lihtsalt näitena, Proovime ja lisage esimene kommentaar.
>> Nii nagu Facebook, me üritab omada Lisa sõbrale nuppu.
Vaatame kõigepealt lisada mõned stiili.
nuppu class = "btn btn-edu".
Ja me läheme.
Lisame ikoon siin.
Mis ikoon, kas sa arvad, võib mõtet panna siin?
Te olete ilmselt näinud mõned veebilehti või mis iganes,
aga mis on näide ikoon, mis Võib minna ka sees see nupp?
Julgelt sirvida seda seisukohta, Kui teil on vaja mingit inspiratsiooni.
Seal on palju kasulikku need leiate siit.
Jah?
>> Sihtrühm: Võibolla glyphicon kasutaja ühe?
Neel Mehta: OK.
See.
See on päris hea.
Jah.
On Facebook, ma arvan, et see näeks natuke niimoodi.
Nii et siin on, kuidas me minna Lisades ikoonid meie lehekülge.
Meil lihtsalt on span-- span on neutraalne konteinerisse midagi.
Div on konteiner midagi, span veel üks konteiner.
divs on reavahetused ümber, kestab ei ole.
Nii et erinevaid võimalusi võttes geneeriliste konteineritesse.
Nagu ta ei ole mõtet panna see sees punkt või midagi.
Meil panna see sees midagi küll,
nii me lihtsalt panna sees jooksul.
Nii span class = glyphicon glyphicon-user "tihe jooksul.
Ja nüüd on meil sees ikooni nuppu.
>> Nii see ei tundu täiesti erinevalt mida võib näha facebook.com.
Ja nii see on tore, et neid saab tegelikult panna kõikjal soovite.
Oma päise kaudu baarid, oma nimekirja rühmad.
Mida iganes.
See ei pea olema sees nuppu.
Nii näiteks, ma ei panna samasse klassi siin.
"glyphicon glyphicon kasutaja".
Ja tundub just sama.
Nii et need icons-- saate span class = "glyphicon glyphicon-iganes".
Ja mis võimaldab teil lisada ikoonid kus iganes soovite.
Ja ikoonid on väga oluline osa muutes veebisaidi ilme
professionaalne ja hästi tehtud.
Nii et ärge pingutage, kuid see on Sageli on hea teada.
>> Paneelid, jälle.
Ma lihtsalt seda uuesti sulgege sest *** on omamoodi seotud.
Märkad, et keerates oma tavalise HTML
sait Bootstrap-afied Sait on teil
lisada täiendavaid struktuuri kodulehel.
Näiteks on meil extra Divs siin lihtsalt sellepärast, et need
Vaja on teha paneeli.
Nii lihtsalt hoida seda meeles, et sa pead olema ekstra struktuuri.
Nii "Paneelikuva-default".
Võibolla on see paneel-päises.
Ma arvan, et see paneel-rubriiki.
Jah.
Seal me läheme.
Niisiis, jällegi on meie paneeli.
>> Üks asi veel, et me ei kata veel, lauad.
Lauad, vaikimisi välimus selline kole.
Nagu nii.
Aga tabelid on muidugi väga oluline osa
mida te teete veebi arengut.
In Pset7, näiteks CS50 Finance, mis tulevad välja varsti,
saate kasutada palju tabeleid.
Ja palju web dev kasutada palju Tabelite teabe kuvamiseks,
nagu varud või hinded, või mis iganes.
>> Nii stiil tabelid on tegelikult väga lihtne.
Sa lisada tabelisse klassi oma laua.
Ja ma julgen öelda, tundub päris kena.
Sa saad teha ekstra asju, nagu "Lauale-triibuline".
Ja te näete tulemusi siin.
Seda saab teha laua-piirneb.
Seal on palju võimalusi saad.
Aga põhimõtteliselt, lisades tabel, tabeli klassi,
teeb oma tabeleid vaadata päris kena.
Nii et see Lühike ülevaade mõned tähtsamad stiilid
ja komponendid saate vaja kasutada Bootstrap.
Nii et ma arvan, et wrapid up meie ilus osa.
Kõik küsimused just nüüd, kuidas teha oma veebilehed ilus?
Kuidas saate neid komponente oma eelise?
Hästi tundma?
Jah?
Sihtrühm: Võib-olla see on rumal küsimus,
kuid võite kasutada Bootstrap Wikipedia?
Kui oled toimetamine Wikipedia lehele?
Neel Mehta: Jah.
Nii et küsimus oli, ma olen toimetamine Wikipedia lehele,
ma saan lisada Bootstrap stiile seal?
>> Sihtrühm: Jah.
>> Neel Mehta: Ja nii Bootstrap on põhimõtteliselt suur CSS stiili lehed.
CSS stiili lehed lihtsalt ütleb, millal iganes Mul on selles klassis, lisage need stiilid.
Nii CSS fail Bootstrap saab olema midagi .btn,
nuppu klassi, saavad nagu ümara nurga piiri või mis iganes.
Ühesõnaga, Bootstrapi see lihtsalt kamp klasside ja hunnik stiilid
määratud selles klassis.
Nii kaua, kui teil on, et CSS, see nimekiri eeskirjadest oma lehele,
saad Bootstrap stiil.
See on muidugi sõltub võttes olema = stiilid oma lehele
alustuseks.
>> Ja nii Wikipedia siis ilmselt ei suutnud
seda teha, sest Wikipedia ei ole Bootstrap ta.
Aga kui ta seda tegi on Bootstrap, siis võiks ilmselt teha.
Ja kui sa tahad, võid hulka, kuid see võiks
murda olemasolevate paigutus lehel.
Aga väga hea küsimus.
Võite kasutada Bootstrap kui ta on kantud,
Aga see ei ole ehitatud vaikimisi.
>> Sihtrühm: Aitäh.
>> Neel Mehta: Jah.
Veel küsimusi?
Jah.
Nii, kas sa oled siin või kodus, lihtsalt meeles getboostrap.com-- uuesti,
getboostrap.com-- on sinu sõber.
Kui sa oled kasutades Bootstrap, see annab teile
juhiseid, kuidas saada alanud, kuidas kasutada komponente.
Seal on mõned lahedad JavaScript plug-ins, et me ei hakka siin
kuid *** tasub vaadata ka.
Nii et see on sinu sõber.
See on lihtsalt oluline, et saada kasutatakse, kuidas kasutada seda.
>> Nii saab vestelda natuke mistõttu reageerivad veebilehed.
Nii nagu ma enne ütlesin, inimesed kasutada oma sülearvuteid, *** kasutavad oma telefone.
Ja kui võite kujutada, see on väga erineva ekraani suurus kui see.
Ja nii sama veebilehel et oleks hea minu telefon
ei kavatse vaadata hea, tingimata, arvutis.
Mida sa pead tegema, on teha oma kodulehel kohaneda.
See on kohaneda erinevate Ekraani suurus et see edasi.
>> See on öelda, ma tean, et ma kohta arvuti, suur laptop, ma peaks laiendama.
Ma tean, et ma olen telefoni ma peaks vähenema.
Ja nii Bootstrap annab mõned väga, väga kasulik vahend selleks.
Nii Bootstrap olgem teil murda veebisait arvesse 12 veergu.
Võite teha rida ja on 12 veergu.
Ja saab partitsiooni Neil aga soovite.
Sul võib olla üks, suur asi, mis on 12 veergu lai.
Sul võib olla kaks asja mis on kuus iga.
Seda saab teha üks asi, mis on neli, üks, mis on kaks või üks, mis on kuus.
Seda saab teha kolm, kolm, kolm, kolm.
Seda saab teha mida iganes jaotus, mida soovite.
>> Ehk oma veebilehel peab olema Vasakus veerus, mis on üks kolmandik laiust.
Nii et oleks neli veergu lai ja ülejäänud lehele
oleks kaheksa sambad lai.
Nii et see on näide.
Olgem tõmba teine näide.
>> Sihtrühm: see alati pea olema isegi jagada?
Kas võib olla, seitse, viis split?
>> Neel Mehta: Jah.
See võiks olla seitse, viis.
Jah.
Niikaua kui see lisab 12, kõik on korras.
Nii lähme tagasi siia.
Jällegi kood, mis on Siin on olemas ka siin,
all tundlik näiteks.
Nii et ma lihtsalt tõmmata mõned Näiteks tundlik koodi siin.
Nii et sa seda teha, kasutades asi nimega reas.
Row on lihtsalt üks klass.
See on teine stiil lisate peale oma Divs, et muuta need oma komponente.
>> Nii te ütlete, div class = "rida" teha järjest
et anda endale 12 veergu ruumi.
Ja siis paned veerge sees, et.
Nii et siin me col-xs-6.
Ära muretse xs.
Me räägime oma sec.
Aga põhimõtteliselt on meil üks asi, mis on kuus lai.
Me nimetame seda vasakule.
Ja nii see on vasakus kastis siin.
Meil on üks asi, mis on kuus 12 veergu mööda.
Ja see üks on õige.
>> ka lihtsalt annab marke Sinu div täitke see hall.
Nii et on lihtsalt nii saame näha, et *** on erinevad.
Ja nii see esimene näide.
See on väga lihtne näide, kuidas kasutab oma ridu ja veerge siin.
Sa määratleda järjest kasutades class = "rida".
Ja siis sa class = "col-xs-6" teha poole, "col-xs-6" teha teine pool.
Siin on keerulisem näide.
Vaatame Tiny, Hiiglaslik, ülejäänud üks.
>> Me ei saa teha Tiny kaks veergu lai, saame teha suuri sammastele lai,
ja ülejäänud neli veergu lai.
See lisab kuni 12.
Ja nii need lõpuks toestavad laius lehel.
Jällegi on meil järjest väljaspool.
Siis on meil div class = "col-xs-2" ja seejärel 6 ja seejärel 4.
Ja see annab struktuuri meile.
Ja nii saame panna mida iganes kuradit me tahame siia sisse.
Selle asemel, et Tiny saame panna nuppu.
nuppu class = "btn btn-algkooli".
Ja nii märgata, et meie nuppu ei võta kõiki laius,
kuid vähemalt see on piiratud sellele palju ruumi.
>> Nii et kõik on hästi ja hea.
Nii saame lõhkuda meie veebis lk tükkideks, laius tark.
Me võime öelda, et me tahame olla vasakul veerus, ja paremas veerus, ja nii edasi.
Aga me ei ole läinud üle kuidas sa teed seda reageerivad.
Ja nii Bootstrap Teeme seda samuti.
See on neid asju nimetatakse murdepunktid.
Nii et see on võimalik teada, kas sa oled laptop, oled tablett,
sa oled telefoni horisontaalne, või oled telefoni vertikaalne.
Ta teab, ekraani suurus.
Ja murrab selle nelja categories-- suur või LG, mis on sülearvutid, tavaliselt.
md või keskmise, mis on tabletid.
sm, väike.
Või xs, extra väike.
Ja nii, kui sa täpsustada veerus, sa ütled,
see peaks olema sammastele lai kohta ekstra väike seade.
Sellepärast me tegime col-xs-6.
Me ütleme, et see peaks olla kuus 12 veergu lai
kohta ekstra väike seade.
Ja kui see on midagi suuremat, me lihtsalt vaikimisi kasutab extra väiksus.
Kui see on midagi suurem kui Eriti väike, see saab olema kuus lai.
Ja nii me võimendada Nende teha meie sambad
on eri suuruse veerud põhineb ekraani suurus.
Lähme sellele reageerivad saneerimist.
Nii et meil on meie veergu.
Ja ta ütleb, "col-lg-6 col-xs-12".
Nii arvestades seda, mida sa tead Seni, mida sa
arvan läheb juhtuda suurel ekraanil?
Noh, see on selline andnud teed, aga mida teha
arvad, et see näeb välja meeldib suurel ekraanil?
Ja miks see nii on?
>> Sihtrühm: Kas see, et suurel ekraanil, see on
kavatseb võtta ainult osa kogu ruumi?
Nagu poole, siis ma arvan?
>> Neel Mehta: Jah.
>> Sihtrühm: Ja väiksematele ekraan, see läheb
võtta kogu ekraani, 12.
Neel Mehta: Jah.
Õigus.
Nii näiteks, olgem lihtsalt vaadata siin.
Jah.
Nii et midagi, mis on LG või bigger-- nii et minu arvuti juhtub
tuleb lg, sest see on päris wide-- see teeb
see kõrvuti, sest see on col-Ig-6.
Nii, sest see on suurte, see muudab sammastele lai ja sammastele lai.
Vaatame, mis juhtub, kui ma seda väiksemasse üks.
Ma lihtsalt un täisekraanil seda.
Ja ma lähen kahaneb ekraani.
Ma lähen kahaneb ekraani, nii et see Tundub Olen väiksemas seadmes.
Nii et ma lähen kahaneb see niimoodi.
>> Ja voila.
Nüüdseks on laotud sest nüüd oleme läinud
Suurte mina-- see on ilmselt Lisatasu väikese ekraani suurus.
Ja nii nüüd ta ütleb, OK, me ei ole suures, me oleme ekstra väikese maa.
Nii et me ei kavatse kasutada ekstra väikese suurusega.
Ja me ei kavatse xs-12, xs-12.
Nii see läheb kokku kuhjata.
Ja just märganud, et seal on asi nimega murdepunkti.
Katkepunkt kus sa tegid üleminekut
ekstra väike, väike, väike suur, ja nii edasi.
>> Nii lihtsalt märgata, et kui ma lükake seda välja lõpuks saad asja juurde
kus *** hüppavad olla kõrvuti.
Palun.
Nii et murdepunkti seal.
Nii saame muuta see veelgi keerulisem.
Nüüd võime öelda, need asjad peaks olema neli lai.
See tähendab, et *** peaksid alustada umbes kolmandik
kõnest on väga suur seadmeid.
On keskmise seade, peaks ta kuni pool ekraani, sest see on MD-6.
On väga väike seade, see peaks võtma 12.
Ja nii see tundub üsna loomulik.
Lihtsalt proovida seda välja ise.
>> Nii suurel ekraanil, *** neli lai.
Kahaneb see natuke.
Ja *** on nüüd kuus lai.
Nii et see on kuue, kuue, kuue.
Kahaneb see veelgi ja seejärel neid täiesti laotud.
Nii et see, näiteks, on mõttekas, kui sul on kaardid, nagu uudised kaardid,
Näiteks kui kui see on väga suurel ekraanil,
see on OK, kui teil on mitu kõrvuti sest *** kõik saavad piisavalt ruumi.
Aga *** peavad olema piisavalt ruumi.
Nii et väiksem ekraan, sa tahad, et anda neile
rohkem ruumi, proportsionaalselt lehel.
>> Nii nagu reaalses maailmas näiteks oletame meil Twitter.
Ja meil on teksti kasti, nii et võite piiksuma küljel.
Ja meil on nimekiri trendid teemasid paremal küljel.
Nii suurel ekraanil, peaksime on neid olla kõrvuti,
nii näed neid klaasi.
Aga väiksem ekraan, me peaksime tegema 12 ja 12,
nii et trendid teemasid on allpool piiksuma ala.
Kuna lehte ala on Peaasi ja väike ekraan,
trendid teemasid ei asi päris nii palju.
Ja nii me paneme neid kohe alla, nii et et *** saavad nii saad piisavalt ruumi.
Mõtet nii palju?
>> Sihtrühm: Jah.
>> Neel Mehta: Solid.
Nii et kõik on näited Mul on siin.
Proovime teha väljakutse.
Nii jälle, see on väljakutse-2.html eest Neile järgneva koos kodus.
Nii et minu sõber, Mark Zuckerberg, tuli mulle ükspäev.
Ja ta on nagu, Neel, mul on saanud päris hea web design.
Ma suudan HTML.
Olen teinud seda vähe, Uue muuta Facebook.
Mul on uus idee, kuidas peaksime stiilis Facebook.
Ja siin see on.
Siin samas.
Siin on mõned näiteks koodi.
Nii seda nimetatakse Fancybook.
>> Meil on mõned staatuse uuendusi.
Meil on Nemo, Mike Kosowski, ***-- kolm staatuse uuendusi.
Ja siis on meil nimekiri online sõpradega paremal all.
Nii ta on teinud oma kodutöö.
Ta teab natuke Bootstrap, ta on teinud nimekirja vaadata,
ta on teinud natuke HTML.
Nii ta on veebilehel.
Aga ta on nagu, Neel, ma ei mõista tundlik disain üldse.
Kas teil on eksperdid, kes võiks mind aidata, et?
Ja õnneks olete nüüd ekspertide tundlik disain.
>> Mida ta ütles mulle, oli see, et ta tahab Fancybook nägema seda.
On väga väike seade, nagu telefon, kõik
tuleks kuhjata, nagu siin.
Nii et teil on ajaskaala algul, kuni top, ja seejärel
siis peaks olema chat allnurgas.
Aga tableti või keskmise seadme, peaks olema pool ja pool,
nagu ajakava peaks olema poole ja nimekiri chat sõbrad
peaks olema teine pool.
>> Siis sülearvuti, ajaskaala peaks võtma kolm neljandikku
ja siis chat hedge peaks asuda teise veerandi.
Ja nii ta on nagu, Neel, mul on see koodi siin, kuid see ei ole tundlik.
See peab käituma niimoodi.
Nii et minu väljakutse teile antakse see kood siin--
Kui teil värskendada oma CodePens, näete seda.
Või kui sa lihtsalt kleebi kood kohta väljakutse-2, näete seda.
>> Siin on see näide koodi.
Näete mõned xxxs.
Ma tahan, et sa muuta xxxs, nii et ajaskaala ja nimekirja sõpradega
järgib neid näitajad siin.
Ära muretse, mida on sees ajakava nüüd.
Me saame, et järgmises etapis.
Aga nüüd, vaatame, kas me saame neid asju jagada seda üles niimoodi.
Nii ei tee seda mõtet?
Nii et kui sa oled kodus, peatada video ja proovida
teha oma veebilehele otsida reageerivad niimoodi.
Kui sa oled siin, võtke nagu kaks, kolm minutit.
Julgelt vestelda naabriga, ja proovida, ja määrata hr Zuckerberg
tundlik disaini probleem.
Kui teil on küsimusi, andke mulle teada.
Hästi tundma?
Valmis?
Nice.
>> Sihtrühm: [kuuldamatu].
Neel Mehta: Mis?
>> Sihtrühm: ma olen hea.
>> Neel Mehta: Oh, hea.
Nice.
Sihtrühm: Asi 12, on see, et Bootstrap
suhtub antud ekraani ruumi 12 üksused üle ja siis jagab selle välja?
Kuidas täpselt ei Vahekorra töö see on?
>> Neel Mehta: Jah.
Seega on küsimus selles, kuidas ei doseerimispallis
töötada Bootstrap, eks?
>> Sihtrühm: Jah.
Neel Mehta: Nii et kui teil on div class = "rida",
Ükskõik kui suur ekraan on, Bootstrap annab sulle 12 ühikut
ühesuurused to võta nii palju suurust.
Nii col 1, see on alati 8,33% suurust ekraanil,
kas see on see suur või et see on suur.
Ja nii loomulikult väiksemas ekraan, igas veerus on väiksem.
Teil on veel 12 veergu lai, et see on väiksem.
Nii et see on kuni teil veenduda et asjad võtavad rohkem veerus
proportsionaalselt, et kompenseerida eest, et ruumipuudus.
Kas see on mõtet?
>> Sihtrühm: Jah.
Aitäh.
Neel Mehta: Hea küsimus.
Sihtrühm: On suur ekraan, võib teil
ajaskaala asuda kolm neljandikku?
>> Neel Mehta: Jah.
Neel Mehta: Kuidas poisid tunne?
Hea?
Cool.
Nii saab tagasi tulla.
Ja olgem proovida ja määrata see osa Hr Zuckerberg kodulehel.
Nii et tähtajad on siin, kell top ja nimekirja sõpradega
on allosas.
Ja nii me lihtsalt vaja määrata veerud, mille suuruse proportsionaalne,
Kõigis neis.
Nii see esimene *** on ajaskaala.
Mis klassi me panna siin?
Mida te poisid panna siin?
Seega pidage meeles, suurel ekraanil, mida ta vajab asuda kolmveerand laius.
Ja mis stiilis annaks sulle seda?
On suur ekraan, kolm neljandikku laius.
Mis klassi me kasutame seal?
Sihtrühm: Nii et me lihtsalt läheb toimetamine, et esimese astme klassis.
Neel Mehta: nüüd.
Jah.
>> Sihtrühm: Me ei toimetamine iga, individuaalne omadus ajakava?
Neel Mehta: Mitte praegu, vähemalt.
Nii kogu see asi on blokeerida.
Me lihtsalt muutes projekteerimine blokeerida.
Nii et siin me col-lg-9, sest see on üheksa 12st lai suurel ekraanil.
Ja siis keskmise ekraan, kui palju veerge saan?
Sihtrühm: See peaks olema pool ja pool.
Neel Mehta: Right.
Kui palju see on?
>> Sihtrühm: Nii kuus.
Neel Mehta: Kuus.
Ja siis ekstra väikese peaks olla-- kui see hõivab kogu rea laius,
kui palju peaks olema?
Sihtrühm: 12.
Neel Mehta: 12.
Jah.
Ja nüüd pean muuta teisi ones,
nii kulub ülejäänud ruumi.
Nii col-lg--
Sihtrühm: See saab võtta kogu ekraani?
Neel Mehta: Kulub veerandi Ekraani suures seade,
nagu me näitasime siin.
>> Sihtrühm: Kolm.
>> Neel Mehta: Kolm.
Ja siis col-MD-6 võtma kuni ülejäänud ruumi.
col-xs-12.
Nüüd on meil ajakava asumist kolmveerand
lehekülje kohta suurel ekraanil ja siis veerand küljel.
Ja siis, kui suurus ekraanil allapoole, see peaks suurust vastavalt.
Nii see on laotud nüüd, väga väike ekraan.
Ja kui me selle suurust up natuke, *** peaksid olema täpselt pool ja pool.
Nii et me oleme teinud, et nii kaugele.
Väga lahe.
Ja nii me ei tee teiselt poolt väljakutse.
Seda saab teha ise.
Aga põhimõtteliselt, sa pead proovida ja teha need reageerivad
kui well-- teha ajakava esemed, ise, tundlik.
Nüüd oleme läbi käinud Kõik, mida pead teadma
umbes reageeriv pool Bootstrap.
Kõik küsimused tundlik disain Bootstrap
ja kuidas sa võiksid minna seda teed, et?
Jah?
>> Sihtrühm: Kas see sarnane, kui meil oli varjatud video
ja tahtsime kontrollida skaalal, kus video was--
suurusest video läheb sülearvuti telefoni.
Neel Mehta: Jah.
Rohkem või vähem.
Sa pead rääkima video võta nii palju ruumi kui see on antud,
mis on veidi tüütu mõnikord.
Aga peamine idee on sama.
Video, nagu iga teine objekt Lehe näiteks nupu või mis iganes,
nii kaua, kui te kasutate veergude ja ridade
võite anda talle teatud ruumi.
Ja nii saan seda au, et on Omaette küsimus, sest nagu YouTube
manustab on teatud eelistatud suurus.
Aga teoreetiliselt on Vähemalt, et see töötab.
Cool?
>> Sihtrühm: Ma arvan, et siis, pildiga, kas sa tegelikult
vaja on erinevaid versioone sama pilt erinevates suurustes
sülearvuti versus iPhone?
Jah Küsimus on, kas me peame on pildid, mis on tundlik ka.
Ja tõepoolest, saate seda teha.
Ma arvan, et see on CSS.
Aga Bootstrap võimaldab teil seda teha ka.
Sul võib olla tundlik pilte.
Sul võib olla oma pildid suurust vastavalt suurusele lehel.
Ja seal on väga uus asi HTML5, uusim versioon HTML,
ja CSS3, uusim versioon CSS, mis
Teid paluda erinevaid pilte põhineb ekraani suurus oled.
Tavaliselt on piisavalt hea, et lihtsalt on pilt lihtsalt kahaneb või kasvab
aga suur see peaks olema.
Aga sa võid, kui soovite to, on üks 32 32
väga väikestele ekraanidele ja 64 64 jaoks suur ekraan,
ja seejärel teenima neid valikuliselt.
Sa saad sellega hakkama.
Ongi valmis mõned inimesed.
See on ikka päris esirinnas.
Aga lühike vastus, tundlik images-- Bootstrap võib päästa päev.
Cool?
>> Sihtrühm: Aitäh.
>> Neel Mehta: Nii saab rääkida päris kiiresti kuidas
saada see oma veebilehel.
Oletame, et sa tahad teha oma oma kodulehel kasutades Bootstrap.
Ja nii olgem lihtsalt lihtsalt kõndige läbi koos.
Oletame, et sa teed lihtsalt tavaline HTML lehel.
Julgelt jälgida mööda Mis iganes on Sinu lemmik toimetaja on.
Nii et me lihtsalt mõned HTML lehel.
Me saame seda teha! DOCTYPE html.
See on ka html meie lehel.
Midagi uut.
Me oleme seda teinud enne.
Nii et siin on meil HTML ja saame panna asjad sees siin.
Me võime olla meie nuppu.
Ja nagu ma enne ütlesin, see ei pruugi läheb tööle.
Miks võib see ei tööta?
Miks me ei saa oma kena, värviline nupp?
>> Sihtrühm: Kuna me ei viita see et Bootstrap projekti või faili?
Neel Mehta: Jah.
Õige.
Kuna Bootstrap-- see lihtsalt fancy CSS faili.
See on mitmeid stiile, et on lisatud teie elemente.
Siin me oleme rääkinud, et me soovite kasutada neid stiile.
Ma tulen suurus, mis üles natuke.
Me oleme rääkinud seda tahame kasutada need stiilid, kuid me ei ole kunagi
ütles ta, mida stiile.
Ja see, mida teie Küsimus on varem olnud.
See on vastus sellele.
Peame leidma viisi, kuidas saada stiilid ning lisab need meie lehele kuidagi.
Ja nii Bootstrap tahet näita meile, kuidas seda teha.
>> Nii et kui sa lähed üles Siin Alustamine.
Seal on erinevaid võimalusi, kuidas alla laadida.
See ei pruugi mõtet tingimata.
Bootstrap-- see laseb te rüütama CSS faili ise.
Ja sa lisanud selle oma lehel.
Lähtekood on, kui soovite häkkida seda ise.
Sa ei pea seda tõesti.
Sass on keel mis koondab arvesse CSS.
Mõtle seda kui eeltöötluse.
Palju nagu PHP on eeltöötluse kohta HTML, Sass on eeltöötluse CSS.
Nii et kui sa tahad seda teha Sel moel saab teha.
>> Lihtsaim viis on kasutada CDN, või infosisu edastamine võrgu.
See on veebileht, mis lihtsalt mahutab kuni koopia Bootstrap
väga kiire teil lisada oma lehel.
Nii et siin on näide.
See annab sulle seda linki element.
Link element brauseri teada, võtta mis tahes failid on salvestatud siin
ja lisada see meie veebilehel.
Ja sel juhul, see on olema = CSS faili.
Nii me lihtsalt kopeerida, et URL, või et teksti, ja me visata sees
meie peas.
>> Ja ma ei hakka lehekülje selles, kuid saab usaldada, et see töötab.
Link sulle CSS.
Kaasa ta oma ja siis sa pead olema
võimelised kasutama kõik Bootstrap klasside, et sa tead ja armastus.
Kui soovite, et hoida seda kohapeal ja on see oma failisüsteemi
selle asemel, et minna Internetis haarata,
nagu siis, kui soovite kasutada lehe offline,
saate alla võimalus.
Aga enamasti, kasutades CDN on päris kiire, sest niimoodi
see ajakohastatakse pidevalt ka teid.
Sa pead ise uuendada seda.
On loogiline?
>> Nii palju tööriistu on see ehitatud in vaikimisi. Oma Pset7 ja Pset8,
Usun Bootstrap on automaatselt.
Ja CodePen jaoks Näiteks, see on juba
hulka, sest ma lisada veel, et seade.
Nii et kui sa kunagi tahad mängida sellega saab lihtsalt minna CodePen,
või minna oma ID, või mis iganes.
Ja sa võiksid juurdepääsu Bootstrap seal,
Aga see ei ole alati ehitatud in vaikimisi veebis.
On loogiline?
>> Jah.
niisama recap-- meil nagu viis minutit aega.
Aga kui sulgege, uues veebilehti, saate lisada Bootstrap niimoodi.
Ja kui sul on see sisaldub, saate teha kõik lõbus kraami.
Võite minna, ja te saate lihtsalt tutvuma CSS, võite lisada mõned lahedad stiilid
sul võib olla komponendid nagu nupud,
ja tabelid, ja nimekiri objekte, mis me rääkisime.
Seal on mõned lahedad JavaScript pluginad, mis sa võiksid uurida.
*** lisavad mõned lahedad interaktiivsust veebilehel.
Nagu see üks teeb transpordiliikide dialoogi.
>> Nii et mõned lõbus kraami saate teha Bootstrap.
Nii et minu nõuanne teile on edasi minna ja kasutada seda oma projekte,
järgige me just tegin selle kohta, kuidas saada seda,
ja just lugesin Bootstrap sest saate rohkem teada, mida teha.
Ja nii me oleme läinud üle, täna, kuidas kasutada
dokumendid, mida hoone plokid on ja kuidas see on kontseptuaalselt.
Nüüd minu väljakutse teile on teha veebilehel kasutades Bootstrap.
Minge docs.
Ja kasutada tööriistu, et me oleme õppinud nii kaugele, et proovida ja sõeluda need
ja neid mõista.
Ja kasutada neid stiile ja tööriistad näed seal oma kodulehel.
Ja see on lihtsalt suur, eksperimendi raames.
>> Proovige teatud stiili.
Kas see töötab?
Kas pole?
Proovige panna asju koos.
Vaata, mis juhtub.
See on väga palju ise giidiga, avastamise protsess.
Aga täna, oleme õppinud väga põhitõdesid, mida on Bootstrap?
Miks see toimib?
Kuidas see töötab?
Kuidas me kasutama hakata see, et esimene koht?
Ja nii nüüd, et sa oled üle, et küür, siis
peaks olema võimalik seda teha päris sujuvalt ise.
>> Nii et taas, kõik kood tegime siin.
Nii et kui sa tahad kunagi saada värskendada,
nagu, mida on kiire petma fail kõik stiilid?
Võite minna seda proovi siin.
Meil on mõned näiteks stiile siin.
Kui soovite proovida väljakutseid jälle ise,
võid proovida neid siin ja vaadake lahendusi.
Nii et see link on lisada slaide, mis
saadetakse teile välja muidugi.
Aga see on ka siin üleval.
Saate peatada video, kui soovite.
Kõik andmed, mida vajate on saab olema siin, selles kohas.
Nii et kui kellelgi on küsimusi, saame võtta neid järgmise paari minuti jooksul.
Muidu tänan teid kõiki väga palju vaadates.