Tip:
Highlight text to annotate it
X
>> Neel MEHTA: Tātad sveiki Ikvienam, kurš ir skatoties šeit,
vai skatītos tiešsaistē, vai attālināti.
Mans vārds ir Neel, tas ir CS50.
Un šodienas seminārs ir Atsaucīgs Web Design ar sāknēšanas.
Tā ir tēma, kas ir ļoti tuvs manai sirdij.
Cerams, tas būs tuvu sirdij
kā arī līdz gada beigām šodienas seminārā.
Tātad Bootstrap.
Cik daudzi no jums ir darījuši kādu veida web izstrāde pirms?
Labs summa?
Mazliet.
>> Tātad Bootstrap ir pasaulē visvairāk populārs, front-end sistēma.
To lieto pēc-- Es esmu izvēlējies Pāris izlases websites--
LYFT, Newsweek, un Vogue.
To izmanto vairāku vietnēs.
Tas ir web dizains sistēma, kas ļaus jums padarīt jūsu mājas lapas
gan skaisti un atsaucīgi.
Un es iešu pa šiem divi jēdzieni šeit.
Skaisti.
Tātad jums ir normāla mājas lapā kreisi, kas veic tikai HTML.
Jūs esat iemācījušies HTML klasē un sadaļā pie garumā.
Bootstrap ir veids, kā padarīt jūsu mājas lapas skaists.
Jūs varat ņemt to, kas ir par kreisajā pusē jūsu ekrāna
un pārvērst to, kas ir uz labajā pusē jūsu ekrāna ar ļoti,
ļoti, ļoti maz kodu.
>> Jūs saņemsiet jauku zilo pogu, jūs saņemsiet iedomātā, noapaļotām malām uz ekrāna,
jums saraksta skatu, jūs saņemsiet kartes, un tā tālāk ar ļoti maz kodu.
Tur tiešām nav CSS ka jums ir rakstīt pats.
Tātad Bootstrap ļauj ir šīs pre-built CSS
sastāvdaļas var likt iekšpusē jūsu mājas lapā
lai tā izskatās skaisti, bez ļoti daudz darba, par savu.
Tas ir tiešām Bootstrap, sākumpunktu,
Jūsu web izstrādes piedzīvojumiem.
Un tad, kad jūs esat tikko dzeltenais up mājas lapā,
tā ir ļoti laba vieta, lai sāktu.
Jūs varat iegūt labu meklējat mājas lapā ar ļoti, ļoti maz darbu.
Un tiešām, mēs ejam to darīt sevi
gaitā, piemēram, pieciem minutes-- 10 minūšu laikā.
Tātad, tas ir diezgan viegli veikt dažas lielas mājas lapas.
Tā ka ir pirmā daļa.
>> Otrais part-- atsaucīgi.
Cilvēki mūsdienās, ne tikai piekļūt internetā par saviem klēpjdatoriem.
Patiesībā, kā no 2014. gada, vairāk cilvēku piekļūt internetā, izmantojot mobilās ierīces,
piemēram, telefonu, vai tabletes, vai pakalpojumiem, vai tā tālāk, nekā vietnēs.
Un mājas lapas tradicionāli ir paredzēts ar klēpjdatoriem vai galddatoriem
prātā.
Un tā mājas lapas bieži vien nav ļoti labi piemērots, lai jūsu tālruni.
Ja jūs kādreiz apmeklējis harvard.edu tālrunī,
tas ir sava veida kaitinošas pieredze, vai ne?
Tas ir tāpēc, ka tas nav atsaucīgi.
Mēs cenšamies, lai padarītu tīmekļa vietnes, kas ir atsaucīgi,
kas reaģē uz cilvēku ekrāna izmēru.
>> Tātad, ja tas ir telefons, tas ir gatavojas doties uz tālruni.
Ja tas ir tabletes, tas ir gatavojas doties uz tableti.
Tas pielāgojas, lai atbilstu ekrāns, kas tiek izmantots.
Un tā Bootstrap arī sniedz dažus Ļoti, ļoti noderīgas komunālie ka.
Un mēs ejam, lai apspriestu, kā labi.
Tātad atkal ir divas daļas Bootstrap-- skaisti un atbildīgi.
Mēs runāsim par tiem.
Pirmkārt, skaisti.
Un tad atsaucīgi.
>> Tātad viss kods, kas mēs esam gatavojas runāt par today--
mēs esam nāksies daudz piemēru, daudz izaicinājumu, un tāpēc tā on--
visi dzīvo šajā mājas lapā šeit.
Šī slide ir tas, ko mēs izsūtīti.
Tātad, ja jūs esat šeit, jūs varat justies brīvi nav rakstīt, ka uz leju.
Un, ja jūs skatītos attālināti, sajust brīvi pull šo up datorā
arī.
Jūs, iespējams, to vajag laikā kurss šajā seminārā.
>> Tāpēc mēs esam gatavojas izmantot mājas lapā sauc CodePen,
kas ir sadarbības kodēšanas vide, šī semināra laikā.
Un CodePen-- un es ņemšu parādīs, šeit nekustamā fast--
tas ļauj jums rakstīt HTML sadarbojoties.
Es varu rakstīt to, es varu nosūtīt to jūs guys, jūs guys var rediģēt.
Pat ja jūs esat tālu, jūs joprojām var piekļūt to, ka veidā.
Jūs varat ierakstīt HTML kods pie top un tas būs automātiski
konvertē web lapas apakšā.
Tātad, tas ir veids, lai jūs ātri izmēģināt kodu
bez darīt jebkura veida sīkumi Jūsu IDE, vai jūsu pašu mājas lapā,
vai neatkarīgi.
>> Tik iet uz priekšu un uzvilkt šis mājas lapā, ja jūs esat tālu
vai, ja jūs esat šeit, it īpaši, ja jūs esat tālu.
is.gd/cs50boostrap.
Nav cepures, ne pasvītras, nav nekas.
Tātad tiem no jums, kas ir šeit, tikai dod man thumbs
uz augšu, ja jums ir velk up šo mājas lapu.
Labs?
>> Mērķauditorija: Jā.
>> Neel MEHTA: Tātad mēs nokļūt to, ka tikai sekundi.
Tātad, pirmkārt, mēs ejam, lai nokļūtu, kā jūs darīt jūsu mājas lapas skaists?
Mēs ejam, lai uzzinātu, kā lietot garlaicīgi, vecs HTML, piemēram, es parādīja jums pirms,
un pagrieziet kas stājas tiešām jauki sastāvdaļas,
tāpat jauku logrīki, jauka, krāsaina pogas, un etiķetes, un tabulas,
un visi, izmantojot Bootstrap.
Tātad, ja mēs visi varētu iet vairāk nekā uz CodePen ka jūs vienkārši velk uz augšu.
Tas izskatās mazliet kā šis.
Vai tas izskatās šādi ikvienam?
>> Mērķauditorija: Jā.
>> Neel MEHTA: Ja tu esi tālu, to izskatās šādi, kā arī.
Ja nē, es jums parādīs, cik drīz jūs varat saņemt to izskatās šādi
nākamajā daļā video.
Tāpēc šeit mēs esam uzrakstījuši ļoti vienkāršas HTML,
tāpat veida jūs esat lietoju klasē.
Tas ir diezgan pamata.
Nav frills.
Un mums ir daži sīkumi.
Mēs esam izstrādājuši ļoti, ļoti pamata uzsākt
zvaniet Yalp! ar kuru jūs varat atrast restorāni šajā jomā,
un atrast viedokļus, un norādes par visiem tiem.
Tas ir ļoti labs jēdziens.
Tas nekad iepriekš nav darīts.
Tas ir ļoti unikāls nosaukums, too.
>> Tātad, ko mēs ejam, lai mēģinātu to darīt, ir palīdzēt īpašnieku
no Yalp! padarīt savu mājas lapu izskatās tiešām, tiešām forši.
Tātad, lai sāktu ar, īpašnieks Yalp! ir veikusi nedaudz meklēšanu
kaste, un nedaudz poga, un tad varbūt nedaudz
iezīmēto apgabalā iezīmēto restorānu, un pēc tam
sarakstu citiem restorāniem kas ir šajā jomā.
Tātad, mēs varam vienkārši iet cauri HTML kods reālā ātri.
Cik ērti ir jums puiši ar HTML?
Mēs esam darījuši mazliet sekcija un arī klasē.
Decent?
>> Tik vienkārši kā Atgādinājums, HTML ir visu par ņemot
tags vai elementi, kas pateiks dators, kā nolikt mājas lapu.
Tātad šis H1 here-- sākt H1, Welcome lai Yalp !, beigas h1-- stāsta dators,
izdarīt lielu header tas saka, Laipni lūdzam Yalp!
iekšā tur.
Mums ir arī formas.
Mēs varam izejvielas, piemēram, tas, teksta ievadi, kas padara par teksta kastes
jūs rakstīt.
Jums ir arī pogas.
Jūs saņemsiet jauku, klikšķināmos pogas.
Tas nedara neko tiesības tagad, bet jūs saņemsiet pogu.
Jums var būt divs vai dalītāji, lai plīsumi savu lapu dažādās grupās.
>> Jums var būt punktu, Jums ir pogas.
Ja jums ir punktu, tad Jums ir Nekārtots sarakstus, UL,
un saraksti iekšpusē šī, Li.
Tātad šie ir ļoti vienkāršas celtniecības bloki mājas lapā.
Un tiešām, diezgan daudz katru mājas lapā jūs redzēt
tiks būvēts izmantojot šos pašus instrumentus.
Protams, tie nav visi izskatās tas ir slikti, jo mēs esam
gatavojas spice it up mazliet.
Tātad pieņemsim šo boring veco HTML un sākt pārvēršot to skaistā vietā
ka mēs tikko redzējām pāris minūtes atpakaļ.
>> Tāpēc sāksim off ļoti vienkārši.
Tāpēc mums ir šo pogu šeit.
In sāknēšanas, kā mēs redzējām, mēs varam ir jauka, skaista, zilo pogu.
Un tas ir darīts ne darot pasūtījuma CSS.
Nav custom CSS šeit.
Tas ir darīts, pievienojot nodarbības Jūsu HTML elementiem.
Ja esat mēģinājis klasēs vai hrefs, vai enkuri, vai veids = "teksts" par inputs--
HTML elementi var būt šīs īpašības.
Tie var būt papildus informāciju ka jūs varētu dot viņiem.
>> Un tā, šajā gadījumā, klasēm ir atribūts.
Tātad jūs vēlaties rakstīt, poga class = kaut kas iekšā stīgas.
Un tas atribūts pateiks dators, tas nav tāds vecs poga.
Tas ir poga, kas ir Šī klase pogām.
Un tā Bootstrap, ja jūs arī tā kāds stils savā elementā,
tas būs izdarīt to noteiktā veidā.
Tāpēc es rakstīt "btn btn-primārais.
BTN būdams saīsinājums pogu.
Jūs pamanīsiet, ka šobrīd mans neglīts poga ieslēgts
par jauku, skaistu, zilo pogu.
Tas izskatās ļoti jauki, ja mēs noklikšķiniet uz tā.
>> Un tā, kas notiek, ir mums ir BTN klasi un btn sākumskolas klases
mūsu elementa.
Un Bootstrap dosies un teikt, OK, es zinu, ka ir šīs divas klases.
Jebkura elements, kas ir šīs divas klases jāizstrādā kā šis.
Tātad tas ir kodols, kā jūs pievienot stilus elementiem sāknēšanas.
Jūs vienkārši pievienot nodarbības viņiem un tas svars to, kā tas uzskata par piemērotu.
Tātad, šeit ir vēl viens piemērs.
Ievades, mēs varam pievienot klase = "forma-control".
Un es jums parādīs drīz, kur jūs var uzzināt kādi nodarbības
Ir pieejami no katra veida elementa.
Bet klase, ka mēs tikko Pievienots ir jauka, noapaļotiem stūriem,
tā ir jauka polsterējums, tas ir jauka, zils spīd uz to.
>> Mēs varam arī iedziļināties šajā formā.
Un class = "forma-inline", kas padarīs Mūsu formā, kā jūs varētu iedomāties, inline.
Tātad tas meklē mazliet vairāk patīk tas, ko mums bija pirms jau.
Tātad, pirms mēs ejam tālāk, lai stils pārējo lapa, kādi jautājumi par to, ko mēs
darīja?
Mēs vienkārši pievienoti nodarbības mūsu dažādiem elementiem.
Un es jums parādīs vēlāk, kā jūs varat skaitlis, ko nodarbības ir pieejami.
Mēs pievienots nodarbības, ka ir noteiktas stili.
Un, kas stāsta pārlūku Kā izkārtojums lapu, izmantojot
Bootstrap s sniegtie stili.
Jebkuri jautājumi no auditorijas?
>> Labi līdz šim?
Cool.
Vairākas problēmas partija ar Bootstrap ir tikai
zinot, kādi komponenti ir pieejami un kā jūs tos izmantot.
Un tas ir viss iemācījušies ar pieredzi un arī
lasot dokumentus, kuru mēs runājam par drīz.
Tāpēc mums ir šī div.
Tas ir tikai garlaicīgi, vecā lieta.
Mēs vēlamies uzsvērt to kaut kā.
Tātad sāknēšanas, ir Detaļu pieejamo daudz.
Un tas ir getbootstrap.com.
Tas ir ļoti noderīgs atsauces.
Tā satur lietas like-- Lūk, kā jūs darīt pogu.
Un jūs varat darīt NAV bāri, jūs varat uzlīmes, jūs varat progresa joslu,
jūs varat darīt saraksts grupas.
Būtībā, tas ir visu veidu no jūs varētu redzēt mājas lapā.
>> Lūk, viens, ka mēs cenšamies tagad.
To sauc panelis.
Ja jūs kādreiz izmantot Google Tagad viņi ir kārtis.
Vai jebkuru Android ierīce ir kārtis.
Viņiem ir maz balto kastes ka ir sīkumi iekšpusē no tā.
Un tāpēc mēs esam gatavojas izmēģināt un darīt ka paši šeit, izmantojot lieta
sauc panelis.
Tātad, ja mēs piešķiram class = "panelis panelis-default ", lai mūsu ārējā DIV,
tad mēs pievienojiet div class = - pieņemsim tikai pārbaudīt šo dokumentāciju.
div class = "panelis-virsrakstu" un tad div class = "paneļi ķermeņa".
Atkal, nav jāuztraucas par iegaumēšanas šo kodu.
Tas būs pieejams tiešsaistē.
>> Tātad mēs to darījām, un tagad mūsu garlaicīgi, vecs div pārvērtusies šajā nice, maz karti.
Tā ir jauka polsterējums, to ir robežas, tas izceļas
no pārējās lapas, kas ir diezgan foršs.
Tātad pieņemsim iet un mainīt Get virzieni pogu, lai izskatās jauki.
Kas auditoriju grib pateikt man, ko es varu darīt, lai pogas
lai tā izskatās jauki, izmantojot Bootstrap?
Jā?
>> Mērķauditorija: Mēs varētu pievienot klasi.
Un mēs varētu darīt class = "btn btn sākumskolas".
Neel MEHTA: Jā.
Tur ir ķekars citu krāsas pieejamas par buttons--
vai par kaut ko, par šo jautājumu.
Mēs varam darīt btn-briesmas, un padarīt to sarkanā krāsā.
Tur mēs ejam.
Mēs varam darīt btn-veiksmi, lai padarītu to zaļš.
Mēs varam darīt btn-info-- tur ķekars par lietām, kas ir pieejamas uz Jums.
Tāpēc man ir mazliet izaicinājums jums tagad.
Tātad tur ir vēl viena lieta ka man ir pa kreisi un stila.
Tas top restorāniem.
>> Un mēs vēlamies izmantot lieta sauc saraksta grupu, lai stils.
Tāpēc mans uzdevums jums ir iet uz getbootstrap.com--
Es pull to šeit.
getboostrap.com.
Iet uz getbootstrap.com, atrast sadaļa, kur viņi iet pa sarakstu grupām.
Un jūs redzēsiet šeit piemērs un pareizie nodarbības
ka jūs varat izmantot, lai jūsu saraksti uz šiem jaukajiem saraksta grupām.
Tie ir izstrādāti piemēri koda piemērus, ko
kods jūs izmantojat, kādi HTML kods jūs izmantojat, un ko tas izvada.
>> Tāpēc mans izaicinājums you-- iet uz getbootstrap.com,
vai jūs esat šeit, vai mājās, un izmēģināt un pievienot stilu uz šo ul
lai tā izskatās jauki.
Un izmantot saraksts grupas stilu.
Jūs vēlaties veikt pāris minūtes, un meklēt dokumentus,
izmēģināt šo sevi?
Jo, kā jūs darāt web izstrāde, jūs apzināties daudz savu darbu
tiks lasījums šī dokumentācija.
Tāpēc es domāju, ka tas ir labi, lai iepazītos ar to, kā lasīt dokumentāciju,
Kā saprast, kas ir, ja, ko kodu piemēri, jūs varat izmantot,
ko jūs varat sviras.
>> Tātad vēlreiz, getbootstrap.com, dodieties uz cilni sastāvdaļas,
un pēc tam ritiniet uz leju līdz Sarakstā grupu.
Un jūs redzēsiet piemērus kodu, kas Jūs varat izmantot, lai jūsu HTML fit to.
Tātad veikt pāris minūšu laikā un izmēģināt un izpētīt to pats,
vai jūs esat šeit, vai mājās.
Ja jūs esat mājās, apturētu video, varbūt, un izmēģināt pats.
Ja esat šeit, ja jums iet uz mūsu website-- ja jūs atsvaidzināt lapu,
jūs redzēsiet šo par tur.
Šis ļoti pats kods ir tikai pievienojot jaunus stilus turpat.
Tātad ilgt dažas minūtes.
Ļaujiet man zināt, kad jūtaties labi par to, vai tad, kad jūs esat pilnīgi zaudējis.
Skaņa laba?
Cool.
Quick malā uz tiem no jums, mājās, kamēr mēs gaidām,
ja jūs doties uz GitHub vietni ka es safasēti pāris slaidi atpakaļ,
uz sākuma video, Man ir GitHub repo, krātuve,
par šo runāt.
Visi šie koda piemērus, ka mēs būsim runājam par glabājas tieši šeit.
Tātad, ja jūs iet, lai apstrīdētu-1.html, šis ir viss kods, kas mums ir tagad
mūsu CodePen.
Tātad jūs varat iet uz priekšu, un kopēt Tas, un ielīmējiet to savā CodePen.
Un tādā veidā, jūs varat sekot līdzi ar to, ko mēs darām šeit.
Tātad ir šī lapa atvērta, kā arī mēs iet cauri pārējo seminārā.
Atkal, jūs vēlaties, lai izskatās, ko jūs skatīt lejā apakšā ekrāna
tur.
Justies labi?
Solid.
Pieņemsim gaidīt ikvienam citam, lai pabeigt līdz ar to, ko viņi dara.
>> Jā?
>> Mērķauditorija: Pieņemsim, ka es gribēju izmantot Bootstrap pie home--
Neel MEHTA: Jā.
Mērķauditorija: Es redzu, mājas lapā, Darba sākšana lapu.
Viņi man iespējas Bootstrap, Source Code, vai Sass.
Kurš no šiem es gribu?
>> Neel MEHTA: Jā.
Tātad jautājums ir, kā jūs saņemsiet sāka izmantot Bootstrap ar sevi?
Tā vienkārši notiek, maģiski strādā tepat.
Tātad, ja mums ir laiks beigas seminārā,
Es jums parādīs, kā jūs varat saņemt to savā mājas lapā.
Tāpat kā šeit, es esmu patiešām nodot dažus iestatījumus, kas
būs automātiski piekrauts, bet es ņemšu
parādīs to darīt no scratch uz savu tīmekļa lapās.
>> Mērķauditorija: Paldies.
>> Neel MEHTA: Jā.
Labs jautājums.
Justies labi?
Justies labi?
Cool.
Tātad, kas vēlas, lai man, kā tie izgatavoti pateikt šī lieta izskatās jauki un Boostrappy?
Kas ir pirmās klases mēs pievienot ul?
Mērķauditorija: class = "list-group".
Neel MEHTA: Jā. saraksts grupu.
Un tad ko mēs piešķiram uz lis?
Kāds cits?
Mērķauditorija: Un tad, kad ka, class = "list-grupa-punkts".
>> Neel MEHTA: Jā.
>> Mērķauditorija: Un tas ir Tas pats par nākamo.
>> Neel MEHTA: li class = "list-grupa-punkts".
Lūdzu.
Mums ir mūsu jauka sarakstu grupu, tāpat kā bijām gaidījuši.
Tātad jums iet.
10 minūšu laikā, mēs esam panākuši tas garlaicīgi, vecais Yalp! lappuse
izskatās jauki un profesionāli.
Un tas ir tikai sā***.
Tāpēc tagad, ka jūs jūtaties labi par to, pieņemsim
vienkārši iet uz priekšu un runāt par Pāris vairākiem komponentiem, kas
varētu noderēs kā jūs iet visu savu piedzīvojumu.
>> Protams, tur ir daudz ones šeit.
Un tagad, ka jūs esat iemācījušies kā to izdarīt saraksts grupas,
jūs varat diezgan daudz iemācīt sevi, kā to izdarīt kādu no šiem.
Bet, protams, pieņemsim tikai mēģināt un darīt pāris vairāk sevi,
tikai, lai jūs iegūtu justies par kā jūs varētu tos izmantot.
Es esmu tikai gatavojas iet uz šo piemēru šeit.
Atkal, kods, kas es tikko ielīmēts jo šeit ir pieejama šeit.
Lai justies brīvi, lai vilktu to uz augšu.
>> Tāpēc mēs esam jau izgājuši cauri pāris no šiem piemēriem.
Tāpēc mums ir pogas, kas mums jau redzējuši, kā to izdarīt.
Mēs varam padarīt pogas lielāks.
Ar pogu class-- tā iet, btn btn-lg un btn-default padara to baltu.
Tātad tas padara mūsu poga lielāks nekā tas varētu būt citādi.
Tas varētu noderēt, ja Jums ir big iesniegt pogu vai kaut ko.
Mēs redzējām saraksts grupas piemēru, mēs redzējām forma piemēru.
>> Viens ļoti svarīgs ir ikonas.
Un ikonas ir veids, lai jūs varētu pievienot interesantas lietas, piemēram, čeku pārbaude
zīmes vai plusi, vai draugs ikonas, vai restartēt ikonas,
vai kāds jūsu mājas app.
Tātad vēlreiz, ja mēs uz vietas komponentus, glyphicons,
ir ikonas pieejami sāknēšanas.
Tur ir izsmeļošs sarakstu ar visiem tiem šeit.
Tik vienkārši kā, piemēram, pamēģināsim un pievienot vienu.
>> Tātad, piemēram, Facebook, mēs esam mēģina lai būtu pogu Add Draugs.
Pieņemsim vispirms pievienot dažas stilu.
poga class = "btn btn-panākumus".
Un tur mēs ejam.
Pieņemsim pievienot ikonu šeit.
Kas ikona, jūs domājat, varētu jēgas likt šeit?
Jūs, iespējams, esat redzējis Daži tīmekļa lapas vai kāds,
bet to, kas ir piemērs ikona, kas varētu iet labi iekšā šīs pogas?
Jūtieties brīvi, lai pārlūkotu šo viedokli, ja jums nepieciešama iedvesma.
Tur ir daudz noderīgu ones pieejams šeit.
Jā?
>> Mērķauditorija: Varbūt glyphicon lietotājs vienu?
Neel MEHTA: OK.
Šo te.
Tas ir diezgan labs.
Jā.
Facebook, es domāju, ka tas varētu izskatīties mazliet, piemēram, ka.
Tātad, lūk, kā mēs iet par pievienojot ikonas mūsu lapas.
Mums vienkārši ir span-- viens sprīdis ir neitrāls konteiners kaut ko.
Div ir konteiners kaut ko, viens sprīdis ir vēl viens konteiners.
divs ir rindiņu pārtraukumi ap tiem, laidumi nav.
Tātad tur ir dažādi veidi ņemot generic konteinerus.
Tāpat tā nav jēgas likt to iekšpusē punktu vai neko.
Mēs esam ieguvuši, lai to iekšā kaut gan,
tāpēc mēs vienkārši ielieciet iekšpusē posmu.
Tātad span class = glyphicon glyphicon-lietotājs "tuvu span.
Un tagad mums ir ikonu iekšpusē pogas.
>> Tātad tas nav izskatās pilnīgi pretēji Ko jūs varētu redzēt uz facebook.com.
Un tā tas ir jauki, ka tie var faktiski novietot jebkur vēlaties.
Jūsu header bāros, jūsu sarakstā grupās.
Neatkarīgi.
Tai nav jābūt iekšpusē pogas.
Tā kā, piemēram, es varu ielieciet to pašu klasi šeit.
"glyphicon glyphicon-lietotājs".
Un izrādās, tikai pats.
Tātad šie icons-- jūs varat izmantot span class = "glyphicon glyphicon-neatkarīgi".
Un, kas ļaus jums pievienot ikonas kur vien vēlaties.
Un ikonas ir ļoti svarīgs daļa padarīt lapu Apskatīt
profesionāls un labi darīts.
Līdz ar to nav pārspīlēt to, bet tas ir bieži vien ir laba lieta, zināt.
>> Paneļi, atkal.
Es ņemšu tikai darīt atkal kā Atgādinājums jo viņi veida iesaistīti.
Jūs pamanīsiet, ka pagrieziena jūsu parasto HTML
vietni par Bootstrap-afied vietā, jums ir
pievienot papildus struktūru, lai mājas lapā.
Piemēram, mums ir papildu divs šeit tikai tāpēc, ka tie
ir nepieciešams, lai izveidotu paneli.
Tik vienkārši saglabātu, ka prātā, ka jums ir jābūt papildu struktūru.
Tātad "panelis panelis-default".
Varbūt tas ir paneļa galvenes.
Es domāju, ka tas panelis-pozīciju.
Jā.
Tur mēs ejam.
Tātad, atkal, ir mūsu panelis.
>> Vēl viena lieta, ka mēs nesedza vēl, galdi.
Galdi, pēc noklusējuma izskatās veida neglīts.
Kā šis.
Bet tabulas, protams, ļoti svarīga daļa
par to, ko jūs darīt interneta attīstību.
In Pset7, piemēram, CS50 Finanses, kas iznāks drīz,
jūs izmantot daudz tabulas.
Un daudz web dev izmantot daudz Tabulu, lai parādītu informāciju,
piemēram, krājumu vai partitūras, vai neatkarīgi.
>> Tātad stils tabulas tiešām ir ļoti viegli.
Jūs pievienot galda klasi uz jūsu galda.
Un, es uzdrošinos teikt, tas izskatās diezgan jauki.
Jūs varat darīt papildus lietas, piemēram, "galds galda-svītrainām".
Un jūs redzēsiet rezultātus šeit.
Jūs varat darīt galda robežojas.
Tur ir daudz iespējas, jūs varat.
Bet būtībā, pievienojot galds, galds klase,
padarīs jūsu tabulās izskatās diezgan jauki.
Tātad tas ir īss nolietota daži no svarīgākajiem stiliem
un sastāvdaļas jums nepieciešams izmantot sāknēšanas.
Tāpēc es domāju, ka wraps up mūsu skaisto daļu.
Kādi jautājumi jau tagad par to, kā lai padarītu jūsu mājas lapas skaists?
Kā jūs varat izmantot šos sastāvdaļas, lai jūsu priekšrocības?
Justies labi?
Jā?
Mērķauditorija: Varbūt tas ir muļķīgs jautājums,
bet jūs varat izmantot sāknēšanas Wikipedia?
Ja jūs rediģējat Wikipedia lapu?
Neel MEHTA: Jā.
Tātad jautājums bija, es esmu rediģēšanas Wikipedia lapu,
es varu iekļaut Sāknēšanas faila stilu tur?
>> Mērķauditorija: Jā.
>> Neel MEHTA: Un tā Bootstrap ir būtībā liels CSS stila lapas.
CSS stila lapa vienkārši saka, kad Man ir šo klasi, pievienojiet šos stilus.
Tātad CSS stila lapas par sāknēšanas būs kaut kas līdzīgs .btn,
poga klase, saņems Like noapaļota stūra robežu vai neatkarīgi.
Vārdu sakot, sāknēšanas to tikai Nodarbību ķekars un ķekars stilu
noteikts tām klasēm.
Tik ilgi, kamēr jums ir, ka CSS, Šis noteikumu saraksts savā lapā,
Jūs saņemsiet Bootstrap stilu.
Tas, protams, atkarīgs ņemot bootstrap stilus savā lapā
sākt ar.
>> Un tāpēc, Wikipedia, Jūs, iespējams, nevarēja
darīt, jo Wikipedia nav Bootstrap tajā.
Bet, ja tas tomēr ir Bootstrap, jūs droši vien varētu darīt.
Un, ja jūs vēlaties, jūs varētu iekļaut to, bet tas varētu
lauzt esošo lapas izkārtojumu.
Bet ļoti labs jautājums.
Jūs varat izmantot Bootstrap kur tas ir iekļauts,
bet tas nav celta pēc noklusējuma.
>> Mērķauditorija: Paldies.
>> Neel MEHTA: Jā.
Kādi jautājumi?
Jā.
Tātad, vai jūs esat šeit, vai mājās, tikai atcerieties getboostrap.com-- atkal,
getboostrap.com-- ir jūsu draugs.
Ikreiz, kad jūs izmantojat Bootstrap, tas dos jums
norādījumi par to, kā nokļūt sākās, kā izmantot komponentus.
Tur ir dažas atdzist JavaScript plug-ins, ka mēs neko vairāk šeit,
bet viņi ir vērts pārbaudīt out, kā arī.
Tātad tas ir jūsu draugs.
Tas ir tikai svarīgi, lai iegūtu izmanto, lai, kā to izmantot.
>> Tātad pieņemsim tērzēt mazliet par padarot atsaucīgu mājas lapas.
Tā kā es teicu iepriekš, ko izmanto cilvēki viņu klēpjdatoriem, tie izmanto savus tālruņus.
Un kā jūs varētu iedomāties, tas ir ļoti atšķirīgs ekrāna izmērs nekā.
Un tā tas pats mājas lapa kas izskatās labi uz manu tālruni
nav gatavojas izskatās labi, obligāti, uz datora.
Tātad, kas jums jādara, ir padarīt jūsu mājas lapā pielāgoties.
Tas ir jāpielāgojas dažādiem ekrāna izmēri, kas tas ir par.
>> Tas ir teikt, es zinu, es esmu par dators, liels klēpjdatoru, man vajadzētu paplašināt.
Es zinu, es esmu par telefonu, man vajadzētu sarukt.
Un tā Bootstrap sniedz dažus Ļoti, ļoti noderīgi instrumenti, lai to paveiktu.
Tātad Bootstrap pieņemsim jūs pauze mājas lapa 12 slejās.
Jūs varat veikt rindas un ir 12 kolonnas.
Un jūs varat sadalīt tiem, tomēr vēlaties.
Jums var būt viena, lielā lieta, kas ir 12 kolonnas plata.
Jūs varat būt divas lietas ka ir seši katrs.
Jūs varat darīt vienu lietu, kas ir četri, viens, kas ir divi, vai viens, kas ir seši.
Jūs varat darīt trīs, trīs, trīs, trīs.
Jūs varat darīt, ko vien sadalījums, ka jūs vēlaties.
>> Tātad, varbūt jūsu mājas lapā vajadzībām ir kreisā sleja tas ir vienu trešdaļu platuma.
Tā, ka būtu četras kolonnas plats un pārējā lapas
Būtu astoņi kolonnas plata.
Tātad šis ir piemērs.
Pieņemsim uzvilkt vēl vienu piemēru.
>> Mērķauditorija: Vai tas vienmēr jābūt vēl sadalīt?
Vai tā varētu būt septiņi, pieci sadalīt?
>> Neel MEHTA: Jā.
Tas varētu būt septiņi, pieci.
Jā.
Kamēr tas piebilst līdz 12, tas ir jauki.
So iesim atpakaļ šeit.
Atkal kodu, kas ir Šeit ir pieejams arī šeit,
ar atsaucīgu piemērs.
Tāpēc es vienkārši velk dažas piemērs atsaucīgi kods šeit.
Tātad jūs to izdarītu, izmantojot lieta, ko sauc rinda.
Rinda ir tikai vēl viens klase.
Tas ir vēl viens stilu jūs pievienot uz jūsu divs, lai padarītu tos savus komponentus.
>> Tātad jūs sakāt, div class = "rindā", lai rindu,
sev 12 kolonnas telpu.
Un tad jūs likts kolonnas iekšpusē, kas.
Tātad, šeit mēs Col-XS-6.
Neuztraucieties par XS.
Mēs runājam par kādā sek.
Bet būtībā, mums ir viens lieta, kas ir seši plašs.
Mēs to saucam kreisi.
Un tā tas ir kreisais kaste šeit.
Mums ir viena lieta, kas ir seši no 12 slejas pasaulē.
Un tas ir viens pa labi.
>> labi tikai dod markas Jūsu div piepilda to pelēks.
Tātad tas ir tikai, lai mēs varam redzēt, ka viņi ir atšķirīgi.
Un tā tas pirmais piemērs.
Tas ir ļoti vienkāršs piemērs, kā jūs varētu izmantot savas rindas un kolonnas šeit.
Jūs definēt rindu, izmantojot class = "rindā".
Un tad jūs class = "Col-XS-6" do puse, "Col-XS-6" darīt otru pusi.
Lūk sarežģītāks piemērs.
Apskatīsim Tiny, Milzīgs, Pārējais viens.
>> Mēs varam padarīt Tiny divas slejas plaša, mēs varam veikt milzīgas sešas kolonnas plata,
Un pārējie četri kolonnas plata.
Kas papildina līdz 12.
Un tā tie galu galā aizņem platums lapā.
Atkal, mums ir rinda ārā.
Tad mums ir div class = "Pulkvedis-XS-2" un pēc tam līdz 6, un pēc tam 4.
Un tas sniegs struktūra mums.
Un tā mēs varam likt visu, heck mēs gribam iekšā šeit.
Tā vietā, Tiny, mēs varam likt pogu.
poga class = "btn btn sākumskolas".
Un tā ievērosiet, ka mūsu poga neaizņem visu platumu,
bet vismaz tas ir ierobežots šai daudz vietas.
>> Tā ka viss ir labi un labs.
Tātad, mēs tagad var izjaukt mūsu mājas lapa gabalos, platums gudrs.
Mēs varam teikt, ka mēs vēlamies, lai būtu pa kreisi kolonna, un tiesības kolonna, un tā tālāk.
Bet mēs neesam aizgājuši vairāk kā jūs darīt to reaģēt.
Un tā Bootstrap pieņemsim darīt, kā labi.
Tā ir šīs lietas sauc kontrolpunkti.
Tātad tas ir veids, kā noskaidrot, vai jūs esat par portatīvo datoru, jūs par tableti,
Jūs esat uz tālruni horizontāli, vai jūs esat par tālruni vertikāli.
Tā zina ekrāna izmēru.
Un pārtraukumiem šī četrās categories-- liels vai LG, kas ir klēpjdatoriem, parasti.
md vai vide, kas ir tabletes.
sm, maza.
Vai XS, papildus maza.
Un tad, kad jūs norādāt kolonnas, jūs sakāt,
tas būtu sešas kolonnas plata par papildu mazo ierīci.
Tieši tāpēc mēs veicām col-XS-6.
Mēs esam sakot, ka tas būtu būt seši no 12 slejas platām
par papildu mazo ierīci.
Un, ja tas ir kaut kas lielāks, mēs vienkārši noklusējuma, izmantojot papildu mazo izmēru.
Ja tas ir kaut kas lielāks nekā extra mazs, tas būs seši plata.
Un tā mēs varam sviras šie padarīt mūsu kolonnu
aizņem atšķirīgu daudzumu kolonnas balstīti uz ekrāna izmēru.
Ejam uz šo atsaucīgu izmēru maiņa.
Tāpēc mums ir mūsu kolonnas.
Un tā saka, "col-LG-6 col-XS-12".
Tātad, ņemot vērā to, ko jūs zināt Līdz šim, ko jūs
domāju, ka gatavojas notikt uz lielā ekrāna?
Nu, tas ir sava veida dots ceļš, bet ko darīt
Jūs domājat, ka tas izskatīsies patīk uz lielā ekrāna?
Un kāpēc ir tā, ka?
>> Mērķauditorija: Vai tas, ka uz lielā ekrāna, tas ir
gatavojas veikt tikai daļa no pilnā telpā?
Tāpat kā pusi no tā, es domāju?
>> Neel MEHTA: Jā.
>> Mērķauditorija: Un mazāka ekrāns, tas notiek
uzņemties visu ekrānu, tad 12.
Neel MEHTA: Jā.
Tiesības.
Tā kā, piemēram, pieņemsim paskatieties uz leju šeit.
Jā.
Tā par kaut ko, kas ir LG vai bigger-- lai mans dators notiek
kas lg, jo tas ir diezgan wide-- tas dos
tas blakus, jo tas ir col-LG-6.
Tāpēc, ka tas ir par lielu, tas padara to sešas kolonnas plata un sešas kolonnas plata.
Let 's redzēt, kas notiek, ja es padarīt šo uz mazāku vienu.
Es esmu tikai gatavojas ANO pilnekrāna šo.
Un es esmu gatavojas sarukt ekrānu.
Es esmu gatavojas sarukt ekrānu, lai tā Izskatās, ka es esmu par mazāku ierīci.
Tāpēc es esmu gatavojas sarukt to, kā šis.
>> Un voila.
Tagad ir sakrauti jo tagad mēs esam aizgājuši
no liela kuri paredzēti, tas ir iespējams, papildu maza ekrāna izmēru.
Un tāpēc tagad tā saka, OK, mēs neesam liela, mēs esam papildus mazā zemē.
Tātad mēs ejam, lai izmantotu papildu mazo izmēru.
Un mēs ejam uz XS-12, XS-12.
Tātad tas būs kaudzē.
Un tikai ievērosiet, ka tur ir lieta, ko sauc pārtraukumpunkts.
Pārtraukumpunkts ir vieta, kur veicāt pāreju
no papildu mazs maziem, maziem uz lieliem, un tā tālāk.
>> Tik vienkārši pamanīt, ka, kā es slide šis ārā, galu galā, jūs saņemsiet uz vietas
ja tie būs lēkt būt blakus.
Lūdzu.
Tātad tur ir robežvērtība turpat.
Tātad, mēs varam padarīt to vēl sarežģītāku.
Tagad mēs varam teikt, tie viss būtu četri plata.
Tas ir, tie būtu aizņem apmēram trešdaļa
Runas par ļoti lielām ierīcēm.
Uz vidējas ierīcē, tas būtu jāņem up pusi ekrāna, jo tas ir MD-6.
Uz ļoti neliela ierīce, tas būtu aizņem 12.
Un tā tas izskatās diezgan dabiski.
Pieņemsim tikai izmēģināt šo out sev.
>> Tātad uz lielā ekrāna, viņi četri plata.
Shrink Tas mazliet.
Un viņi tagad ir seši plata.
Tātad šis ir seši, seši, seši.
Sarukt vēl vairāk, un pēc tam tie tiks pilnībā kaudzē.
Tātad tas, piemēram, ir jēga, ja jums ir kartes, piemēram, ziņu kartes,
Piemēram, ja ja tas ir uz ļoti lielā ekrāna,
tas ir OK, ja jums ir vairāki sānu pie sāna jo viņi visi saņem pietiekami daudz vietas.
Bet viņiem ir nepieciešams, lai būtu pietiekami daudz vietas.
Tātad par mazāku ekrāna, jūs vēlaties, lai dotu viņiem
vairāk vietas, proporcionāli, no lapas.
>> Tā kā reālās pasaules, piemēram, teiksim mums Twitter.
Un mums ir teksta lodziņu, lai Jūs varat čivināt uz pusi.
Un mums ir saraksts ar trending temati labajā pusē.
Tātad uz lielā ekrāna, mums vajadzētu ir viņiem būt blakus,
lai jūs varētu redzēt tos glāzē.
Bet par mazāku ekrāna, mums vajadzētu darīt 12 un 12,
tā, ka pašlaik vispopulārākie temati ir zemāka par čivināt jomā.
Jo čivināt platība ir Galvenais un uz maza ekrāna,
tad pašlaik vispopulārākie tēmas nav jautājums tik daudz.
Un tāpēc mēs viņus labi zem, tāpēc ka viņi var gan iegūt pietiekami daudz vietas.
Jēga tik tālu?
>> Mērķauditorija: Jā.
>> Neel MEHTA: Solid.
Tātad tas ir visi piemēri man ir šeit.
Pamēģināsim un darīt izaicinājums.
Tātad vēlreiz, tas ir izaicinājums, 2.html par Tiem no jums, pēc kopā mājās.
Tātad mans draugs, Mark Zuckerberg, atnāca pie manis otro dienu.
Un Viņš, piemēram, Neel, man ir gotten diezgan labi web dizains.
Es varu darīt HTML.
Esmu šo mazo, Jaunais rediģēt Facebook.
Man ir jauna ideja par to, kā mums vajadzētu stils Facebook.
Un šeit tas ir.
Tieši te.
Lūk, daži piemērs kods.
Tātad tā sauc Fancybook.
>> Mums ir dažas statusa atjauninājumus.
Mums ir Nemo, Mike Kosowski, ***-- trīs statusa atjauninājumus.
Un tad mums ir saraksts tiešsaistes draugi tieši zem tās.
Tātad viņš ir darījis savu mājasdarbu.
Viņš zina mazliet par Bootstrap, viņš sniedza saraksta skatu,
viņš ir paveicis mazliet HTML.
Tāpēc viņš ir mājas lapā.
Bet viņš ir tāpat, Neel, man nav izprast atsaucīgs dizainu vispār.
Vai jums ir kādi eksperti, kuri varētu man palīdzēt ar šo?
Un par laimi, jūs tagad eksperti atsaucīgi dizains.
>> Tātad, ko viņš teica, man bija, ka viņš grib Fancybook izskatās šis.
Uz ļoti neliela ierīce, piemēram, tālruņa, viss
Būtu kaudzē, piemēram, šeit.
Tātad jums ir grafiks sā***ā, uz augšu augšu, un pēc tam
jums ir jābūt tērzēšana josla apakšā.
Bet uz tabletes vai nesējā ierīce, tai jābūt uz pusi un pusi,
kā laika skalas vajadzētu būt pusi un sarakstu tērzēšanas draugiem
jābūt uz otru pusi.
>> Tad uz klēpjdators, tad grafiks būtu aizņem trīs ceturtdaļas
un tad tērzēšanas dzīvžogs būtu veikt vēl vienu ceturtdaļu.
Un tā viņš ir, piemēram, Neel, man ir šis kods šeit, bet tas nav atsaucīgi.
Tas nepieciešams, lai uzvesties kā šis.
Tāpēc mans izaicinājums jums ievada šo kodu here--
ja jūs atsvaidzināt savu CodePens, jūs redzēsiet šo.
Vai, ja jūs vienkārši ielīmēt kodu par izaicinājumu-2, jūs redzēsiet šo.
>> Lūk šis piemērs kods.
Jūs redzēsiet dažas xxxs.
Es gribu, lai jūs mainīt xxxs tā, ka LAIKA un saraksts draugiem
ievēro šos specs šeit.
Neuztraucieties par to, kas ir iekšā skalā tagad.
Mēs saņemsiet ka nākamajā solī.
Bet tagad, pieņemsim redzēt, ja mēs šīs lietas sadalīt to uz augšu, kā šis.
Tātad tas, ka jēga?
Tātad, ja jūs esat mājās, apturētu video un mēģināt
padarīt savu mājas lapu izskatīties atsaucīgi kā šis.
Ja jūs esat šeit, ņem piemēram, divi, trīs minūtes.
Jūtieties brīvi, lai parunātos ar kaimiņu, un mēģināt, un noteikt Mr. Zuckerberg s
atsaucīgi dizains problēma.
Ja jums ir kādi jautājumi, justies brīvi let me know.
Justies labi?
Gatavs?
Nice.
>> Mērķauditorija: [nedzirdama].
Neel MEHTA: Kas?
>> Mērķauditorija: es esmu labs.
>> Neel MEHTA: Ak, labi.
Nice.
Mērķauditorija: Lieta par 12, ir tas, ka Bootstrap
izturas doto ekrāna telpu kā 12 vienības pāri un tad sadala, ka līdz?
Kā tieši tas dozēšanu darbu šo?
>> Neel MEHTA: Jā.
Tātad jautājums ir, kā tas proporcijas
strādāt sāknēšanas, vai ne?
>> Mērķauditorija: Jā.
Neel MEHTA: Tātad, ja Jums ir div class = "rindā",
neatkarīgi no tā, cik liels ekrāns ir, Bootstrap dos jums 12 vienības
no tāda paša izmēra uz aizņem ka daudz izmēru.
Tātad col 1, tas vienmēr ir 8,33% no lieluma ekrāna,
vai tas ir tas plašs vai tas ir tas plašs.
Un tā, protams, par mazāku ekrāns, katra kolonna ir mazāks.
Jums vēl ir 12 kolonnas plats, tas ir mazāks.
Tāpēc tas ir atkarīgs no jums, lai pārliecinātos, ka ka lietas aizņem vairāk kolonnu,
proporcionāli, lai kompensētu par šo telpu trū***.
Vai tas ir jēga?
>> Mērķauditorija: Jā.
Paldies.
Neel MEHTA: Labs jautājums.
Mērķauditorija: par lielu ekrāns, jūs varat būt
LAIKA aizņem trīs ceturtdaļas?
>> Neel MEHTA: Jā.
Neel MEHTA: Kā puiši sajūta?
Labs?
Cool.
Tātad pieņemsim atgriezties.
Un pieņemsim mēģinātu noteikt šo daļu Mr Zuckerberg tīmekļa vietnē.
Tātad termiņi ir šeit, pie top, un sarakstu ar draugiem
ir apakšā.
Un tāpēc mums ir nepieciešams piešķirt kolonnas, ar izmēru proporcionāla,
katrā no tiem.
Tātad šis pirmais *** ir par laika.
Ko darīt klasēs mēs ieliekam šeit?
Ko jūs guys ievietot šeit?
Līdz ar to atcerēties, uz lielā ekrāna, tas ir nepieciešams uzsākt trīs ceturtdaļas platumā.
Un tā kāda stila dotu jums, ka?
Uz lielā ekrāna, trīs ceturtdaļas platumu.
Ko klase mēs izmantojam tur?
Mērķauditorija: Tātad mēs esam tikai būs rediģēšanu, ka pirmajā instancē klasē.
Neel MEHTA: tagad.
Jā.
>> Mērķauditorija: Mēs esam ne rediģēšanu katrs, indivīds no laika skalas iezīme?
Neel MEHTA: Ne tagad, vismaz.
Tātad visa šī lieta ir bloks.
Mēs esam tikai mainot projektēšana bloku.
Tātad, šeit mēs Col-lg-9, jo tas ir deviņi no 12 vārtiem uz lielā ekrāna.
Un tad uz vidēja ekrāna, cik kolonnas man vajadzētu saņemt?
Mērķauditorija: Tas ir paredzēts, būt pusi un pusi.
Neel MEHTA: Right.
Tātad, cik daudz tas ir?
>> Mērķauditorija: Tātad seši.
Neel MEHTA: Six.
Un tad papildus maza būtu be-- ja tas aizņem visā platumā rindas,
cik tas būtu?
Mērķauditorija: 12.
Neel MEHTA: 12.
Jā.
Un tagad mēs esam ieguvuši, lai mainīt citiem uzņēmumiem,
tāpēc tas aizņem pārējo telpu.
Tātad col-lg--
Mērķauditorija: Tas būs aizņem visu ekrānu?
Neel MEHTA: Tas aizņem vienu ceturtdaļu no ekrāna uz lielu ierīci,
kā mēs parādījām šeit.
>> Mērķauditorija: Three.
>> Neel MEHTA: Three.
Un tad col-MD-6, lai ņemtu līdz ar pārējo telpu.
col-XS-12.
Tāpēc tagad mums ir grafiks sākšanu trīs ceturtdaļas
no lapas uz lielā ekrāna un pēc tam viena ceturtdaļa uz sāniem.
Un tad, ja izmērs ekrāns uz leju, tam vajadzētu mainīt izmērus atbilstoši.
Tātad, tas ir sakrautas tagad, uz ļoti mazu ekrānu.
Un, ja mēs izmēru to uz augšu mazliet, tiem jābūt tieši puse un pusi.
Tātad mēs esam darījuši līdz šim.
Ļoti foršs.
Un tā mēs nevarēsim darīt otra daļa no problēmas.
Jūs varat darīt pats.
Bet būtībā, jums ir mēģināt un darīt šos atsaucīgs
kā well-- padarīt grafiks priekšmeti, paši, atsaucīgi.
Tāpēc tagad mēs esam izgājuši cauri viss, kas jums ir jāzina
par atsaucīgo pusi sāknēšanas.
Kādi jautājumi par atsaucīgs dizains ar sāknēšanas
un kā jūs varētu iet par darot to?
Jā?
>> Mērķauditorija: Vai tas ir līdzīgi, ja mums bija iegulto video
un mēs vēlējāmies, lai kontrolētu skala, kurā video was--
lielums video iet no klēpjdatora uz tālruni.
Neel MEHTA: Jā.
Vairāk vai mazāk.
Jūs ir pateikt video aizņem tik daudz telpu, kā tas ir dots,
kas ir mazliet kaitinošas reizēm.
Bet galvenā iecere ir tāda pati.
Video, tāpat kā jebkuru citu objektu lapa, piemēram, pogas vai kāds,
kamēr jūs izmantojat kolonnas un rindas,
Jūs varat arī tā zināmu vietu.
Un tā kļūst tas, lai godinātu, ka ir cits jautājums, jo, piemēram, YouTube
ieguļ ir noteikta, ieteicams lielumu.
Bet teorētiski at Vismaz, tas strādā.
Cool?
>> Mērķauditorija: Es domāju, ka tad, uz attēla, jūs patiesībā
ir nepieciešams, lai ir dažādas versijas viens attēls dažādos izmēros
klēpjdators pret iPhone?
Yeah Jautājums ir, vai mums ir nepieciešams, lai ir attēli, kas ir atsaucīgi, kā arī.
Un tiešām, jūs varat darīt.
Es domāju, ka tas ir CSS.
Bet Bootstrap ļauj jūs to darīt, kā arī.
Jūs varat būt atsaucīgu attēlus.
Jums var būt jūsu attēliem mainīt saskaņā ar izmēru no lapas.
Un tur ir ļoti jauna lieta HTML5, jaunākā versija HTML,
un CSS3, jaunākā versija CSS, kas
ļaus jums pieprasīt dažādus attēlus balstoties uz ekrāna izmēru jūs esat.
Parasti, tas ir pietiekami labs, lai tikai ir jūsu attēlu vienkārši sarukt vai augt
tomēr liela tā ir jābūt.
Bet jūs varat, ja vēlaties to, ir viens 32 līdz 32
ļoti maziem ekrāniem, un 64 līdz 64 lielā ekrāna,
un tad kalpot tiem selektīvi.
Tu to vari izdarīt.
Tas ir darīts ar dažiem cilvēkiem.
Tas joprojām ir diezgan līderi.
Bet Īsā atbilde, atsaucīgs images-- Bootstrap var saglabāt dienā tur.
Cool?
>> Mērķauditorija: Paldies.
>> Neel MEHTA: Tātad pieņemsim runāt reālā ātri par to, kā
lai iegūtu šo savā mājas lapā.
Pieņemsim, ka jūs vēlaties padarīt jūsu pašu mājas lapā, izmantojot Bootstrap.
Un tāpēc pieņemsim tikai tikko staigāt pa to kopā.
Pieņemsim, ka jūs veicat vienkārši normāla HTML lapas.
Jūtieties brīvi sekot gar neatkarīgi no jūsu mīļākie redaktors ir.
Tātad mums vienkārši ir dažas HTML lapu.
Mēs varam darīt! Doctype html.
Tas ir arī html, mūsu lapu.
Nekas jauns.
Mēs esam darījuši pirms tam.
Tātad šeit mums ir HTML un mēs varam nodot lietas iekšā šeit.
Mēs varam būt mūsu pogu.
Un, kā jau teicu iepriekš, šis ne vienmēr dodas uz darbu.
Kāpēc varētu tas nedarbojas?
Kāpēc ne mēs saņemt mūsu jauks, krāsains poga?
>> Mērķauditorija: Tāpēc, ka mēs neesam saistīt to uz Bootstrap projektu vai failu?
Neel MEHTA: Jā.
Pareizs.
Jo Bootstrap-- tas ir tikai iedomātā CSS fails.
Tas ir virkne stilu, kas ir pievienoti jūsu elementiem.
Šeit mēs esam teicis to, ka mēs vēlas izmantot šos stilus.
Es ņemšu lielums, kas veido mazliet.
Mēs esam teicis to mēs vēlamies izmantot Šie stili, bet mēs nekad
stāstīja to, kādi stili ir.
Un tas, ko jūsu Jautājums no agrāk bija.
Tas ir atbilde uz šo.
Mums ir jāatrod veids, kā iegūt stilus un iekļaut tos savā lapā kaut kā.
Un tā Bootstrap griba parādīt mums, kā to izdarīt.
>> Tātad, ja jums iet uz augšu šeit, Darba sākšana.
Ir dažādi veidi, kā lejupielādēt to.
Tas, iespējams, nav jēgas vienmēr.
Bootstrap-- tas ļaus jūs greifers CSS failu pati.
Un jūs iekļāva to savā lapā.
Source Code ir, ja jūs vēlaties kapāt par to, ko pats.
Jums nav nepieciešams šis tiešām.
Sass ir valoda kas apkopo par CSS.
Domājiet par to kā apstrādātāju.
Daudz, piemēram, PHP ir apstrādātāju no HTML, Sass ir apstrādātāju par CSS.
Tātad, ja jūs vēlaties to darīt Tādā veidā, jūs varat darīt.
>> Vieglākais veids ir, izmantojot CDN, vai satura piegādes tīkls.
Tā ir mājas lapa, kas tikko kalpo up kopiju sāknēšanas
ļoti ātri, lai jūs varētu iekļaut savā lapā.
Tātad, šeit ir piemērs.
Tas tev iedos šo saiti elementu.
Saite elements stāsta pārlūkprogrammu, veic visus faili tiek saglabāti šeit
un iekļaut to mūsu mājas lapā.
Un šajā gadījumā, tas ir sāknēšanas CSS fails.
Tātad mēs vienkārši nokopēt šo URL, vai šis teksts, un mēs mest to iekšpusē
mūsu galvas.
>> Un es nesāks lapu par to, bet jūs varat uzticēties, ka tas darbojas.
Saite kļūs jums CSS.
Iekļaut to savā lapa un tad jūs būsiet
spēj izmantot visas sāknēšanas klasēm, ka jūs zināt un mīlestību.
Ja jūs vēlaties, lai saglabātu to uz vietas un to uz savu failu sistēmu
tā vietā, lai dotos uz internets sagrābt to,
piemēram, ja jūs vēlaties, lai izmantot vietni bezsaistē,
Jūs varat izmantot Download iespēju.
Bet lielākā daļa, izmantojot CDN ir diezgan ātri, jo šādā veidā,
tas atjaunina, lai jūs kā labi.
Jums ir manuāli atjaunināt vai nu.
Jēga?
>> Tik daudz instrumentu būs tas būvēts pēc noklusējuma. Savā Pset7 un Pset8,
Es uzskatu, ka ir Bootstrap automātiski iekļauti.
Un CodePen, lai Piemēram, tas jau
iekļautas, jo I Pievienots Pievienot šo iestatījumu.
Tātad, ja jūs kādreiz vēlaties spēlēt aptuveni ar to, jūs varat vienkārši doties uz CodePen,
vai doties uz savu ID, vai neatkarīgi.
Un jūs varētu Pieeja Bootstrap tur,
bet tas ne vienmēr ir būvēts in, pēc noklusējuma, lai internetā.
Jēga?
>> Jā.
tāpat kā recap-- mums tāpat atlikušas piecas minūtes.
Bet kā Atgādinājums, jaunās interneta lapas, Jūs varat iekļaut sāknēšanas kā šis.
Un, kad jums ir tā iekļauta, Jūs varat darīt visu fun stuff šeit.
Jūs varat iet, un jūs varat iepazīties CSS, jūs varat pievienot dažas atdzist stilu,
Jums var būt sastāvdaļas piemēram, pogas,
un tabulas, un saraksts preces, mēs minēts.
Tur ir dažas atdzist JavaScript plugins, kas jūs varētu vēlēties, lai izpētītu.
Viņi piebilst dažas atdzist interaktivitāti, lai mājas lapā.
Tāpat kā šo vienu padara modālo dialogu.
>> Tātad tur ir dažas fun stuff jūs varat darīt ar sāknēšanas.
Tāpēc mans padoms jums ir iet uz priekšu un izmantot to savu projektu,
sekojiet mums vienkārši darīja to, kā to iegūt,
un tikai lasīt Bootstrap jo jūs uzzināsiet vairāk par to, ko darīt.
Un tāpēc mēs esam aizgājuši vairāk, šodien, kā izmantot
dokumentācija, ko ēka bloki ir, un cik tas ir konceptuāli.
Tāpēc tagad mans uzdevums jums ir veikt mājas lapā, izmantojot Bootstrap.
Iedziļināties dokumentos.
Un izmantot instrumentus, kas mēs esam uzzināju tik tālu, lai mēģinātu un izanalizēt tos
un izprast tos.
Un izmantot šos stilus un instrumenti Jūs redzat, ka jūsu mājas lapā.
Un tas ir tikai liels, eksperimentāls process.
>> Izmēģināt noteiktu stilu.
Vai tas darbojas?
Vai nav?
Mēģiniet liekot lietas kopā.
Redzēt, kas notiek.
Tas ir ļoti daudz self vadīties, atklājums process.
Bet šodien, mēs esam iemācījušies ļoti pamati, kas ir Bootstrap?
Kāpēc tas darbojas?
Kā tas darbojas?
Kā mēs sākt lietot tā, pirmajā vietā?
Un tāpēc tagad, ka jūs esat pār šo kupris, jūs
vajadzētu būt iespējai to darīt diezgan raiti ar sevi.
>> Tātad vēlreiz, visi kods mēs darījām ir šeit.
Tātad, ja jūs kādreiz vēlaties iegūt suka līdzi,
piemēram, to, kas ir ātrs apkrāptu lapa visiem stiliem?
Jūs varat iet uz šo paraugu šeit.
Mums ir daži piemērs stili šeit.
Ja vēlaties izmēģināt problēmas atkal ar sevi,
jūs varat mēģināt tos šeit un izbraukšana risinājumus.
Tātad šī saite būs uz slaidiem, kas iekļauti
tiks izsūtītas uz jums, protams.
Bet tas ir arī šeit.
Jūs varat izslēgt video, ja vēlaties.
Visu informāciju, kas jums nepieciešams, ir būs tepat, šajā vietnē.
Tātad, ja kāds ir kādi jautājumi, mēs varam ņemt tos uz nākamajiem pāris minūtēm.
Pretējā gadījumā, paldies jums visiem ļoti daudz, lai skatītos.