Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Deci salut la oricine se uită aici,
sau vizionarea on-line, sau de la distanță.
Numele meu este Neel, aceasta este CS50.
Și seminarul de astăzi este receptiv Web design cu Bootstrap.
Este un subiect care este foarte aproape de inima mea.
Să sperăm că, acesta va fi aproape de inima ta
precum și de la sfârșitul seminarului de astăzi.
Deci Bootstrap.
Câți dintre voi ați făcut orice tip de dezvoltare web înainte?
O suma buna?
Putin.
>> Deci Bootstrap este din lume cele mai populare, cadru front-end.
Este folosit by-- am ales o cuplu de websites-- aleatoare
Lyft, Newsweek, si Vogue.
Este folosit de un număr de site-uri web.
Este un cadru de web design care vă va permite să face site-uri web
atât de frumoasă și receptiv.
Și voi trece peste aceste două concepte aici.
Frumoasa.
Deci, va avea site-ul normale pe stânga, care se face doar prin HTML.
Ati invatat HTML in clasa și în secțiunea de la lungime.
Bootstrap este o modalitate de a face site-uri web frumos.
Puteți să luați ceea ce este pe partea stângă a ecranului
și-l transforme în ceea ce este pe partea dreaptă a ecranului, cu foarte,
foarte cod, foarte puțin.
>> Ai butonul frumos albastru, veți obține fantezie, margini rotunjite pe ecran,
veți obține vizualizarea listă, veți obține cărți, și așa mai departe, cu foarte puțin cod.
Nu e de fapt nici CSS care va trebui să scrie de unul singur.
Deci Bootstrap vă permite să au aceste CSS pre-construit
Componentele puteți pune în interiorul paginii web
a face să arate frumos, fără foarte mult de lucru pe cont propriu.
Este într-adevăr un bootstrap, un punct de plecare,
pentru aventurile tale de dezvoltare web.
Și așa că atunci când ești doar batjocoritor un site web,
este un loc foarte bun pentru a începe.
Puteți obține un bun site-ul căutați cu locul de muncă foarte, foarte puțin.
Și într-adevăr, vom pentru a face acest lucru ne
în cursul ca cinci minutes-- decurs de 10 minute.
Deci, este destul de ușor să face unele site-uri mari.
Deci asta e prima parte.
>> Cea de a doua part-- receptiv.
Oamenii, în zilele noastre, nu doar acces la internet pe laptop-uri lor.
De fapt, din 2014, mai multe persoane acces la internet prin intermediul dispozitivelor mobile,
*** ar fi telefoane, tablete sau, sau servicii sau așa mai departe decât site-uri web.
Și site-uri web au fost în mod tradițional proiectat cu laptop-uri sau desktop-uri
in minte.
Și astfel site-urile nu sunt de multe ori foarte bine adaptate la telefon.
Dacă ați vizitat vreodată harvard.edu pe telefon,
e un fel de enervant experienta, nu?
Asta pentru că nu e receptiv.
Suntem încercarea de a face site-uri care sunt receptive,
care răspunde la dimensiuni oamenilor de ecran.
>> Deci, dacă e un telefon, e de gând să meargă pe telefon.
Dacă este o tabletă, e de gând să meargă pe tabletă.
Se reglează pentru a se potrivi ecran care este folosit.
Și așa Bootstrap prevede, de asemenea, unele utilități foarte, foarte utile pentru că.
Și vom discuta la fel de bine.
Deci, din nou, există două părți Bootstrap-- frumos și responsabil.
Vom vorbi despre acestea.
În primul rând, frumos.
Și apoi receptiv.
>> Deci, tot codul pe care suntem vorbi despre today--
vom avea o mulțime de exemple, o mulțime de provocări, și așa on-- l
toate viețile pe acest site aici.
Acest diapozitiv este ceea ce ne-am trimis.
Deci, dacă sunteți aici, vă puteți simți libertatea de a nu trebui să scrie că în jos.
Și dacă te uiți de la distanță, se simt liber pentru a trage asta pe computer
deasemenea.
Probabil veți avea nevoie de ea în timpul cursul acestui seminar.
>> Deci vom folosi un site-ul numit CodePen,
care este o codificare de colaborare mediu, în timpul acestui seminar.
Și CodePen-- Și voi vă arăt aici reală fast--
vă permite să scrie HTML colaborare.
Pot să-l scrie, pot să-l trimit la voi, voi puteți edita.
Chiar daca esti la distanță, poate accesa în continuare în acest fel.
Aveți posibilitatea să tastați codul HTML la top si va automat
fie convertite în pagină web în partea de jos.
Deci, este o modalitate de pentru a încerca rapid cod
fără a fi nevoie de a face orice fel de chestii pe IDE, sau site-ul tau,
sau orice altceva.
>> Deci, mergeți mai departe și trage acest site-ul, daca esti de la distanță
sau dacă sunteți aici, mai ales daca esti la distanță.
is.gd/cs50boostrap.
Nu există capace, nici de subliniere, nu nimic.
Astfel încât cei dintre voi care sunt aici, dă-mi o degetele
când ați tras up care pagină web.
Bine?
>> Audiența: Da.
>> NEEL MEHTA: Deci, vom obține la faptul că, în doar o secundă.
Deci în primul rând, vom ajunge la, *** faci site-uri web frumos?
Vom învăța *** să ia plictisitor, vechi HTML, *** ți-am arătat mai înainte,
și să se întoarcă în care componente foarte frumos,
ca widget-uri frumoase, frumos, colorat butoane, etichete și, și tabele,
și toate, cu ajutorul Bootstrap.
Deci, dacă am putea merge peste tot la CodePen pe care tocmai ați tras în sus.
Ar trebui să arate un pic ca aceasta.
Se pare că acest lucru pentru toată lumea?
>> Audiența: Da.
>> NEEL MEHTA: Daca esti la distanță, aceasta ar trebui să arate acest lucru, de asemenea.
Dacă nu, eu vă va arăta în curând cât de puteți să-l arata ca aceasta
într-un viitor parte a videoclipului.
Deci, aici am scris un HTML foarte de bază,
ca un fel le-ați Folosesc în clasa.
E destul de bază.
Nu bibelouri.
Și avem niște chestii.
Am proiectat un foarte, foarte de bază de pornire
apel Yalp! cu care puteți găsi restaurante în zonă,
și pentru a găsi recenzii, și instrucțiunile de pe toate cele.
Este un concept foarte bun.
Nu a fost niciodată făcut înainte.
E un nume foarte unic, de asemenea.
>> Deci, ce vom încerca să faceți este să ajute proprietarul
de Yalp! face site-ul său arata foarte, foarte misto.
Deci, pentru a începe cu, proprietarul Yalp! a făcut un pic de căutare
cutie, și un buton mic, și apoi poate un pic
Zona evidențiată de un restaurant evidențiat, și apoi
o listă de alte restaurante că sunt în zonă.
Astfel încât să putem merge doar prin codul HTML foarte repede.
Cat de confortabil sunteti voi cu HTML?
Am făcut un pic secțiune și, de asemenea, în clasă.
Decent?
>> Deci, la fel ca o recapitulare, HTML este totul despre a avea
tag-uri sau elemente care spun calculator *** să se stabilească în pagina web.
Deci, acest h1 here-- începe h1, Bine ati venit la Yalp !, scop h1-- spune computerul,
trage o lovitură de cap de mare spune, Bine ati venit la Yalp!
interior acolo.
Avem, de asemenea forme.
Putem introduce așa, intrări de text, care va face ca casetele de text
scrieți în.
De asemenea, aveți butoane.
Ai un buton frumos, se poate face clic.
Ea nu face nimic acum, dar te un buton.
Puteți avea divs, sau separatoare, la rupe pagina dvs. în diferite grupuri.
>> Puteți avea punctele, aveți butoane.
Dacă aveți punctele, apoi aveți liste neordonate, ul,
și liste în interiorul acestui, Li.
Deci acestea sunt foarte de bază blocuri de o pagină web.
Și într-adevăr, destul de mult fiecare site-ul veți vedea
va fi construit folosind aceleași instrumente.
Desigur, nu toți uite acest rău pentru că suntem
gând să-l condimenteze un pic.
Așa că haideți să acest HTML vechi plictisitor și start transformând-o în site-ul frumos
pe care tocmai am văzut în urmă cu câteva minute.
>> Așa că haideți să începem foarte simplu.
Deci avem acest buton aici.
În Bootstrap, așa *** am văzut, putem au un buton de frumos, frumos, albastru.
Și asta nu se face prin a face CSS personalizat.
Nu e nici CSS personalizat aici.
Asta face prin adăugarea de clase la elemente HTML.
Dacă ați încercat clase, sau hrefs, sau ancore, sau de tip = "text" pentru inputs--
Elemente HTML pot avea aceste atribute.
Ele pot avea informații suplimentare care v-ar să le dea.
>> Și astfel, în acest caz, clase sunt atributul.
Deci ai scrie, clasa butonul = ceva în interiorul de siruri de caractere.
Și că atribut va spune calculator, acest lucru nu este nici un buton, vechi.
Este un buton, care este în această clasă de butoane.
Și astfel Bootstrap, dacă da un anumit stil pe elementul tau,
îl va atrage un anumit fel.
Așa că am scrie "BTN BTN-primar.
BTN fiind un abreviere pentru buton.
Veți observa acum că Butonul meu urât transformat
într-un buton frumos, frumos, albastru.
Se pare foarte frumos atunci când ne-am faceți clic pe el.
>> Și așa mai departe ceea ce se întâmplă e că avea clasa BTN și clasa-BTN primar
pe elementul nostru.
Și Bootstrap va merge în și spune, OK, am știu că există aceste două clase.
Orice element care are aceste două clase ar trebui să fie elaborate ca aceasta.
Deci, asta e nucleul de modul în care atașați stiluri de elemente în bootstrap.
Trebuie doar să atașați clase pentru a le și îl va greutate pe *** consideră de cuviință.
Deci, aici este un alt exemplu.
În intrare, putem adăuga o clasa = "formă de control".
Și voi arăta în curând în cazul în care pot afla ce clase
sunt disponibile de fiecare tip de element de.
Dar clasa pe care tocmai am Adaugat are frumoase colturi, rotunjite,
are padding frumos, are o strălucire frumos, albastru la ea.
>> Putem merge, de asemenea, în această formă.
Și class = "formă-inline", care va face Formularul nostru, așa *** s-ar putea imagina, în linie.
Deci, este în căutarea un pic mai mult ca ceea ce am avut înainte deja.
Deci, înainte de a merge la stilul de restul pagina, întrebări cu privire la ceea ce am
a facut?
Noi clase doar atașate la diferite elemente noastre.
Și vă voi arăta mai târziu *** puteți dau seama ce sunt disponibile clase.
Am atașat clase care au anumite stiluri.
Și care spune browser-ului *** să aspect pagina folosind
Stiluri prevăzute Bootstrap lui.
Orice întrebări din partea publicului?
>> Bine până acum?
Misto.
O mulțime de provocări cu Bootstrap este doar
știind ce componentele sunt disponibil și modul în care le utilizați.
Și asta este tot învățat cu experiență și, de asemenea
prin citirea documentației, care vom vorbi despre cât de curând.
Deci, avem acest div.
E doar un lucru plictisitor, vechi.
Vrem să-l subliniez cumva.
Deci, în Bootstrap, există o mulțime de componente disponibile.
Și acest lucru este getbootstrap.com.
Este o referință foarte util.
Acesta conține lucruri like-- iată *** faci un buton.
Și tu poți face baruri NAV, puteți etichete, vă poate progresa baruri,
poți să faci grupuri lista.
Practic, e tot felul de s-ar putea vedea o pagină web.
>> Uite una care vom încerca acum.
Se numește panou.
Dacă utilizați vreodată Google Acum, ei au carduri.
Sau orice dispozitiv Android are cărți.
Ei au cutii Little White care au chestii în interiorul acestuia.
Și așa vom încerca și de a face care ne aici, folosind un lucru
numit un panou.
Deci, dacă vom atașa class = "panel panel-default "pentru div nostru de afară,
apoi ne-am atașa o clasă div = - hai trebuie doar să verificați această documentație.
class = div "panel-rubrica" și apoi div class = "panouri-corp".
Din nou, nu vă faceți griji cu privire la memorarea acest cod.
Acesta va fi disponibil online.
>> Așa că am făcut asta și acum plictisitor nostru, vechi div transformat în acest mic card de frumos,.
Ea are padding frumos, aceasta are frontiere, aceasta iese în evidență
de restul paginii, care este destul de rece.
Așa că hai să mergem și schimba acest Get Butonul de ghidare să arăți bine.
Care în public vrea să spună mi ce pot face pentru a butonul
pentru a face să arate frumos, folosind Bootstrap?
Da?
>> Audiența: Am putea adăuga o clasă.
Și am putea face class = "BTN BTN-primar".
NEEL MEHTA: Da.
Există o grămadă de alte culori disponibile pentru buttons--
sau pentru orice, pentru care contează.
Putem face BTN-un pericol și să-l roșu.
Nu mergem.
Putem face BTN-succes pentru a face verde.
Putem face BTN-info-- există o grămadă de lucruri care sunt disponibile pentru tine.
Așa că au prea puțin provocare pentru tine acum.
Deci nu e un lucru care mi-a rămas ne-stil.
Acest restaurantele de top.
>> Si vrem sa folosim un lucru numit un grup listă pentru ao stil.
Deci, provocarea mea pentru tine este du-te pe la getbootstrap.com--
Voi trage în sus aici.
getboostrap.com.
Du-te la getbootstrap.com, găsiți secțiune unde se duc peste grupuri lista.
Și veți vedea aici un exemplu și clasele dreapta
pe care le puteți folosi pentru a face dvs. Listele în aceste frumoase grupuri lista.
Acestea sunt elaborate exemple de exemple de cod, ceea ce
cod utilizați, ce Codul HTML utilizați și ce ieșiri asta.
>> Deci, provocarea mea de a Tu-- du-te pe getbootstrap.com,
Fie că ești aici sau la domiciliu, și pentru a încerca și a adăuga stiluri la această ul
pentru a face să arate frumos.
Și de a folosi un stil de grup listă.
Vrei să ia câteva minute, și de căutare a documentației,
încercați această voi?
Pentru că așa *** faci de dezvoltare web, vei realiza o mulțime de muncă dvs.
va fi citit această documentație.
Deci, eu cred că e bine să se familiarizeze cu modul de a citi documentația,
*** să dau seama ce e în cazul în care, Ce cod exemple care le puteți utiliza,
ce puteți utiliza.
>> Deci, din nou, getbootstrap.com, du-te la tab-ul Components,
și apoi defilați în jos pentru a lista de grupuri.
Și veți vedea exemple de cod care puteți folosi pentru a face HTML potrivesc asta.
Deci, să ia o câteva minute și încercați și de a explora-l singur,
Fie că ești aici sau la domiciliu.
Daca esti acasa, întrerupe clipul video, probabil, și-l încercați singur.
Daca esti aici, dacă te duci la nostru website-- dacă încărcarea paginii,
veți vedea acest lucru pe acolo.
Acest aceeași cod este doar adăugând noi stiluri acolo.
Deci, să ia câteva minute.
Anunță-mă când vă simțiți bine cu privire la aceasta sau când sunteți total pierdut.
Suna bine?
Misto.
Quick deoparte pentru cei dintre voi acasă, în timp ce noi așteptăm,
daca te duci pe la site-ul GitHub că am pus câteva slide-uri în urmă,
spre începutul videoclipului, Am o repo GitHub, depozit,
pentru această discuție.
Toate aceste exemple de cod pe care vom fi vorbesc despre sunt stocate aici.
Deci, dacă te duci pentru a contesta-1.html, acest este tot codul pe care avem acum
pe CodePen nostru.
Astfel încât să puteți merge doar înainte, și copiați acest lucru, și-l lipiți în propria CodePen.
Și în acest fel, puteți să vă păstrați până cu ceea ce facem noi aici.
Deci, au aceasta pagina deschisă ca și noi du-te prin restul de seminar.
Din nou, vrei sa arate ca ceea ce ai vezi jos în partea de jos a ecranului
Acolo.
Senzație de bine?
Solid.
Să așteptăm pentru oricine altcineva să termina cu ceea ce fac.
>> Da?
>> Audiența: Să presupunem că am vrut de a utiliza Bootstrap la home--
NEEL MEHTA: Da.
Audiența: Văd, pe site-ul, Getting Started paginii.
Mi dau opțiunile Bootstrap, Source Code, sau Sass.
Care dintre acestea vreau?
>> NEEL MEHTA: Da.
Deci, întrebarea este, *** a face tu a lua a început să utilizeze Bootstrap de noi înșine?
Se întâmplă să magic de lucru aici.
Deci, dacă avem timp la la sfârșitul seminarului,
Îți voi arăta *** puteți -l pe pagina web proprie.
Ca aici, am de fapt, pune în unele setări care
acesta va avea în mod automat încărcat, dar voi
arată să o faci de la zero pe propriile pagini web.
>> Audiența: Mulțumesc.
>> NEEL MEHTA: Da.
Buna intrebare.
Senzație de bine?
Senzație de bine?
Misto.
Deci, cine vrea să-mi *** au făcut spun acest lucru arata frumos și Boostrappy?
Care e prima clasa adăugăm la UL?
Audiența: class = "Lista de-grup".
NEEL MEHTA: Da. Lista-grup.
Și atunci ce ne atașa la lis?
Altcineva?
Audiența: Și apoi, după că, class = "lista-grup-element".
>> NEEL MEHTA: Da.
>> Audiența: Și e aceeași pentru cel următor.
>> NEEL MEHTA: class = li "lista-grup-element".
Nu te duci.
Avem grupul nostru listă frumos, la fel ca ne-am asteptat.
Deci nu te duci.
În 10 minute, ne-am făcut acest plictisitor, vechi Yalp! pagină
arăți bine și profesional.
Si acesta este doar inceputul.
Deci, acum că te simți bun despre asta, hai să
du-te mai departe și să vorbim despre Un cuplu mai multe componente care
s-ar putea veni la îndemână în timp ce du-te de-a lungul aventura ta.
>> Desigur, există o mulțime cele de aici.
Și acum că ați învățat *** se face grupuri lista,
puteți învăța destul de mult te *** se face oricare dintre acestea.
Dar, desigur, să încercăm și de a face un cuplu mai noi,
doar astfel încât să obțineți o simt pentru *** s-ar putea să le utilizeze.
Mă duc să la acest exemplu aici.
Din nou, codul pe care tocmai am lipit aici este disponibil aici.
Deci, nu ezitați să-l trage în sus.
>> Deci am trecut deja prin o pereche de aceste exemple.
Deci avem butoane, pe care o au văzut deja *** să facă.
Putem face butoane mari.
Prin butonul class-- merge, BTN BTN-lg și BTN-default face alb.
Deci, acest lucru face buton nostru mai mare decât ar putea fi altfel.
S-ar putea veni la îndemână, dacă aveți buton sau ceva mare prezenta.
Am văzut exemplul de grup listă, am văzut exemplul forma.
>> Unul foarte important este icoane.
Și icoane sunt o modalitate pentru a adauga lucruri interesante, *** ar fi check verificare
semne, precum și plusuri, sau un prieten icoane, icoane sau repornire,
sau orice pentru aplicația dvs. web.
Deci, din nou, în cazul în care ne-am în aici, componentelor, glyphicons,
sunt pictogramele disponibile pentru Bootstrap.
Există un exhaustivă listă cu toate cele de aici.
Așa *** un exemplu, Să încercăm să adăugați unul.
>> Deci *** ar fi Facebook, suntem a încerca de a avea un buton adauga prieten.
Să adăugăm primul unele stil.
class = Butonul "BTN BTN-succes".
Și acolo mergem.
Să adăugați o pictogramă aici.
Ce pictograma, crezi, s-ar putea face sens pentru a pune aici?
Le-ați văzut, probabil, pe unele pagini web sau orice altceva,
dar ceea ce este un exemplu de o pictogramă care s-ar putea merge bine în interiorul acestui buton?
Simțiți-vă liber pentru a parcurge acest punct de vedere, dacă aveți nevoie de inspirație.
Există o mulțime de util cele disponibile aici.
Da?
>> Audiența: Poate un utilizator glyphicon?
NEEL MEHTA: OK.
Aceasta.
Asta e destul de bun.
Da.
Pe Facebook, că l-am ar arata un pic ca asta.
Deci, iată *** vom merge despre adăugând icoane la paginile noastre.
Doar Avem o span-- un interval este o container neutru pentru ceva.
Un div este un container pentru ceva, un interval este un alt recipient.
divs au pauze de linie în jurul lor, deschideri nu.
Deci nu e diferite moduri de având containere generice.
Ca aceasta nu are sens să-l pună în interiorul unui paragraf sau nimic.
Trebuie să-l pună interior ceva, deși,
asa ca ne-am pus în interiorul unui interval.
Deci, span class = glyphicon glyphicon-utilizator "interval de aproape.
Și avem acum icon interiorul butonul.
>> Deci, nu arata cu totul spre deosebire de ceea ce ar putea vedea pe facebook.com.
Și așa e frumos că acestea pot de fapt fi plasate oriunde doriți.
În baruri tale antet, în grupurile dvs. lista.
Tot ceea ce.
Aceasta nu trebuie să fie în interiorul unui buton.
Deci, ca un exemplu, pot a pus aceeași clasă aici.
"glyphicon glyphicon-utilizator".
Și se pare la fel.
Astfel încât acestea icons-- puteți utiliza durata class = "glyphicon glyphicon-orice".
Și care vă va permite să adăugați icoane unde vrei.
Și icoane sunt un foarte important parte de a face o privire site
profesională și bine făcut.
Deci, nu exagerati, dar e de multe ori un lucru bun sa stii.
>> Panouri, din nou.
Voi face doar acest lucru din nou ca o recapitulare deoarece acestea sunt un fel de implicat.
Veți observa că în cotitură HTML normal
site-ul într-un Bootstrap-afied site-ul, veți avea
pentru a adăuga structura suplimentare pe site-ul.
De exemplu, avem în plus divs aici doar pentru că cei
sunt necesare pentru a face un panou.
Deci, doar ține cont de faptul că faptul că, în va trebui să aibă structura suplimentar.
Deci "Panou-default".
Poate e panou-afara.
Cred că e panoul-rubrica.
Da.
Nu mergem.
Deci, din nou, nu există panou nostru.
>> Un lucru mai mult ca noi nu acoperă încă, tabele.
Mese, implicit privire fel de urât.
Asa.
Dar tabele sunt, desigur, o parte foarte importantă
de ceea ce se va face în dezvoltare web.
In Pset7, de exemplu, CS50 Finanțe, care va veni în curând,
veți folosi o mulțime de tabele.
Și o mulțime de dev web folosi o mulțime de tabele pentru a afișa informații,
*** ar fi stocurile, sau scoruri, sau orice altceva.
>> Deci styling mese este de fapt foarte simplu.
Adăugați clasa masă la masa ta.
Și, îndrăznesc să spun, se pare destul de frumos.
Puteți face lucruri în plus, *** ar fi "de masa cu dungi".
Și veți vedea rezultatele aici.
Puteți face-masă marginita.
Există o mulțime de opțiuni care le poate.
Dar, în esență, adăugând o tabel, clasa de masă,
va face mesele arata destul de frumos.
Deci asta este o scurta trecere in revista a unele dintre cele mai importante stiluri
și componentele veți necesitatea de a utiliza pentru Bootstrap.
Deci, eu cred că împachetări la o parte frumosul nostru.
Orice întrebări chiar acum despre *** pentru a face site-urile dvs. frumos?
*** puteți utiliza aceste componente in avantajul tau?
Senzație de bine?
Da?
Audiența: Poate că acest lucru este o întrebare prostie,
dar puteți folosi Bootstrap pe Wikipedia?
Dacă editați o pagină Wikipedia?
NEEL MEHTA: Da.
Deci întrebarea era, eu sunt editarea unei pagini Wikipedia,
pot include stiluri Bootstrap acolo?
>> Audiența: Da.
>> NEEL MEHTA: Și așa este Bootstrap de fapt o mare foaie de stil CSS.
O foaie de stil CSS doar spune, ori de câte ori Am această clasă, atașați aceste stiluri.
Deci foaia de stil CSS pentru Bootstrap va fi ceva de genul .btn,
clasa buton, va primi ca un rotunjit frontieră colț sau orice altceva.
Deci, practic, se Procesul de Bootstrap doar o grămadă de clase și o grămadă de stiluri
specificat pentru aceste clase.
Deci, atâta timp cât aveți că CSS, această listă de reguli în pagina,
veți obține stilul Bootstrap.
Aceasta este, desigur, condiționată de având stiluri Bootstrap din pagina dvs.
pentru început.
>> Și astfel în Wikipedia, probabil nu a putut
face acest lucru pentru că Wikipedia nu are Bootstrap în ea.
Dar dacă a făcut-au Bootstrap, Probabil ai putea face asta.
Și dacă ai vrut, ai putea includ, dar care ar putea
sparge formatul actual al paginii.
Dar foarte bine întrebarea.
Puteți folosi Bootstrap ori de câte ori este inclus,
dar nu este construit în mod implicit.
>> Audiența: Mulțumesc.
>> NEEL MEHTA: Da.
Orice alte întrebări?
Da.
Deci, dacă ești aici sau la domiciliu, amintiți-vă doar getboostrap.com-- din nou,
getboostrap.com-- este prietenul tău.
Ori de câte ori utilizați Bootstrap, acest lucru vă va oferi
instrucțiuni despre *** să obțineți a început, modul de utilizare a componentelor.
Există unele misto JavaScript plug-in-uri care nu vom merge pe aici,
dar sunt în valoare de verificat, de asemenea.
Astfel încât acesta este prietenul tău.
Este doar important pentru a obține folosit pentru a modul de utilizare a acestei.
>> Deci, haideți să chat-ul un pic despre face site-uri web receptiv.
Deci, așa *** am spus mai înainte, oamenii au folosit laptop-urile lor, pe care o folosesc telefoanele lor.
Și, după *** s-ar putea imagina, acest lucru este o dimensiune foarte diferită de ecran decât atât.
Și astfel același site-ul care arata bine pe telefonul meu
nu este de gând să arate bine, în mod necesar, pe un calculator.
Deci, ceea ce trebuie să faci este face site-ul dvs. se adapteze.
Ea trebuie să se adapteze la diferitele ecran dimensiuni care este pe.
>> Trebuie să spun, eu știu că sunt pe o calculator, un laptop mare, ar trebui să se extindă.
Știu că sunt pe un telefon, că ar trebui să se micșoreze.
Și astfel Bootstrap oferă câteva , instrumente foarte utile pentru a face acest lucru foarte.
Deci, Bootstrap să vă pauză un site web în 12 coloane.
Puteți face rânduri și au 12 coloane.
Și puteți partiție Cu toate acestea cei doriți.
Puteți avea un singur, mare lucru, care este de 12 coloane larg.
Puteți avea două lucruri că sunt șase fiecare.
Puteți face un lucru care e de patru, unul care este doi, sau unul care e șase.
Puteți face trei, trei, trei, trei.
Puteți face orice defalcare pe care doriți.
>> Deci, poate că pagina de web trebuie să aibă o coloana din stânga care este o treime din lățimea.
Deci, care ar fi de patru coloane lată și restul paginii
ar fi de opt coloane larg.
Deci acesta este un exemplu.
Să trage un alt exemplu.
>> Audiența: ea face întotdeauna trebuie să fie o mai Split?
Ar putea fi un șapte, cinci Split?
>> NEEL MEHTA: Da.
Ar putea fi șapte, cinci.
Da.
Atâta timp cât se adauga la 12, e bine.
Așa că haideți să ne întoarcem aici.
Din nou, codul care este aici este de asemenea disponibil aici,
în exemplu receptiv.
Așa că am scos niște exemplu cod receptiv aici.
Deci, ce faci acest lucru prin utilizarea un lucru numit rând.
Row este doar o altă clasă.
E un alt stil adăugați pe dvs. divs pentru a le face propriile lor componente.
>> Deci spui, div class = "rândul" pentru a face un rând,
să vă faceți 12 coloane din spațiu.
Și apoi ai pus coloane în interiorul asta.
Deci, aici am col-XS-6.
Nu vă faceți griji cu privire la xs.
Vom vorbi despre într-o secundă.
Dar, practic, avem o lucru care este de șase larg.
Noi numim lăsat.
Și așa că e caseta plecat de aici.
Avem un singur lucru, care este șase din cele 12 coloane largi.
Și că unul este pe dreapta.
>> bine doar dă marcile div dumneavoastră umple gri.
Deci, asta e doar așa putem vezi că sunt distincte.
Și astfel această primul exemplu.
Este un exemplu foarte simplu de *** ar folosi rânduri și coloane tale aici.
Puteți defini un rând folosind class = "rândul".
Și apoi ce faci class = "Col-XS-6" do jumătate, "Col-XS-6" pentru a face cealaltă jumătate.
Iată un exemplu mai complicat.
Să ne uităm la mici, Imens, restul o.
>> Putem face mici două coloane largă, putem face imense sase coloane largă,
iar restul de patru coloane mari.
Care se adaugă până la 12.
Și astfel încât acestea ajung întinde lățimea paginii.
Din nou, avem un rând afară.
Apoi, avem div class = "Col-XS-2" și apoi 6, apoi 4.
Și care va oferi structura pentru noi.
Și astfel încât să putem pune orice naiba ne-o dorim în interiorul aici.
În loc de Tiny, putem pune un buton.
class = Butonul "BTN BTN-primar".
Și astfel observa că butonul nostru nu ia tot lățimea,
dar cel puțin este restricționat pentru atât de mult spațiu.
>> Deci asta e tot bine și bună.
Astfel încât să putem rupe acum cu ul nostru pagină în bucăți, latime înțelept.
Putem spune vrem să avem o stânga coloană, și o coloană dreaptă, și așa mai departe.
Dar nu am trecut peste *** face receptiv.
Și astfel Bootstrap hai să facem asta la fel de bine.
Ea are aceste lucruri numite puncte de oprire.
Deci, are un mod de a ști dacă sunteți pe un laptop, esti pe o tabletă,
sunteți pe o orizontală telefon, sau sunteți pe un telefon vertical.
El stie dimensiunea ecranului.
Și sparge acest lucru în patru categoriile-- mare sau LG, care este de laptop-uri, de obicei.
md sau mediu, care este comprimate.
sm, mic.
Sau xs, mini.
Și așa, atunci când specificați o coloană, spui,
ar trebui să fie de șase coloane larg pe un dispozitiv suplimentar de mici.
De aceea am făcut-col XS-6.
Noi spunem că ar trebui fi șase din cele 12 coloane mari
pe un dispozitiv suplimentar de mici.
Și dacă e ceva mai mare, vom doar implicit la utilizarea dimensiunea mini.
Daca este ceva mai mare decât foarte mic, acesta va fi de șase la nivel.
Și astfel încât să putem parghie acestea pentru a face de coloane noastre
ia sumă diferită de coloane bazate pe dimensiunea ecranului.
Să mergem la acest redimensionarea receptiv.
Deci avem coloane noastre.
Și se spune, "col-lg-6-col XS-12".
Deci, având în vedere ceea ce știi până în prezent, ceea ce nu-i
că se va se intampla pe un ecran mare?
Ei bine, e un fel de dat cale, dar ceea ce fac
credeti ca va arata ca pe un ecran mare?
De ce, mă rog?
>> Audiența: Este ca pe un ecran mare, e
de gând să ia doar un porțiune a spațiului complet?
Ca jumătate din ea, cred?
>> NEEL MEHTA: Da.
>> Audiența: Și mai mic ecran, se va
să aibă acces la întregul ecran, 12.
NEEL MEHTA: Da.
Dreapta.
Deci, ca un exemplu, să doar uita-te aici.
Da.
Deci, pe tot ceea ce este lg sau bigger-- astfel încât computerul meu se întâmplă
care urmează să fie lg pentru că este destul de wide-- va face
se alături de deoarece este-col LG-6.
Deci pentru că este pe mare, face sase coloane mari și șase coloane largi.
Să vedem ce se întâmplă dacă face acest lucru într-un mic.
Mă duc la ne-ecran complet aceasta.
Și am de gând pentru a micsora ecran.
Mă duc pentru a micsora ecran, așa că se pare ca eu sunt pe un dispozitiv mai mic.
Deci, am de gând să-l micsora ca aceasta.
>> Și voila.
Acesta este acum stivuite pentru că acum am trecut
din sa-- mare aceasta este, probabil o dimensiune în plus ecranului mic.
Și așa acum se spune, OK, nu suntem în mare, suntem în țara mini.
Deci vom folosi dimensiunea mini.
Și am de gând să XS-12, XS-12.
Deci o să fie stivuite.
Și observați că există un lucru numit un punct de întrerupere.
Un punct de întrerupere în cazul în care este ai făcut tranziția
de la foarte mici la mici, mic la mare, și așa mai departe.
>> Deci observați doar că așa *** am aluneca aceasta out, în cele din urmă, veți ajunge la punctul de
în cazul în care vor sări să fie unul lângă altul.
Nu te duci.
Deci nu e de breakpoint chiar acolo.
Astfel încât să putem face chiar mai complicat.
Acum putem spune, aceste lucrurile ar trebui să fie de patru largă.
Asta este, ar trebui ia aproximativ o treime
a discursului pe dispozitive foarte mari.
Pe un dispozitiv mediu, ar trebui să ia jumătate din ecran, deoarece este md-6.
Pe un dispozitiv foarte mic, aceasta ar trebui să ia 12.
Și așa mai departe acest lucru pare destul de natural.
Să încercăm asta pentru noi înșine.
>> Deci, pe un ecran mare, sunt patru la nivel.
Shrink un pic.
Și ei sunt acum șase largi.
Deci, aceasta este de șase, șase, șase.
Shrink și mai apoi acestea vor fi în totalitate suprapuse.
Deci acest lucru, de exemplu, are sens dacă că ai cărți, *** ar fi carduri de știri,
de exemplu, în cazul în care în cazul în care este pe un ecran foarte mare,
e OK dacă aveți mai multe cot la cot pentru că le-ar obține toate destul loc.
Dar ei trebuie să aibă suficient spațiu.
Deci, pe un ecran mai mic, ai vrea să le dea
mai mult spațiu, proporțional, de pe pagina.
>> Deci, ca un exemplu din lumea reală, Să spunem că avem Twitter.
Și avem caseta de text, astfel încât puteți tweet pe partea.
Și avem o listă de trend Subiecte pe partea dreaptă.
Deci, pe un ecran mare, ar trebui să ne le-au fi una lângă alta,
astfel încât să puteți să le vedem la un pahar.
Dar pe un ecran mai mic, ar trebui să facem 12 și 12,
astfel încât subiectele trend sunt sub zona tweet.
Deoarece zona tweet este lucru principal și pe un ecran mic,
subiectele trend nu Indiferent destul de la fel de mult.
Și așa le-am pus chiar sub, deci care le pot obține ambele suficient spațiu.
Sens până în prezent?
>> Audiența: Da.
>> NEEL MEHTA: Solid.
Deci, asta e toate exemplele am aici.
Să încercăm și de a face o provocare.
Deci, din nou, acest lucru este provocare-2.html pentru cei dintre voi urma de-a lungul la domiciliu.
Deci prietenul meu, Mark Zuckerberg, a venit la mine ieri.
Și el e ca, Neel, am ajuns destul de bun la web design.
Eu pot face HTML.
Am făcut această mică, noi edita pe Facebook.
Am o idee nouă pentru modul ar trebui să ne stil Facebook.
Și aici este.
Chiar aici.
Iată câteva exemple de cod.
Deci se numește Fancybook.
>> Avem câteva actualizări de stare.
Avem Nemo, Mike Kosowski, ***-- trei actualizări de stare.
Și atunci avem o listă de prieteni online chiar sub ea.
Deci a făcut temele.
El știe câte ceva despre Bootstrap, el a făcut vizualizarea listei,
el a făcut un pic de HTML.
Deci, el are pagina web.
Dar e ca și ***, Neel, eu nu înțelege de design receptiv la toate.
Ai orice experți care ar putea să mă ajute cu asta?
Și din fericire, ești acum experți în design receptiv.
>> Deci, ceea ce mi-a spus a fost că el vrea Fancybook să arate ca aceasta.
Pe un dispozitiv foarte mic, ca un telefon, totul
ar trebui să fie stivuite, *** ar fi aici.
Deci ai cronologie avans, până sus, și apoi
tu ar trebui să aibă bar de chat în partea de jos.
Dar pe o tabletă sau un mediu dispozitiv, ar trebui să fie jumătate și jumătate,
la fel ca în cronologie ar trebui să fie jumătate și lista de prieteni de chat
ar trebui să fie pe cealaltă jumătate.
>> Apoi, pe un laptop, cronologie ar trebui să ia trei sferturi
și apoi speculative de chat ar trebui să ia un alt sfert.
Și așa e ca, Neel, am această codul aici, dar nu e receptiv.
Este nevoie să se comporte așa.
Deci, provocarea mea pentru tine este dat acest cod here--
dacă refresh-ul CodePens, veți vedea asta.
Sau dacă doar lipiți în codul pe-provocare 2, veți vedea asta.
>> Iată acest cod de exemplu.
Veți vedea unele xxxs.
Vreau să modificați xxxs, astfel încât calendarul și lista de prieteni
urmează aceste specificatii aici.
Nu vă faceți griji cu privire la ceea ce este în interiorul calendarul pentru acum.
Vom lua ca în etapa următoare.
Dar pentru moment, să vedem dacă avem aceste lucruri să-l despărțim așa.
Deci, nu asta face sens?
Deci, dacă sunteți acasă, întrerupe videoclipul și să încerce
pentru a face pagina web arata receptiv ca aceasta.
Daca esti aici, ia ca două, trei minute.
Simțiți-vă liber pentru a discuta cu un vecin, și să încerce, și să stabilească domnul Zuckerberg
problemă de design receptiv.
Dacă aveți întrebări, nu ezitați să să-mi spuneți.
Senzație de bine?
Făcut?
Frumos.
>> Audiența: [neauzit].
NEEL MEHTA: Ce?
>> Audiența: Sunt bine.
>> NEEL MEHTA: Oh, bine.
Frumos.
Audiența: Lucru despre cele 12, este că Bootstrap
tratează un spațiu ecran dat ca 12 unități pe orizontală, apoi împarte asta?
*** anume face proporționarea lucru pentru asta?
>> NEEL MEHTA: Da.
Deci, întrebarea este, cât de nu dozarea
de lucru pentru Bootstrap, nu?
>> Audiența: Da.
NEEL MEHTA: Deci ori de câte ori aveți o clasă div = "rândul",
indiferent cât de mare ecran este, Bootstrap vă va oferi 12 unități
de aceeași mărime la ia această dimensiune mult.
Deci, în col 1, este întotdeauna 8,33% de dimensiunea ecranului,
fie că e asta larg sau că e asta largă.
Și astfel, desigur, pe un mic ecran, fiecare coloană este mai mic.
Încă mai ai 12 coloane larg, este un mic.
Deci, este de până la tine să vă asigurați că lucrurile ocupă mai mult coloana,
proporțional, pentru a compensa pentru că lipsa de spațiu.
Are sens?
>> Audiența: Da.
Multumesc.
NEEL MEHTA: Bună întrebare.
Audiența: Pe o mare ecran, poate aveți
cronologie ia trei sferturi?
>> NEEL MEHTA: Da.
NEEL MEHTA: *** baieti simți?
Bine?
Misto.
Așa că haideți să ne întoarcem.
Și să încercăm și să stabilească această parte de site-ul d-lui Zuckerberg.
Deci termenele este aici, la în partea de sus, și lista de prieteni
este în partea de jos.
Și așa avem nevoie doar de a atribui coloane, cu dimensionarea proporțională,
în fiecare dintre acestea.
Deci, această primă *** este pentru cronologie.
Ce clase avem pus aici?
Ce Ați pus aici?
Deci ține minte, pe un ecran mare, de care are nevoie să aibă acces la trei sferturi din lățimea.
Și așa mai departe ce stil ar da asta?
Pe un ecran mare, de trei sferturi din lățimea.
Ce clasa folosim acolo?
Audiența: Deci noi suntem doar o să fie editarea că prima instanță a clasei.
NEEL MEHTA: Pentru moment.
Da.
>> Audiența: Nu suntem de editare fiecare, caracteristică individuală a cronologiei?
NEEL MEHTA: Nu acum, cel puțin.
Deci, toată chestia asta este un bloc.
Suntem doar schimbarea Proiectare blocului.
Deci, aici facem col-lg-9, pentru că este noua din 12 lățime pe un ecran mare.
Și apoi pe un ecran mediu, câte coloane ar trebui să obțin?
Audiența: Ar trebui să fie jumătate și jumătate.
NEEL MEHTA: dreapta.
Deci, cât de multe este că?
>> Audiența: Deci șase.
NEEL MEHTA: Șase.
Și apoi mini ar trebui be-- în cazul în care ocupă întreaga lățime a rândului,
cât de multe ar trebui să fie?
Audiența: 12.
NEEL MEHTA: 12.
Da.
Și acum avem la schimba această altele,
așa că va ocupa restul spațiului.
Deci, col-lg--
Audiența: O să prelua întregul ecran?
NEEL MEHTA: Este nevoie de un sfert a ecranului pe un dispozitiv mare,
așa *** am arătat aici.
>> Audiența: Trei.
>> NEEL MEHTA: Trei.
Și apoi col-md-6 pentru a lua până restul spațiului.
Col-XS-12.
Deci, acum avem cronologie preluarea trei sferturi
paginii din marele ecran și apoi un sfert pe partea.
Și apoi, dacă dimensiunea ecranului în jos, ar trebui să redimensiona în consecință.
Deci e stivuite acum, pe un ecran foarte mic.
Și dacă l-am dimensiune un pic, acestea ar trebui să fie exact jumătate și jumătate.
Așa că am făcut asta până acum.
Foarte tare.
Și așa nu vom face altă parte a provocării.
Puteți face acest lucru singur.
Dar, practic, trebuie să încercați și să facă aceste receptiv
ca well-- face cronologie articole, se, receptiv.
Deci, acum am trecut prin tot ce trebuie sa stiti
despre partea sensibilă a Bootstrap.
Orice întrebări despre receptiv Design cu Bootstrap
și modul în care s-ar putea merge despre a face asta?
Da?
>> Audiența: Este similară în cazul în care am avut un video încorporat
si am vrut pentru a controla scară la care asta-- film
dimensiunea video merge de la laptop la telefon.
NEEL MEHTA: Da.
Mai mult sau mai putin.
Ar trebui să-i spuneți video pentru a ocupa la fel de mult loc ca ea a dat,
care este un pic enervant uneori.
Dar ideea de bază este același.
Un film, la fel ca orice alt obiect în pagina, ca un buton sau orice altceva,
atâta timp cât utilizați coloane și rânduri, de
puteti da un anumită cantitate de spațiu.
Și așa obtinerea-l să-și onoreze, care este o diferit întrebare deoarece ca YouTube
încorporează au o anumită, dimensiune preferat.
Dar teoretic la în ultimul rând, s-ar funcționa.
Misto?
>> Audiența: Presupun atunci, pentru o imagine, nu-i așa de fapt
trebuie să aibă versiuni diferite ale aceeași imagine în diferite mărimi
pentru laptop versus iPhone?
Da Întrebarea este, avem nevoie pentru a au imagini care sunt receptive la fel de bine.
Și într-adevăr, poți face asta.
Cred că e în CSS.
Dar Bootstrap permite să faci la fel de bine.
Puteți avea imagini sensibile.
Puteți avea imaginile redimensiona în funcție de mărimea paginii.
Și există un lucru foarte nou HTML5, cea mai noua versiune a HTML,
și CSS3, cele mai noi versiune de CSS, care
vă va permite să solicitați imagini diferite în funcție de dimensiunea ecranului esti la.
De obicei, este destul de bun pentru doar au imaginea doar micsora sau creste la
Cu toate acestea de mare trebuie să fie.
Dar puteți, dacă doriți a, avea un 32 cu 32
pentru ecrane foarte mici, și 64 de 64 pentru un ecran mare,
și apoi a servi cele selectiv.
Poti sa o faci.
Se face de către unii oameni.
Este încă destul de ultimă oră.
Dar răspuns scurt, images-- receptiv Bootstrap poate salva ziua acolo.
Misto?
>> Audiența: Mulțumesc.
>> NEEL MEHTA: Deci, haideți să vorbesc foarte repede despre ***
pentru a obține acest lucru în pagina web proprie.
Să presupunem că doriți vă face site-ul propriu, folosind Bootstrap.
Și așa că să doar mers pe jos prin ea împreună.
Să spunem că faci doar o pagină HTML normal.
Simțiți-vă liber să urmeze de-a lungul în indiferent de editorul dvs. favorit este.
Deci avem doar câteva pagini HTML.
Putem face! DOCTYPE html.
Acest lucru este, de asemenea, HTML, pagina noastră.
Nimic nou.
Am făcut acest lucru până acum.
Deci, aici avem HTML noastre și putem pune lucrurile în interiorul aici.
Putem avea butonul nostru.
Și, după *** am spus mai înainte, acest nu este neapărat de gând să lucreze.
De ce s-ar putea acest lucru să nu funcționeze?
De ce nu vom primi noastra frumos, butonul colorat?
>> Audiența: Pentru că nu l-am lega la proiectul Bootstrap sau dosarul?
NEEL MEHTA: Da.
Corect.
Pentru că e Bootstrap-- doar un fișier CSS fantezie.
Este o serie de stiluri care sunt atașate la elemente de dumneavoastră.
Aici l-am spus că ne-am doriți să utilizați aceste stiluri.
Voi dimensiune care un pic.
Ne-am spus vrem folosi aceste stiluri, dar nu
aceasta a spus ceea ce stiluri sunt.
Și asta e ceea ce dvs. Întrebarea de la mai devreme a fost.
Asta e răspunsul la această.
Trebuie să găsim o modalitate de a obține stilurile și să le includă în pagina noastră într-un fel.
Și voința atât de Bootstrap ne arată *** să faci asta.
>> Deci, dacă te duci la partea de sus aici, Noțiuni de bază.
Există diferite moduri de a descărca.
Acest lucru nu s-ar putea face sens în mod necesar.
Bootstrap-- acest lucru va lăsa te apuca de sine fișierul CSS.
Și ai inclus în propria pagină.
Codul sursă este, dacă doriți să hack pe ea de unul singur.
Nu ai nevoie de acest lucru într-adevăr.
Sass este o limbă care compilează în CSS.
Ganditi-va ca un preprocesor.
La fel ca PHP este un preprocesor de HTML, Sass este un preprocesor pentru CSS.
Deci, dacă vrei să o faci în acest fel, poți face asta.
>> Cel mai simplu mod este folosind un CDN, sau de livrare de rețea de conținut.
Este un site care doar servește o copie a Bootstrap
foarte repede pentru tine de a include în propria pagină.
Deci, aici este un exemplu.
Acesta să-ți dau acest element de legătură.
Un element link spune browser-ul dvs., ia orice fișiere sunt stocate aici
și include în pagina noastră de web.
Și în acest caz, este fișierul CSS Bootstrap.
Asa ca vom copia doar că URL-ul, sau acest text, și vom arunca în interiorul
de capul nostru.
>> Și nu voi începe pagina pentru acest lucru, dar poți să ai încredere că acest lucru funcționează.
Link-ul vei primi CSS.
Include-l în pagină și apoi vei putea
posibilitatea de a utiliza toate de Bootstrap clase care le cunoașteți și dragoste.
Dacă doriți să-l păstrați la nivel local și l-au pe sistemul de fișiere proprii
loc de a avea pentru a merge la Internet pentru a apuca,
*** ar fi dacă doriți să utilizați site-ul offline,
puteți utiliza opțiunea Download.
Dar pentru cea mai mare parte, folosind CDN este destul de rapid, deoarece în acest fel,
este ținut la curent pentru tine, de asemenea.
Trebuie să-l actualizeze manual, fie.
Are sens?
>> Deci, o mulțime de instrumente va fi construit acest în mod implicit. În Pset7 și Pset8,
Cred Bootstrap este incluse în mod automat.
Și în CodePen, pentru exemplu, este deja
inclus pentru că am adăugat adaugă că setarea.
Deci, dacă vrei vreodată să joace în jurul valorii de cu el, poti sa te duci doar pe CodePen,
sau du-te pe ID-ul, sau orice altceva.
Și s-ar putea fi în măsură să acces Bootstrap acolo,
dar nu este întotdeauna construit în, în mod implicit, la web.
Are sens?
>> Da.
la fel *** un recap-- avem ca cinci minute ramase.
Dar, ca o recapitulare, în noi pagini web, puteți include Bootstrap ca aceasta.
Și odată ce l-au inclus, poti sa faci toate lucrurile distractiv aici.
Puteți merge mai departe, și poate citi cu atenție doar tu CSS, puteți adăuga unele stiluri rece,
puteți avea componente ca butoanele,
și tabelele și lista elemente pe care am menționat.
Există unele plugin-uri interesante JavaScript, care s-ar putea dori să exploreze.
Ei adaugă unele misto interactivitate la pagina web.
Ca aceasta face un dialog modal.
>> Deci, există unele lucruri amuzante se poate face cu Bootstrap.
Deci, sfatul meu pentru tine este merge mai departe și-l folosească în propriile proiecte,
urmați instrucțiunile de noi a făcut doar cu privire la modul să-l,
și doar citi, deoarece bootstrap veți afla mai multe despre ce sa faca.
Și astfel am trecut peste, astăzi, modul de utilizare a
documentația, ceea ce clădirea blocuri sunt, și modul în care aceasta este conceptual.
Deci, acum provocarea mea pentru tine este face un site folosind Bootstrap.
Du-te în docs.
Și de a folosi instrumentele pe care le-am învățat până acum pentru a încerca și să le analiza
și le înțeleg.
Și de a folosi aceste stiluri și instrumente vezi acolo, în site-ul dumneavoastră.
Și e doar o mare, proces experimental.
>> Încercați un anumit stil.
Funcționează?
NU este?
Încercați să puneți lucrurile împreună.
Vezi ce se întâmplă.
Este foarte mult o auto ghidate, proces de descoperire.
Dar astăzi, am învățat Bazele Foarte ceea ce este Bootstrap?
De ce nu funcționează?
*** functioneazã?
*** putem începe să utilizați ea, în primul rând?
Și așa acum că ești peste care bizon, tu
ar trebui să fie capabil să-l facă destul de bine de unul singur.
>> Deci, încă o dată, toate Codul am făcut e aici.
Deci, dacă vrei vreodată pentru a obține o perie pe,
*** ar fi, ceea ce este un ieftin rapid foaie pentru toate stilurile?
Puteți merge în această probă aici.
Avem unele stiluri exemplu aici.
Dacă doriți să încercați provocări din nou de unul singur,
le puteți încerca aici și a verifica afară de soluțiile.
Deci, acest link va fi incluse pe slide-uri, care
va fi trimis la tine, desigur.
Dar este de asemenea aici.
Puteți întrerupe clipul video, dacă doriți.
Toate informațiile de care aveți nevoie este O să fie aici, pe acest site.
Deci, dacă cineva are întrebări, putem le ia pentru următoarele două minute.
În caz contrar, vă mulțumesc tuturor foarte mult pentru vizionarea.