Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Szóval hello mindenki, aki figyel itt,
vagy néz online, vagy távolról.
A nevem Neel, ez CS50.
És a mai szeminárium Érzékeny Web Design Bootstrap.
Ez olyan téma, amely az Nagyon közel áll a szívemhez.
Remélhetőleg ez lesz közel a szívedhez
valamint végére a mai szemináriumon.
Szóval Bootstrap.
Hányan tettél bármely fajta webfejlesztés előtt?
Egy jó adag?
Egy kicsit.
>> Tehát Bootstrap a világ legnagyobb népszerű, front-end keret.
Ez használt by-- én kitaláltam egy pár random websites--
Lyft, a Newsweek és a Vogue.
Ez használt számos honlapok.
Ez egy web design keretet majd megengedem, hogy a weboldalak
mind szép és érzékeny.
És én megyek át ezeket a két fogalom itt.
Gyönyörű.
Szóval van rendes honlapján a bal, ami által csak HTML.
Megtanultátok HTML osztályban és részben hosszasan.
Bootstrap egy módja annak, hogy a weboldalak szép.
Tudod venni, mi van a bal oldalon a képernyő
és kapcsolja be, mi van a jobb oldalon a képernyő, nagyon,
Nagyon, nagyon kevés kódot.
>> Kapsz egy szép kék gombot, kapsz A divatos, lekerekített élekkel a képernyőn,
kap a lista nézetben, az lesz a kártyák, és így a nagyon kis kódot.
Itt tulajdonképpen nincs CSS meg kell írni egyedül.
Szóval Bootstrap lehetővé teszi, hogy ezeket előre beépített CSS
komponensek rakhatsz belsejében a weboldal
hogy úgy tűnjön, gyönyörű nélkül Nagyon sok munka a saját.
Ez tényleg egy bootstrap, Kiindulópontként
a webfejlesztés kalandok.
És amikor te csak gúnyos létre egy honlapot,
ez egy nagyon jó hely az induláshoz.
Tudod kap egy jó kinézetű honlap Nagyon, nagyon kevés a munka.
És valóban, megyünk Ehhez magunkat
során, mint öt minutes-- 10 percen belül.
Szóval ez elég könnyű hogy néhány nagy weboldalak.
Szóval ez az első rész.
>> A második part-- reagál.
Az emberek manapság, nem csak beléphet az internetre a laptopok.
Valójában, mivel a 2014-re több embert hozzáférhet az interneten keresztül mobil eszközök,
mint telefonok, vagy tabletta, vagy szolgáltatások, vagy így tovább, mint honlapokon.
És weboldalak hagyományosan tervezett laptopok vagy asztali
gondolatban.
És így a weboldalak gyakran nem Kiválóan alkalmas a telefonra.
Ha valaha is ellátogatott harvard.edu a telefonon,
ez a fajta egy bosszantó tapasztalat, ugye?
Azért, mert ez nem reagál.
Próbálunk tenni weboldalak, amelyek reagálnak,
hogy válaszoljon az emberek méretben kapható.
>> Tehát ha ez egy telefon, ez fog menni a telefonon.
Ha ez egy tablettát, ez fog menni a tablettát.
Ez beállítja, hogy megfeleljen a képernyőn, amelyet használ.
És így Bootstrap is nyújt némi Nagyon, nagyon hasznos segédprogramot erre.
És fogunk beszélni, hogy is.
Tehát megint van két részből Bootstrap-- szép és felelősségteljes.
Fogunk beszélni ezeket.
Először is, gyönyörű.
És akkor reagálnak.
>> Tehát az összes kódot, hogy mi vagyunk fogok beszélni today--
megyünk, hogy egy csomó példa, sok kihívással, és így on-- meg
minden él ezen a honlapon van.
Ez a dia az, amit küldtünk ki.
Tehát ha van, akkor úgy érzi, szabadon nem kell írni, hogy le.
És ha nézed távolról, úgy érzi, Ingyenes húzni ezt fel a számítógépre
is.
Akkor valószínűleg szükség van rá ideje alatt Ennek során szemináriumon.
>> Mi is így fogjuk használni weboldal neve CodePen,
amely egy együttműködési kódolás környezetben, szeminárium során.
És CodePen-- és én mutassa meg itt igazi fast--
ez lehetővé teszi, hogy írjon HTML közösen.
Tudok írni, én is küldje el srá***, ti is szerkeszthetik.
Még ha távoli, ilyenkor is elérheti azt, hogy így.
Akkor írja HTML kódot a tetejére és akkor automatikusan
átalakíthatjuk a weboldal alján.
Tehát úgy érted, hogy gyorsan kipróbálni kód
anélkül, hogy ezt bármilyen cucc a IDE, vagy a saját honlapján,
vagy bármi.
>> Így megy előre, és húzza fel ezt a website, ha a távoli
vagy ha itt, különösen akkor, ha a távoli.
is.gd/cs50boostrap.
Nincs sapka, nincs aláhúzás, se semmi.
Tehát azok, akik Itt, csak adj egy remek
fel, ha volna húzni fel, hogy weboldalt.
Jó?
>> Közönség: Igen.
>> NEEL MEHTA: Szóval mi lesz hogy hogy csak egy pillanatra.
Tehát először fogunk eljutni, hogyan Mit csinál a weboldalak szép?
Fogunk megtanulják, hogyan kell unalmas, régi HTML, ahogy mutattam előtt,
és kapcsolja be, hogy igazán szép alkatrészek,
mint a szép kütyü, szép, színes gombok és címkék, és táblák,
és minden, a Bootstrap.
Tehát, ha tudnánk minden megy át a CodePen hogy csak húzta fel.
Meg kell nézni egy kicsit, mint ez.
Hogy néz ki ez mindenki számára?
>> Közönség: Igen.
>> NEEL MEHTA: Ha a távoli, akkor így kell kinéznie is.
Ha nem, akkor meg fogom mutatni, hogy hamarosan milyen lehet kapni kinézni
A jövőben a videó egy részét.
Tehát itt írtunk egy nagyon egyszerű HTML,
mint az a fajta akkor már használ az osztályban.
Ez elég alap.
Nincs sallang.
És van néhány dolog.
Úgy terveztük nagyon, nagyon alap induló
hívja Yalp! között, melyekkel éttermek a környéken,
és megtalálni véleménye, és irányban az összes ilyen.
Ez egy nagyon jó koncepció.
Ez soha nem volt azelőtt.
Ez egy nagyon egyedi nevet is.
>> Szóval, mit fogunk próbálni tennie, hogy segítsen a tulajdonos
A Yalp! hogy ő honlapján nézd nagyon, nagyon klassz.
Így kezdődik, a tulajdonos Yalp! tett egy kis keresés
doboz, és egy kis gomb, majd talán egy kicsit
kiemelt terület a kiemelt étterem, majd
egy listát a többi éttermek hogy vannak a területen.
Így tudjuk csak menj át a HTML kódot igazi böjt.
Milyen kényelmes vagytok HTML?
Tettünk egy kicsit szakasza, valamint az osztályban.
Megfelelő?
>> Ahogyan tehát bedugni, HTML szól, amelynek
címkék vagy elemek, melyek jelzik a számítógépes hogyan helyezkedjenek el a weboldalt.
Tehát ez a H1 here-- indul H1, Welcome hogy Yalp !, végén h1-- közli a számítógéppel,
rajzoljon egy nagy fejlécben mondja, Üdvözöljük Yalp!
benne van.
Mi is formáit.
Mi lehet a bemenetek, mint ez, szöveges bemenet, amely lehetővé teszi majd, mint a szöveges dobozok
írsz.
Arra is van gomb.
Kapsz egy szép, kattintható gomb.
Nem csinál semmi jót most, de akkor kap egy gombot.
Egyszerre divs, vagy osztók, hogy szakítani az oldal különféle csoportok.
>> Egyszerre bekezdések, Van gombokat.
Ha a fenti, majd Van rendezetlen listákat, ul,
és listák belsejét, hogy li.
Tehát ezek a nagyon alapvető építőkövei egy internetes oldalon.
És valóban, elég sok minden honlap látod
fog épülni Ezekkel ugyanazokkal az eszközökkel.
Természetesen nem az összes nézd ez rossz, mert mi vagyunk
megy vértezze fel egy kicsit.
Szóval ez az unalmas régi HTML és Start átalakítva azt a gyönyörű helyszínen
hogy mi most láttam egy pár perccel ezelőtt.
>> Szóval kezdjük el nagyon egyszerű.
Így van ez a gomb itt.
Ebben Bootstrap, mint láttuk, nem tudjuk Van egy szép, gyönyörű, kék gombot.
És ez kész nem csinál CSS.
Nincs CSS itt.
Ez kész hozzáadásával osztályok a HTML elemek.
Ha már próbáltam osztályok, vagy mutató HREF-eket, vagy horgonyok, vagy type = "text" a inputs--
HTML elemeket lehet ezeket a tulajdonságokat.
Lehet extra információkat hogy lehet, hogy nekik.
>> És így, ebben az esetben, osztály attribútum.
Tehát azt írja, gomb class = valami benne a szálakat.
És ez az attribútum fogja mondani a számítógép, ez nem minden, a régi gombot.
Ez egy gombot, mely a Ebben az osztályban a gombok.
És így Bootstrap, ha adsz neki egy bizonyos stí*** a elemet,
levonja azt egy bizonyos módon.
Így írok "Btn gmb elsődleges.
gmb hogy egy rövidítés a gombot.
Észre fogod venni, most, hogy én csúnya gomb bekapcsolásával
egy szép, gyönyörű, kék gombot.
Úgy néz ki, nagyon szép, amikor kattintson rá.
>> És akkor mi történik, mi van a BTN osztály és a BTN-elsődleges osztály
A elem.
És Bootstrap fog menni, és azt mondják, OK, tudni, hogy vannak ezek a két osztály.
Bármely elem, amely a két osztályok kell kidolgozni, mint ez.
Szóval ez a lényege, hogyan csatolja stílusok elemeit Bootstrap.
Csak azt csatolja meg nekik az osztályt, és akkor súlyozza ki, hogy saját belátása.
Tehát itt egy másik példa.
A bemeneti, tudunk hozzá a class = "form-ellenőrzés".
És megmutatom hamarosan hol Megtudhatja, hogy milyen osztályok
rendelkezésre állnak az egyes fajta elem.
De az osztálynak, hogy mi csak Hozzáadott Szép, lekerekített sarkok,
azt szép padding, hogy van Jó, kék fény rá.
>> Azt is megy be ezt az űrlapot.
És class = "form-inline", amely biztosítja, hogy űrlapunkat, mint képzelnéd, inline.
Szóval ez már egy kicsit mint ami a miénk volt már.
Tehát mielőtt megyünk a stílus a többi Az oldal bármilyen kérdése van, amit mi
Tényleg?
Csak csatolt osztályok hogy a különféle elemeket.
És én megmutatom, később hogyan tudsz kitalálni, mi osztályok állnak rendelkezésre.
Mi csatolt osztályok, Vannak bizonyos stílusok.
És ez jelzi a böngésző hogyan rendezze el az oldalt
Bootstrap által nyújtott stílusokat.
Bármilyen a közönség kérdéseire?
>> Jó eddig?
Hűvös.
Sok a kihívások A bootstrap csak
tudva, milyen összetevők vannak és, hogy hogyan használja őket.
És ez mind tanult tapasztalattal és
keresztül a dokumentáció olvasása, amely fogunk beszélni hamarosan.
Így van ez a div.
Ez csak egy unalmas, régi dolog.
Szeretnénk hangsúlyozni, hogy valahogy.
Tehát a Bootstrap, van egy Sok alkatrészek állnak rendelkezésre.
És ez getbootstrap.com.
Ez egy nagyon hasznos hivatkozás.
Ez tartalmazza a dolgok általam elvártnál itt hogyan csinál egy gombot.
És meg tudod csinálni nav bar, akkor címkék, akkor a haladás bárok,
meg tudod csinálni listát csoportok.
Alapvetően ez mindenféle Az lehet, hogy egy internetes oldalon.
>> Itt van az egyik, hogy megpróbáljuk most.
Úgy hívják panel.
Ha valaha is használja a Google Most, hogy van kártyákat.
Vagy bármilyen Android készülék kártyákat.
Ezek a kis fehér doboz amelyek cucc belsejében is.
És így fogunk próbálni, és nem hogy magunkat itt egy dolog,
úgynevezett panel.
Tehát, ha csatolja class = "panel panel-default "a mi külső div,
akkor csatolja a div class = - hadd csak nézd ezt a dokumentációt.
div class = "panel-cím" és majd div class = "panel-test".
Még egyszer, ne aggódj megtanultad kódot.
Ez lesz elérhető az interneten.
>> Szóval ezt tettük és most a mi unalmas, régi div vált ez a szép, kis kártyát.
Ez szép padding, hogy határos, hogy kiemelkedik
A többi oldal, ami elég jó.
Szóval menjünk be, és ezen változtatni Get irányok gombot, hogy néz ki.
Ki a közönség akar mondani nekem, hogy mit tehetek, hogy a gombot
hogy úgy tűnjön szép a Bootstrap?
Igen?
>> Közönség: Mi is hozzá egy osztályt.
És amit tehettünk class = "Btn gmb elsődleges".
NEEL MEHTA: Igen.
Van egy csomó más színek a buttons--
vagy bármit, ami azt illeti.
Tehetünk gmb-veszély, és ez a piros.
Ott vagyunk.
Tehetünk gmb-siker, hogy ez a zöld.
Tehetünk gmb-info-- van egy csomó A dolgok, amelyek közül választhat.
Szóval van egy kis kihívás most.
Szóval van még egy dolog hogy hagytam un-stílusú.
Ez a top éttermek.
>> És azt akarjuk, hogy egy dolog nevű listáját csoport stílusszabályt.
Szóval a kihívás, hogy te is tovább, hogy getbootstrap.com--
Majd húzza fel itt.
getboostrap.com.
Tovább a getbootstrap.com, keresse meg a szakasz, ahol megy át a listát csoportok.
És akkor itt látunk, az Például, a jobb osztályok
hogy tudod használni, hogy a listákat ezek a szép listát csoportok.
Ezek kidolgozott példákat A kód példák, mit
kódot használja, milyen HTML kód használja, és hogy ez mit kimenetek.
>> Szóval a kihívás, hogy you-- tovább getbootstrap.com,
hogy te itt vagy otthon, és hogy megpróbálja felvenni stílusok erre ul
hogy úgy tűnjön szép.
És ezúttal egy listát csoport stílusban.
Azt akarod, hogy egy-két percig, és keressük a dokumentációt,
próbáld ezt magatokat?
Mert, ahogy csinálod webfejlesztés, rájössz, sok a munka
fog olvasni ez a dokumentáció.
Szóval azt hiszem, ez jó, hogy megismerkedjen hogyan kell olvasni dokumentációt,
hogyan kell kitalálni, mi hol, milyen kódot példák tudod használni,
mit tud mozgósítani.
>> Szóval megint getbootstrap.com, megy a Components lapon
majd lépjünk le a lista Csoportos.
És látni fogod példákat kód tudod használni, hogy a HTML illik ez.
Tehát hogy egy pár percig, és próbálni, és fedezze magad,
hogy te itt vagy otthon.
Ha otthon, szünetelteti a videót, talán, és próbáld ki magad.
Ha itt, ha megy a mi website-- ha frissítse az oldalt,
meglátja ezt ott.
Ez ugyanaz a kód csak hozzátéve, az új stílusok ott.
Tehát hogy egy pár percig.
Szólj, ha jól érzed róla, vagy ha éppen teljesen elveszett.
Jól hangzik?
Hűvös.
Gyors félre azoknak, otthon, amíg várunk,
ha megy a GitHub helyszínen hogy tettem fel egy pár diák ezelőtt,
felé a videó elejére, Van egy GitHub repo, adattár,
Ennek beszélni.
Mindezek kód példák, hogy mi lesz beszélünk tárolják itt.
Tehát, ha megy a kihívás-1.html, ez az összes kódot, melyet most
A CodePen.
Így csak megy előre, és másolja ezt, és illessze be a saját CodePen.
És így, akkor lépést tartani azzal, amit itt csinálunk.
Így van ez az oldal nyitott, mint mi átmenni a többi szemináriumon.
Ismét azt akarja, hogy néz ki, mint amit lásd lent a képernyő alján
ott.
Jól érzi magát?
Szilárd.
Várjuk meg mindenki mást befejezni, amit csinálnak.
>> Igen?
>> Közönség: Tegyük fel, hogy én akartam, használni Bootstrap a home--
NEEL MEHTA: Igen.
Közönség: Látom, a honlapon, Az első lépések oldalon.
Adnak nekem a lehetőséget Bootstrap, Forráskód, vagy Sass.
Ezek közül melyik akarok?
>> NEEL MEHTA: Igen.
A kérdés tehát az, hogyan kap kezdte a Bootstrap magunkat?
Ez történetesen varázslatosan működik itt.
Tehát, ha van időnk a Az a szeminárium végén,
Majd én megmutatom, hogyan tudsz kap ez a saját weboldal.
Mint itt, amit ténylegesen hozott néhány beállítást
lesz automatikusan betöltött, de én
mutassa meg, hogy nem azt a karcolja a saját weboldalakat.
>> Közönség: Köszönöm.
>> NEEL MEHTA: Igen.
Jó kérdés.
Jól érzi magát?
Jól érzi magát?
Hűvös.
Tehát, aki azt akarja, hogy mondja meg, hogyan kerültek ez a dolog néz ki, és Boostrappy?
Mi az első osztályú ehhez hozzátesszük, hogy a ul?
Közönség: class = "list-csoport".
NEEL MEHTA: Igen. list-csoport.
És akkor mit tulajdonítunk a lis?
Valaki más?
Közönség: És azután hogy a class = "list-csoport-elem".
>> NEEL MEHTA: Igen.
>> Közönség: És ez a ugyanaz a következőt.
>> NEEL MEHTA: li class = "list-csoport-elem".
Nesze.
Megvan a szép listát csoport, csakúgy, mint amire számítottunk.
Tehát ott megy.
A 10 perc alatt, tettünk ez unalmas, régi Yalp! oldal
meg szép és profi.
És ez még csak a kezdet.
Tehát most, hogy úgy érzi, jó ebben, hadd
csak megy előre, és beszélni még egy pár összetevők
Hasznos lehet, mint te menjen végig a kaland.
>> Persze, van egy csomó is van.
És most, hogy már megtanult hogyan kell csinálni lista csoportok,
akkor nagyjából tanítani magad, hogyan hajtsa végre ezeket.
De, persze, nézzük csak meg és nem egy pár magunkat,
Csak így kedvet kapjanak hogyan használhatja őket.
Én csak fog menni hogy ez a példa itt.
Ismét a kódot, hogy én csak beillesztett itt elérhető itt.
Szóval nyugodtan húzza fel.
>> Szóval mi már átesett egy pár ilyen példák.
Tehát van gombok, amelyhez Már láttuk, hogyan kell csinálni.
Tudjuk, hogy a gombok nagyobbak.
Button class-- megy, Btn gmb-lg és gmb alapértelmezett teszi fehér.
Tehát ez teszi a gombbal nagyobb mint amilyen egyébként is.
Ez jól jöhet, ha van nagy küldés gomb, vagy valami.
Láttuk a listát csoport például láttuk formájában például.
>> Az egyik nagyon fontos az ikonok.
És ikonok egy módja, hogy adjunk Érdekes dolog, mint a check check
jelek, vagy impulzusra, vagy barát ikonok, vagy újraindítás ikonok,
vagy bármi, hogy az internetes alkalmazásokhoz.
Tehát újra, ha be van, a komponensek, glyphicons,
az ikonok elérhető Bootstrap.
Van egy kimerítő listát az összes itteniek.
Tehát csak példaként, próbáljuk meg felvenni egy.
>> Szóval, mint a Facebook, vagyunk, hogy megpróbálja hogy egy Barát hozzáadása gombra.
Nézzük először adjunk hozzá néhány stílus.
gombot class = "Btn gmb-siker".
És ott is vagyunk.
Adjunk hozzá egy ikont itt.
Mi ikon, mit gondol, lehet értelme, hogy itt?
Ön valószínűleg látta a Egyes weboldalak, vagy bármi,
de mi egy példa egy ikon, hogy Lehet jól megy benne ezt a gombot?
Nyugodtan böngészhet ezt a nézetet, ha szüksége van ihlet.
Van egy csomó hasznos is elérhető itt.
Igen?
>> Közönség: Lehet, hogy a glyphicon felhasználó egy?
NEEL MEHTA: OK.
Ezt.
Ez elég jó.
Igen.
A Facebook-on, azt hiszem, nézne ki, kicsit olyan, mint ezt.
Tehát itt van, hogyan érjük el az ikonok, hogy az oldalainkon.
Nekünk csak egy span-- egy arasz egy semleges tartályba valamit.
A div egy konténer valamit, egy arasz egy másik tartályba.
divs van a sortöréseket körülöttük, ível nem.
Szóval van különböző módon amelynek általános konténerek.
Akár tetszik, nincs értelme, hogy azt belsejében egy bekezdés vagy ilyesmi.
Van, hogy azt belsejében valamit mégis,
így csak betenni a span.
Tehát span class = glyphicon glyphicon-felhasználó "közel span.
És most már a ikonra az gombot.
>> Tehát nem úgy néz ki teljesen eltérően mit lehet látni a facebook.com.
És ez így szép, hogy ezek tulajdonképpen bárhol elhelyezhető akarsz.
A header bárok, a listán csoportok.
Bármi.
Nem kell, hogy belsejében egy gombot.
Tehát példaként, tudok tedd ugyanabba az osztályba itt.
"glyphicon glyphicon-felhasználó".
És úgy tűnik, csak az azonos.
Tehát ezek icons-- akkor a span class = "glyphicon glyphicon-bármit".
És amely segítségével hozzá ikonok, ahol csak akar.
És ikonok egy nagyon fontos része annak, hogy egy weboldal megjelenés
szakmai és jól sikerült.
Tehát ne vigyük túlzásba, de ez Gyakran egy jó dolog tudni.
>> Panelek, újra.
Én csak ezt újra bedugni mert ők a fajta részt.
Észre fogod venni, hogy a fordult a szokásos HTML
helyén egy Bootstrap-afied oldalon, akkor van
hogy extra szerkezete a honlapon.
Például, van extra divs ide csak azért, mert azok,
van szükség ahhoz, hogy a testület.
Szóval, csak tartsa szem előtt, hogy, hogy neked kell külön struktúrát.
Tehát "panel panel-default".
Talán azért, panel-fejléc.
Azt hiszem, ez panel-cím.
Igen.
Ott vagyunk.
Szóval, megint van a panel.
>> Még egy dolog, hogy mi nem terjedt még, asztalok.
Asztalok, alapértelmezés szerint megjelenés fajta csúnya.
Ez tetszik.
De táblázatok, természetesen, egy nagyon fontos része
mit fog csinálni a web fejlődését.
A Pset7, például, CS50 Pénzügy, ami ki fog jönni hamarosan,
akkor használja sok asztalon.
És egy csomó web dev használni sok A táblázatok az információ megjelenítésére,
mint például a készletek, illetve eredmények, vagy bármi más.
>> Tehát stílus táblázatok valójában nagyon egyszerű.
Ön adja hozzá a tábla osztály asztalnál.
És merem állítani, úgy néz ki, nagyon szép.
Meg tudod csinálni extra dolgokat, mint a "asztal asztal csíkos".
És látni fogod az eredményeket itt.
Megteheti asztali határolt.
Van egy csomó lehetőség lehet.
De alapvetően, hozzátéve, asztal, az asztal osztály,
teszi a táblák néz ki, nagyon szép.
Szóval ez egy rövid lepusztult néhány a több fontos stílusok
és alkatrészek azt is megtudhatod kell használni a Bootstrap.
Tehát úgy gondolom, hogy pakolások a mi gyönyörű részén.
Bármilyen kérdése most arról, hogyan hogy a weboldalak szép?
Hogyan lehet használni ezeket a alkatrészeket az előnyt?
Jól érzi magát?
Igen?
Közönség: Talán ez egy hülye kérdés,
De lehet használni Bootstrap a Wikipedia?
Ha Ön szerkeszti a Wikipedia oldalt?
NEEL MEHTA: Igen.
Szóval a kérdés az volt, én vagyok szerkesztése Wikipedia oldal,
illeszthetem Bootstrap stílusok vannak?
>> Közönség: Igen.
>> NEEL MEHTA: És így rendszertöltő alapvetően egy nagy CSS stíluslapot.
A CSS stíluslap csak azt mondja, valahányszor Én ezt az osztályt, csatolja ezeket a stílusokat.
Tehát a CSS stíluslap Bootstrap lesz valami hasonló .btn,
A gomb osztály, kap, mint egy lekerekített sarok határon, vagy bármi.
Tehát alapvetően, bootstrap ez csak egy csomó osztályok és egy csomó stílusok
meghatározott ezeket az osztályokat.
Tehát amíg van, hogy a CSS, ezt a listát a szabályok az oldaladon,
akkor megkapod a Bootstrap stílus.
Azaz, természetesen, függő amelynek Bootstrap stílusok az oldalunkon
kezdeni vmivel.
>> És így a Wikipedia, akkor valószínűleg nem sikerült
csinálni, mert Wikipedia Nincsenek Bootstrap benne.
De ha mégis van Bootstrap, akkor talán csinálni.
És ha akart, akkor tartalmazza azt, de ez talán
megtörni a jelenlegi elrendezését az oldal.
De nagyon jó kérdés.
Használhatja Bootstrap akárhol is szerepel,
de ez nem épült alapértelmezés szerint.
>> Közönség: Köszönöm.
>> NEEL MEHTA: Igen.
Van még kérdés?
Igen.
Így akár itt, akár otthon, Csak arra emlékszem, getboostrap.com-- újra,
getboostrap.com-- a barátod.
Amikor Ön használ Bootstrap, ez ad
utasításokat, hogyan lehet kezdett, hogyan kell használni alkatrészeket.
Van néhány nagyszerű JavaScript plug-inek, hogy nem megyünk ide,
de ők érdemes megnézni is.
Szóval ez a te barátod.
Ez csak fontos, hogy használt, hogyan kell használni ezt.
>> Úgyhogy beszélgetni egy kicsit így reagál honlapok.
Tehát ahogy már mondtam, az emberek használják a laptopok, akkor használja a telefonját.
És mivel lehet képzelni, ez egy egészen más képernyőméret annál.
És így az ugyanazon a honlapon hogy jól néz ki a telefont
nem fog jól nézzen ki, szükségszerűen a számítógépen.
Szóval, mit kell tennie, hogy a website alkalmazkodni.
Azt, hogy alkalmazkodjanak a különböző méretben kapható, hogy ez az.
>> Meg kell mondanom, tudom, én vagyok a számítógép, egy nagy laptop, azt kell bővíteni.
Tudom, én vagyok a telefont, én meg zsugorodni.
És így Bootstrap ad némi Nagyon, nagyon hasznos eszközök erre.
Tehát Bootstrap nézzük meg szünet Egy honlap a 12 oszlopok.
Tudod, hogy a sorok és oszlopok is 12.
És tudod particionálni azoknak, ahogy akarod.
Akkor van egy, nagy dolog, ami 12 oszlop széles.
Egyszerre két dolog hogy hat minden.
Meg tudod csinálni egy dolog, hogy ez a négy, az egyik, hogy két, vagy az egyik, hogy hat.
Akkor nem három, három, három, három.
Meg tudod csinálni, amit bontás, amit akar.
>> Így talán a weboldal szüksége van egy bal oldali oszlop, ami egyharmada a szélessége.
Szóval ez lenne négy oszlop széles, és a többi oldal
lenne nyolc oszlop széles.
Szóval ez egy példa.
Nézzük húzza fel egy másik példát.
>> Közönség: Vajon mindig kell egyenlő arányban oszlanak meg?
Lehet, hogy egy hét, öt osztott?
>> NEEL MEHTA: Igen.
Ez lehet hét, öt.
Igen.
Mindaddig, amíg ez növeli 12, ez rendben van.
Szóval menjünk vissza ide.
Ismét a kódot, amely Itt is elérhető itt,
alatt reagáló példa.
Szóval én csak húzta fel néhány Például reagáló kódot itt.
Szóval ezt használatával egy dolog, úgynevezett sor.
Row is csak egy osztályt.
Ez egy másik stí*** felvenni rá a divs, hogy azok saját komponenseket.
>> Szóval azt mondod, div class = "sort", hogy egy sorban,
hogy magadnak 12 oszlop helyet.
És akkor tedd oszlopok belsejében, hogy.
Tehát itt col-xs-6.
Ne aggódj a xs.
Megbeszéljük a mp.
De alapvetően, van egy dolog, ami hat széles.
Mi ezt engedélyezte.
És ez az a bal oldali mezőben van.
Van egy dolog, ami hat a 12 oszlop széles.
És hogy az egyik a jobb oldalon.
>> Hát csak ad gyártmányú A div töltse fel szürke.
Szóval ez csak így lehet látni, hogy ők különbözőek.
És így ez az első példa.
Ez egy nagyon egyszerű példa arra, hogyan lenne használni a sorok és oszlopok itt.
Ön határozza meg a sorban a class = "sorban".
És akkor te class = "col-xs-6" do fele, "col-xs-6", hogy nem a másik felét.
Itt egy kicsit bonyolultabb esetet.
Nézzük meg a Tiny, Hatalmas, a többi egy.
>> Tudjuk, hogy Tiny két oszlop széles, tudjuk, hogy hatalmas hat oszlop széles,
És a többi négy oszlop széles.
Hogy hozzáteszi, akár 12.
És így ezek végül átívelő a szélessége a oldal.
Ismét van egy sorban kívül.
Aztán ott van div class = "col-xs-2" majd a 6, majd 4.
És ez lesz az a szerkezet számunkra.
És így is tesz amit A fene akarunk idebent.
Ahelyett, Apró, tudunk rakni egy gombot.
gombot class = "Btn gmb elsődleges".
És így észre, hogy mi a gombot nem veszi fel az összes szélessége,
de legalább ez letiltva hogy, hogy sok helyet.
>> Szóval ez mind szép és jó.
Tehát most már szét honlapunkon Oldal darabokat, szélesség bölcs.
Elmondhatjuk azt szeretnénk, hogy a bal oszlop, és egy jobb oldali oszlop, és így tovább.
De nem ment át hogyan teszik reagál.
És így Bootstrap csináljuk, hogy is.
Meg ezek a dolgok úgynevezett töréspont.
Tehát van egy lehet tudni, hogy te egy laptop, te egy tablettát,
te vagy a telefont vízszintes, vagy te vagy a telefon függőleges.
Úgy tudja, a képernyő mérete.
És megszegi ezt négy categories-- nagy vagy LG, amely laptopok, általában.
MD vagy közepes, ami tabletta.
sm, kicsi.
Vagy xs, extra kicsi.
És így, amikor megad egy oszlopot, azt mondod,
meg kell hat oszlop széles egy extra kis készülék.
Ezért tettük col-xs-6.
Azt mondjuk, hogy abba kellene hat a 12 oszlop széles
egy extra kis készülék.
És ha ez valami nagyobb, akkor csak alapbeállítás szerint az extra kis méret.
Ha ez valami nagyobb, mint extra kicsi, ez lesz a hat széles.
És így kihasználhatjuk Ezek, hogy a mi oszlopok
vegye fel a különböző mennyiségű oszlopok alapján a képernyő mérete.
Menjünk erre reagáló átméretezés.
Szóval megvan a oszlopok.
És azt mondja, "col-LG-6 col-XS-12".
Tehát adott, mit tud eddig, mit
gondolsz, mi fog megtörténhet egy nagy képernyőn?
Nos, ez a fajta átadta helyét, de mi köze
úgy gondolja, hogy fog kinézni Szeretem a nagy képernyőn?
És miért van ez?
>> Közönség: Van az, hogy egy nagy képernyőn, ez
fog tartani csak része a teljes teret?
Mint a fele, azt hiszem?
>> NEEL MEHTA: Igen.
>> Közönség: És a kisebb képernyőn, ez lesz
hogy vegye fel a teljes képernyőt, a 12.
NEEL MEHTA: Igen.
Jobbra.
Így példaként, hadd csak nézd meg itt.
Igen.
Tehát minden, ami az LG vagy bigger-- így a számítógép történik
hogy lg mert csinos wide-- meg fog tenni
ez egymás mellett, mert ez col-LG-6.
Szóval azért, mert a nagy, ez teszi hat oszlop széles és hat oszlop széles.
Lássuk, mi történik, ha hogy ez egy kisebbet.
Csak megyek, hogy az ENSZ-teljes képernyős ezt.
És fogok csökken a képernyőn.
Megyek csökken a képernyőn, így úgy néz ki, mint én vagyok a kisebbik eszköz.
Így fogok zsugorodni, mint ez.
>> És íme.
Ez most egymásra mert most már elment
a nagy alábbiakra: ez valószínűleg egy extra kis képernyős.
És így most azt mondja, OK, nem vagyunk nagy, mi vagyunk a kis extra földet.
Mi is így fogjuk használni Az extra kis méret.
És mi lesz XS-12, xs-12.
Szóval ez lesz egymásra.
És csak észre, hogy van egy dologban töréspontot.
A töréspont, ahol Ön az átmenetet
extra kicsi ahhoz, hogy kicsi, kis és nagy, és így tovább.
>> Szóval csak észre, hogy ahogy csúszik ez a ki, végül, kapsz arra a pontra,
ahol majd ugrani, hogy egymás mellett.
Nesze.
Szóval van a töréspont ott.
Tehát lehet, hogy még bonyolultabb.
Most már elmondhatjuk, ezek a dolgokat kell négy széles.
Azaz, meg kell vegye fel mintegy harmada
A beszéd nagyon nagy készülékek.
Egy közepes eszközt, meg kell venni akár a fél képernyőt, mert ez MD-6.
Nagyon kis eszköz, Meg kell megkezdeni 12.
És így ez úgy néz ki, elég természetes.
Nézzük csak próbáld ki ezt magunknak.
>> Szóval egy nagy képernyőn, ők négy széles.
Shrink, hogy egy kicsit.
És ők most hat széles.
Szóval ez hat, hat, hat.
Shrink azt még majd lesznek teljesen egymásra.
Tehát ez, például, van értelme, ha Ön rendelkezik kártyák, mint hírek kártyák,
például, ahol, ha ez egy nagyon nagy képernyőn,
nem baj, ha több egymás mellett mert ők mind kap elég hely.
De kell, hogy van elég hely.
Így egy kisebb képernyő, azt szeretnénk, hogy nekik
Több szoba, arányosan, a lap.
>> Tehát, mint egy valós példa, mondjuk van Twitter.
És mi van a szövegmezőbe, így Akkor tweet az oldalon.
És van egy lista a trend témakörök a jobb oldalon.
Szóval egy nagy képernyőn, mi kell állíttassák lehet egymás mellett,
így láthatja őket egy pohár.
De egy kisebb képernyő, meg kell tennünk a 12. és a 12.,
úgy, hogy a trend témák vannak a tweet alatt található.
Mivel a tweet terület a lényeg, és a kis képernyőn,
A trend témák nem számít annyira sokat.
És így őket jobbra lent, így hogy azok egyszerre kap elég hely.
Értelme eddig?
>> Közönség: Igen.
>> NEEL MEHTA: Szilárd.
Szóval ez a példa van itt.
Próbáljuk ezt a kihívást.
Szóval ez szintén kihívás-2.html számára Azoknak, a következő mentén otthon.
Szóval a haverom, Mark Zuckerberg, odajött hozzám a minap.
És ő, mint, Neel, van ütött elég jó web design.
Meg tudom csinálni a HTML.
Tettem ezt a kis, Új szerkesztés Facebookon.
Van egy új ötletem, hogyan kellene stílus Facebook.
És itt van.
Pont itt.
Íme néhány példa kód.
Szóval ezt hívják Fancybook.
>> Van néhány állapotáról.
Van Nemo, Mike Kosowski, ***-- három állapotáról.
És akkor mi van egy lista online barátok jobbra alatta.
Szóval ő megcsinálta a házi feladatát.
Tudja, egy kicsit Bootstrap, ő tette a lista nézetben,
amit tett egy kis HTML.
Így hát a weboldalt.
De ő, mint, Neel, én nem megérteni reagáló dizájn egyáltalán.
Van szakértők, akik segíthet nekem, hogy?
És szerencsére, akkor most szakértők reagáló design.
>> Szóval mit mondott nekem az volt, hogy akar Fancybook hogy néz ki.
Nagyon kis eszköz, mint egy telefon, mindent
kell egymásra, mint itt.
Szóval van az idővonalon előre, fel tetején, majd
Neked kellene Chat alján.
De egy tabletta vagy egy közepes készüléket, akkor legyen fele-fele,
mint az idővonalon kell fele, és a fenti beszélgetés barátok
kell lennie, a másik felét.
>> Aztán egy laptop, az idővonal vegye fel háromnegyede
majd a chat fedezeti kell vegye fel a másik egynegyed.
És így ő, mint, Neel, én ezt ide a kódot, de nem reagál.
Azt kell, hogy így viselkedjen.
Szóval a kihívás, hogy Ön adja ezt a kódot here--
ha frissíteni a CodePens, látni fogod ezt.
Vagy ha csak be a kódot A kihívás-2, látni fogod ezt.
>> Itt van ez a példa kódot.
Látni fogod, néhány XXXS.
Azt akarom változtatni a XXXS, oly módon, hogy Az idővonal és a listát a barátok
követi ezeket specifikációk itt.
Ne aggódj, mi belsejében az idővonalon most.
Mi lesz, hogy a következő lépésben.
De most, lássuk, ha megkapjuk ezeket a dolgokat, hogy feldarabolja, mint ez.
Tehát ennek értelme?
Tehát ha otthon, szünetelteti a videót, és próbálja
hogy a weboldal nézd reagál, mint ez.
Ha itt, hogy mint két, három perc.
Nyugodtan beszélgetni a szomszéd, és próbálja meg, és rögzíti Mr. Zuckerberg
reagáló tervezési probléma.
Ha bármilyen kérdése van, nyugodtan szólj.
Jól érzi magát?
Kész?
Szép.
>> Közönség: [hallható].
NEEL MEHTA: Mi?
>> Közönség: jó vagyok.
>> NEEL MEHTA: Ó, jó.
Szép.
Közönség: A dolog A 12, van az, hogy Bootstrap
kezeli egy adott helyet a képernyőn, mint 12 egység között, majd elosztja fel?
Pontosan hogyan működik a arányosítási munkát erre?
>> NEEL MEHTA: Igen.
Tehát a kérdés az, hogy hogyan nem az adagoló
Munkahely Bootstrap, ugye?
>> Közönség: Igen.
NEEL MEHTA: Tehát, ha van egy div class = "sort",
nem számít, milyen nagy a képernyő, Bootstrap kapsz 12 egység
az azonos méretű, hogy vegye fel, hogy sok méretét.
Tehát col 1, mindig 8,33% A méret a képernyő,
hogy ez ilyen széles vagy azt, hogy ez széles.
És így, természetesen, egy kisebb képernyőn, minden oszlop kisebb.
Még mindig van 12 oszlop széles, ez egy kisebb.
Tehát ez rajtad múlik, hogy győződjön meg arról, hogy a dolgok vesz fel több oszlopot,
arányosan, hogy kompenzálja e helyhiány.
Ennek van értelme?
>> Közönség: Igen.
Köszönöm.
NEEL MEHTA: Jó kérdés.
Közönség: egy nagy képernyőn is van
Az idővonal vegye fel háromnegyede?
>> NEEL MEHTA: Igen.
NEEL MEHTA: Hogyan srá*** magad?
Jó?
Hűvös.
Úgyhogy jöjjön vissza.
És próbáljuk meg kijavítani ezt a részt Mr. Zuckerberg honlapján.
Tehát a határidők akár itt, A felső, és a listát a barátok
alján.
És így már csak meg kell rendelni oszlopok, a méretre arányos,
minden ilyen.
Tehát ez az első *** az idővonalon.
Milyen osztályok csinálni teszünk itt?
Mit srá*** hozott ide?
Tehát ne feledd, egy nagy képernyőn, szüksége hogy vegye fel háromnegyede a szélessége.
És akkor mi van stílusa adna neked?
A nagy képernyőn, három negyedévében a szélessége.
Mit osztályú tudjuk használni ott?
Közönség: Szóval csak lesz szerkesztésével, hogy az első esetben az osztály.
NEEL MEHTA: Egyelőre.
Igen.
>> Közönség: Nem vagyunk szerkesztése egyes, egyedi jellemzője az idővonal?
NEEL MEHTA: Most nem, legalábbis.
Szóval ez az egész dolog egy blokk.
Mi csak változik a tervezése a blokk.
Tehát itt mi col-lg-9, mert kilencben 12 széles nagy képernyőn.
És akkor egy közepes képernyő, hány oszlop kapok?
Közönség: Ez állítólag hogy fele-fele.
NEEL MEHTA: Így van.
Szóval hány van?
>> Közönség: Tehát hat.
NEEL MEHTA: Hat.
És akkor extra kicsi kell be-- ha veszi fel a teljes szélességében a sorban,
Hány legyen?
Közönség: 12.
NEEL MEHTA: 12.
Igen.
És most mennünk kell megváltoztatni ezt a többinek,
így veszi fel a többi helyet.
Tehát col-lg--
Közönség: Ez lesz foglalja el a teljes képernyőt?
NEEL MEHTA: Tart negyede A képernyő nagy berendezés,
Ahogy azt itt.
>> Közönség: Három.
>> NEEL MEHTA: Három.
És akkor col-MD-6, hogy fel a többi helyet.
col-XS-12.
Tehát most van az idővonalon megkezdéséről háromnegyede
Az oldal a nagy képernyőn majd egynegyede az oldalon.
És akkor, ha mérete a képernyő le, Meg kell átméretezni kell.
Szóval ez halmozott most, egy nagyon kis képernyőn.
És ha méretű, hogy egy kicsit, úgy kell pontosan fele-fele.
Így tettünk, hogy eddig.
Nagyon király.
És így nem fog a Más része a kihívásnak.
Megteheti, hogy magad.
De alapvetően, meg kell próbálja, és ezeket a reagáló
mint well-- hogy az idővonalon tételek magukat, érzékeny.
Tehát most már ment keresztül Minden, amit tudnod kell
a reagáló oldalán Bootstrap.
Bármilyen kérdése van reagáló design Bootstrap
és melyiket hogyan kezdjen csinálja ezt?
Igen?
>> Közönség: Ez hasonló, ha volt egy beágyazott videó
és azt akartuk, hogy ellenőrizzék a skála, amelyen a videót was--
a méret a videó haladva laptop és a telefon.
NEEL MEHTA: Igen.
Több vagy kevesebb.
Te volna, hogy elmondja a videót vegye fel annyi helyet, mint ez adott,
ami egy kicsit bosszantó néha.
De az alapvető ötlet ugyanaz.
A videó, mint bármilyen más tárgy, Az oldal, mint egy gomb, vagy bármi,
amíg használja a oszlopok és a sorok,
akkor adjon meg egy bizonyos mennyiségű helyet.
És így egyre azt, hogy tartsák tiszteletben, hogy van egy Más kérdés, mert, mint a YouTube
beágyazza egy bizonyos, preferált méret.
De elméletileg Legalábbis ez működni fog.
Hűvös?
>> Közönség: Gondolom akkor, A képre ugye ténylegesen
kell, hogy különböző változatai ugyanaz a kép különböző méretekben
A laptop versus iPhone?
Igen A kérdés az, hogy meg kell Van olyan képeket, melyek reagálnak is.
És valóban, amit tehetünk, hogy.
Azt hiszem, ez a CSS-t.
De Bootstrap lehetővé Ön is ezt tenni.
Akkor lehet reagálni a képeket.
Akkor már a képek átméretezése méretének megfelelően a lap.
És van egy nagyon új dolog, HTML5, a legújabb verzió HTML,
és CSS3, a legújabb változata CSS, amely
akkor ismét kérni különböző képek alapján a képernyő mérete te a.
Általában ez elég jó, hogy csak hogy a képeket csak zsugorodik, nő
Ugyanakkor nagy lennie kell.
De tudod, ha azt szeretné, az, egy 32 32
nagyon kis képernyők, és 64 64 egy nagy képernyőn,
majd azokat szolgálja szelektíven.
Meg tudod csinálni.
Ez kész néhány embert.
Ez még mindig elég élvonalban.
De rövid válasz, érzékeny images-- Bootstrap képes megmenteni a napot ott.
Hűvös?
>> Közönség: Köszönöm.
>> NEEL MEHTA: Akkor most beszélnek igazi böjt, hogyan
hogy ezt a saját weboldal.
Tegyük fel, hogy azt szeretné, hogy a saját honlapján a Bootstrap.
És úgyhogy csak most séta össze.
Tegyük fel, hogy csak egy hagyományos HTML oldalt.
Nyugodtan kövesse végig függetlenül az érintett szövegszerkesztő.
Szóval csak néhány HTML oldalt.
Meg tudjuk csinálni! DOCTYPE html.
Ez is html, oldalunkat.
Semmi új.
Mi már ilyet.
Tehát itt van a mi HTML és tudunk rakni cucc benne van.
Mi lehet a gombot.
És mint már mondtam, ez a nem feltétlenül fog működni.
Miért lehet ez nem működik?
Miért nem kapjuk meg Szép, színes gombot?
>> Közönség: Mivel nem kapcsolják össze A Bootstrap projekt vagy a fájlt?
NEEL MEHTA: Igen.
Helyes.
Mert Bootstrap-- ez csak egy divatos CSS fájlban.
Ez egy sor stílusok csatolták a elemet.
Itt már mondtam, hogy mi szeretné használni ezt a stí***.
Megyek méretű, hogy egy kicsit.
Már mondtam, hogy szeretnénk használni ezeket a stílusokat, de soha nem
Mondtam, hogy mi a stílus.
És ez az, amit a kérdést a korábbi volt.
Ez a válasz, hogy.
Meg kell találnunk a módját, hogy a stílusok és bevonjuk őket oldalon valahogy.
És így rendszertöltőt megmutatják, hogyan kell csinálni.
>> Tehát, ha megy a tetejére Itt, első lépések.
Van különböző módon lehet letölteni.
Ez lehet, hogy nem sok értelme feltétlenül.
Bootstrap-- ezt tudatja megragad a CSS fájlt magát.
És akkor azt felvette a saját oldalán.
Forráskód, ha azt szeretné, nyúlni a magad által.
Nem kell ezt igazán.
Sass nyelven hogy lefordítja a CSS-t.
Gondold azt, hogy egy preprocesszor.
Hasonlóan PHP egy előfeldolgozó a HTML, Sass elõfeldolgozót CSS.
Tehát ha azt szeretnénk, hogy csináld Így, ha képes erre.
>> A legegyszerűbb mód a CDN, vagy tartalomszolgáltató hálózat.
Ez egy weboldal, amely csak szolgál egy példányát Bootstrap
Nagyon gyorsan meg tartalmazza a saját oldalon.
Tehát itt egy példa.
Elárulja neked ez a kapcsolati elem.
A kapcsolati elem mondja meg a böngészőnek, hogy bármilyen fájlt itt tárolja
és tartalmazza azt a honlapunkon.
És ebben az esetben, ez A Bootstrap CSS fájlban.
Ezért most is csak másolja az URL-, vagy hogy a szöveg, és mi dobja belül
fejünkből.
>> És én nem indul az oldalon erre, de bízom abban, hogy ez működik.
A link lesz akkor a CSS-t.
Tartalmazza azt a oldalt, és akkor lesz
tudja használni az összes Bootstrap osztályok, amit ismerünk és szeretünk.
Ha azt szeretnénk, hogy tartsa a helyi és megvan a saját fájlrendszer
ahelyett, hogy menjen Az internet fogd meg,
mint ha azt szeretnénk, hogy használja az oldalt offline
akkor a letöltés opciót.
De a legtöbb, felhasználva a CDN elég gyors, mert így,
ez folyamatosan aktualizálni az Ön számára is.
Meg kell manuálisan frissíteni sem.
Van értelme?
>> Szóval egy csomó eszköz lesz ez a beépített alapértelmezés szerint. Az Ön Pset7 és Pset8,
Hiszem rendszertöltő automatikusan tartalmazza.
És CodePen, a Például, ez már
benne, mert én hozzáadott hozzátenni, hogy a beállítást.
Tehát, ha valaha is szeretne játszani körül vele, akkor csak megy CodePen,
vagy menjen az azonosítóját, vagy bármi más.
És akkor lehet, hogy hozzáférést Bootstrap ott,
de ez nem mindig épül A alapértelmezés szerint az interneten.
Van értelme?
>> Igen.
mint ahogy egy recap-- van mint öt perc van hátra.
De mint bedugni, az új weboldalakat, akkor is Bootstrap mint ez.
És ha egyszer lesz benne, meg tudod csinálni az összes szórakoztató dolgokat itt.
Mehetsz, és akkor csak elolvas A CSS, akkor adjunk hozzá néhány jó stílus,
Önnek alkatrészek mint a gombok,
és a táblákat, és a lista tétel, hogy mi említette.
Van néhány nagyszerű JavaScript plugin, amit érdemes felfedezni.
Hozzáteszik, néhány hűvös interaktivitás a weboldalon.
Mint ez teszi a modális dialógus.
>> Szóval egy kis szórakoztató dolgokat meg tudod csinálni a Bootstrap.
Szóval azt tanácsolom neked is megy előre és használja a saját projektjeiben,
kövesse az utasításokat vagyunk Csak azt tette, hogy hogyan lehet ez,
és csak olvasni a Bootstrap, mert akkor többet megtudni, mi a teendő.
És így már ment mint ma, hogyan kell használni
A dokumentáció, amit az épület blokkok, és hogyan fogalmilag.
Tehát most a kihívás, hogy te is hogy a honlap a Bootstrap.
Menj be a docs.
És használni az eszközöket, hogy már tanultunk eddig, hogy megpróbálja feldolgozni őket
és megérteni őket.
És használja ezeket a stílusokat és szerszámok látod ott a honlapon.
És ez csak egy nagy, kísérleti folyamatban.
>> Próbáld ki egy bizonyos stí***.
Működik?
Vajon nem?
Próbálja cuccát.
Meglátjuk, mi lesz.
Ez nagyon sok önálló irányított, felfedezés folyamatát.
De ma, megtanultuk a alapokba, mi Bootstrap?
Miért működik?
Hogyan működik?
Hogyan kezdjünk neki a ez, az első helyen?
És így most, hogy mint hogy púp, akkor
képesnek kell lennie arra, hogy csináld elég simán egyedül.
>> Tehát még egyszer, az összes kód tettünk itt van.
Tehát, ha valaha is szeretne hogy egy ecsettel fel,
mint, amit egy gyors cheat adatlap minden a stílusok?
Mehetsz ebbe a mintába itt.
Van néhány példát stílusok itt.
Ha szeretné kipróbálni a kihívások ismét egyedül,
kipróbálhatja őket itt, és nézd meg a megoldásokat.
Tehát ez a link lesz szerepel a diák, amely
küldjük el Önnek természetesen.
De ez is itt.
A szünet videó, ha akarod.
Minden információ, amire szüksége van lesz itt, ezen az oldalon.
Tehát ha valakinek van bármilyen kérdése, mi is Vegyük őket a következő pár perc.
Egyébként köszönöm mindenkinek Nagyon sokat nézi.