Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Takže ahoj každý, kto sa pozerá tu
alebo sledovanie on-line, alebo vzdialene.
Moje meno je Neel, je to CS50.
A dnešný seminár je Citlivé Web Design s bootstrap.
Je to téma, ktorá je veľmi blízka môjmu srdcu.
Dúfajme, že to bude v blízkosti vášho srdca
ako aj na konci dnešného seminára.
Tak Bootstrap.
Ako mnohí z vás urobil akýkoľvek druh vývoj webových skôr?
Dobré množstvo?
Trochu.
>> Takže Bootstrap je svet je najviac populárne, front-end rámec.
Používa sa by-- som zvolená Pár náhodných websites--
Lyft, Newsweek, a Vogue.
Ich využíva rad internetových stránok.
Je to rámec, web design, ktorý vám umožní, aby vaše webové stránky
tak krásne a citlivý.
A ja pôjdem po nich dva pojmy tu.
Krásne.
Takže máte normálnu webové stránky na ľavá, ktorý je vyrobený len HTML.
Ste sa naučili HTML v triede a v sekcii na dĺžku.
Bootstrap je spôsob, ako vaše webové stránky krásna.
Môžete si vziať to, čo je na ľavej strane obrazovky
a premeniť ju na to, čo je na pravej strane obrazovky s veľmi,
veľmi, veľmi málo kód.
>> Získate pekné modré tlačidlo, dostanete ozdobný, zaoblené hrany na obrazovke,
dostanete zobrazenie zoznamu, dostanete karty, a tak ďalej s veľmi malou kódom.
Je tu vlastne žiadny CSS, že musíte napísať sami.
Takže Bootstrap umožňuje majú tieto pre-postavený CSS
komponenty, ktoré môžete dať vnútri svoje webové stránky
aby to pristane, bez toho Veľmi veľa práce na vlastnú päsť.
Je to naozaj bootstrap, východiskovým bodom,
pre vývoj webových aplikácií dobrodružstvo.
A tak, keď ste len výsměšný internetové stránky,
je to veľmi dobré miesto, aby ste mohli začať.
Môžete získať dobré vyzerajúce webové stránky s veľmi, veľmi málo práce.
A skutočne, ideme to urobiť sami
v priebehu asi päť minutes-- počas 10 minút.
Takže je to celkom jednoduché aby niektoré skvelé webové stránky.
Takže to je prvá časť.
>> Druhý part-- citlivý.
Ľudia v dnešnej dobe, nie len prístup na web na svojich laptopoch.
Vlastne, od roku 2014, stále viac ľudí prístup k internetu prostredníctvom mobilných zariadení,
ako telefóny, alebo tablety, alebo služby, alebo tak ďalej, než webové stránky.
A webové stránky sa už tradične navrhnutý s notebookmi alebo stolové počítače
na mysli.
A tak sa webové stránky sú často nie sú veľmi dobre hodí do vášho telefónu.
Ak ste niekedy navštívili harvard.edu v telefóne,
je to trochu nepríjemné skúsenosť, že jo?
To preto, že to nie je citlivý.
Snažíme sa, aby webové stránky, ktoré sú citlivé,
ktoré reagujú na veľkosti ľudí obrazovky.
>> Takže ak je to telefón, je to ísť na telefóne.
Pokiaľ sa jedná o tablety, je to ísť na tabletu.
To upravuje, aby zodpovedal displej, ktorý je používaný.
A tak Bootstrap tiež poskytuje niektoré Veľmi, veľmi užitočné nástroje pre to.
A budeme diskutovať, že rovnako.
Takže znova, tam sú dve časti Bootstrap-- krásna a zodpovednosť.
Budeme hovoriť o nich.
Po prvé, prekrásna.
A potom reagovať.
>> Takže všetko kód, ktorý sme hovoriť o today--
budeme mať veľa príkladov, veľa problémov, a tak on-- nej
všetci bývajú na tejto webovej stránke tu.
Tento snímok je to, čo sme vyslali.
Takže ak ste tu, môžete sa cítiť zatiaľ nemal napísať, že dole.
A ak sa pozeráte na diaľku, pocit zatiaľ vytiahnuť to na vašom počítači
tiež.
Budete pravdepodobne potrebovať počas Priebeh tohto seminára.
>> Takže budeme použiť webové stránky s názvom CodePen,
čo je výsledkom spoločného kódovanie Prostredie, v priebehu tohto seminára.
A CodePen-- A ja budem ukázať vám tu real fast--
to vám umožní písať HTML spolupracovať.
Dokážem napísať to, môžem poslať na vy, vy môžete upraviť.
Aj keď ste diaľkový, vás stále prístup, aby to tak.
Môžete zadať kód HTML u top a bude to automaticky
sa prevedie na webová stránka na dne.
Takže je to spôsob, ako pre vás rýchlo vyskúšať kód
bez toho aby ste museli robiť akékoľvek veci na IDE, alebo svoje vlastné internetové stránky,
alebo čokoľvek iného.
>> Tak choďte do toho a vytiahnuť to webové stránky, ak ste diaľkový
alebo ak ste tu, najmä ak ste vzdialený.
is.gd/cs50boostrap.
Žiadne čiapky, žiadne podčiarknutie, proste nič.
Takže tí z vás, ktorí sú tu, daj mi palce
keď ste vytiahol up tejto webovej stránky.
Dobrý?
>> Divákov: Áno.
>> NEEL MEHTA: Takže my dostaneme sa, že v len sekundy.
Takže najprv, budeme sa dostať, ako si, aby vaše webové stránky krásna?
Budeme sa učiť, ako sa nudné, starý HTML, ako by som ťa ukázal skôr,
a zase, že do Naozaj pekné komponenty,
ako pekné widgety, pekné, farebné tlačidlá a štítky, a stoly,
a tak, za použitia Bootstrap.
Takže ak by sme všetci mohli prejsť do CodePen, ktoré ste práve zastavil.
Malo by to vyzerať trochu ako je tento.
Vyzerá to, ako to pre každého?
>> Divákov: Áno.
>> NEEL MEHTA: Ak ste diaľkový, ho by mal vyzerať takto rovnako.
Ak nie, budem skoro, ako ukážem môžete si to vyzerať takto
v budúcej časti videa.
Tak tu sme písali veľmi základné HTML,
ako druh nemáš používal vo svojej triede.
Je to veľmi jednoduchý.
Žiadne kudrlinky.
A máme nejaké veci.
Navrhli sme veľmi, veľmi základné spustenie
volajte Yalp! pomocou ktorých môžete nájsť reštaurácie v okolí,
a nájsť recenzie a smery na všetky z nich.
Je to veľmi dobrý koncept.
Je to nikdy predtým.
Je to veľmi jedinečný názov, taky.
>> Takže to, čo budeme sa snažiť urobiť, je pomôcť majiteľa
z Yalp! aby jeho internetovej stránky vyzerajú naozaj, naozaj cool.
Tak pre začiatok, majiteľ Yalp! urobil malý vyhľadávanie
box, a trochu gombík, a potom možno trochu
zvýraznené oblasti po zvýraznené reštaurácie, a potom
zoznam ďalších reštaurácií ktoré sú v tejto oblasti.
Takže môžeme len prejsť HTML kód naozaj rýchlo.
Ako pohodlné ste chlapi s HTML?
Urobili sme trochu sekcie a tiež v triede.
Decent?
>> Takže len ako rekapituláciu, HTML je všetko o tom mať
tagy alebo prvky, ktoré Povedzte počítač, ako vyložiť webovú stránku.
Takže tento h1 here-- začať h1, Vitajte na Yalp!, koniec h1-- hovorí počítači,
nakresliť veľkú hlavičku to hovorí, vitajte na Yalp!
tam vnútri.
Máme tiež formy.
Môžeme vstupy takto, textové vstupy, ktorý bude poskytovať ako textové polia
píšete.
Máte tiež tlačidlá.
Získate krásny, tlačidlo klikacie.
To nič nerobí pravdu teraz, ale dostanete tlačidlo.
Môžete mať divy, alebo deliče, k rozbiť svoju stránku do rôznych skupín.
>> Môžete mať body, Máte tlačidla.
Ak máte body, potom máte neusporiadané zoznamy, ul,
a zoznamy vnútri toho, ak.
Takže to sú veľmi základné stavebnými kameňmi webové stránky.
A skutočne, do značnej miery každý web vidíte
sa bude postavený použitie týchto rovnakých nástrojov.
Samozrejme, že nie všetky vyzerať tak zlé, pretože sme
ísť do korenie to trochu.
Tak nech je to nudný starý HTML a začiatok transformovať to do krásneho miesta
že sme práve videli pred pár minútami.
>> Takže poďme začať veľmi jednoduché.
Takže máme toto tlačidlo tu.
V bootstrap, ako sme videli, môžeme majú pekný, krásne, modré tlačidlo.
A to robí nie tým, že robí vlastné CSS.
Neexistuje žiadny vlastný CSS sem.
To vykonať pridaním triedy vašim prvky HTML.
Ak ste sa pokúsili triedy, alebo hrefs, alebo kotvy, alebo type = "text" pre inputs--
HTML prvky môžu mať tieto atribúty.
Môžu mať ďalšie informácie ktoré by vás mohli dať.
>> A tak, v tomto prípade, triedy sú atribút.
Takže by ste napísať, tlačidlo class = niečo vnútri reťazcov.
A to atribút sa povedať, počítač, to nie je žiadny, tlačidlo starý.
Je to tlačidlo, ktoré je v Táto trieda tlačidiel.
A tak Bootstrap, ak ho dať určitý štýl na svojom živle,
to bude čerpať to určitým spôsobom.
Tak som sa napísať "btn btn-primárne.
BTN byť skratka pre tlačidlá.
Všimnite si, že teraz môj Tlačidlo škaredý obrátil
do peknej, krásne, modré tlačidlo.
Vyzerá to veľmi pekné, keď sme na neho.
>> A tak čo sa stane, je, že sme mať BTN triedy a btn-trieda primárnej
na našich prvok.
A Bootstrap pôjde a povedať, OK, ja vedia, že sú tieto dve triedy.
Akýkoľvek prvok, ktorý má tieto dva triedy by mali byť vypracované takhle.
Tak to je jadro, ako sa pripojiť štýly pre prvky v bootstrap.
Práve ste pripojiť triedy k nim a to bude vážiť to, ako uzná za vhodné.
Tak tu je ďalší príklad.
V vstup, môžeme pridať trieda = "Formulár-control".
A ja vám ukážem, kde si čoskoro Môžete zistiť, aké triedy
sú k dispozícii z každého druhu prvku.
Ale trieda, ktorá sme práve pridaná má príjemné, zaoblené rohy,
to má peknú polstrovanie, má pekný, modrá žiara na to.
>> Môžeme tiež ísť do tohto formulára.
A class = "form-inline", ktorý bude Naše forma, ako by ste si mohli predstaviť, inline.
Tak vyzerá to trochu viac ako to, čo sme mali predtým už.
Takže ako sme sa ísť na štýl zvyšku stránku, nejaké otázky o tom, čo
urobil?
My jednoducho pripojené triedy našim rôznych prvkov.
A ti ukážem neskôr, ako môžete zistiť, aké sú k dispozícii triedy.
Pripojený sme triedy, ktoré majú určité štýly.
A to hovorí prehliadač Ako layout stránku pomocou
Bootstrap za predpokladu, štýly.
Prípadné otázky z publika?
>> Dobrá tak ďaleko?
Super.
Veľa problémov s Bootstrap je len
vedel, čo komponenty sú k dispozícii a ako ich používať.
A to je všetko naučil so skúsenosťami a tiež
cez čítanie dokumentácie, ktoré budeme hovoriť o tom, čoskoro.
Takže máme DIV.
Je to len nudná, stará vec.
Chceme zdôrazniť to nejako.
Takže bootstrap, existuje Mnoho dostupných komponentov.
A je to getbootstrap.com.
Je to veľmi užitočný odkaz.
Obsahuje veci jako-- Tu je návod, ako urobiť tlačidlo.
A vy môžete urobiť Nav bary, môžete etikety, môžete postupovať bary,
môžete urobiť zoznam skupín.
V podstate je to všetky druhy z vás môže zobraziť webovú stránku.
>> Tu je ten, ktorý sa budeme snažiť práve teraz.
Hovorí sa tomu panel.
Ak ste niekedy používať Google Teraz majú karty.
Alebo akýkoľvek Android zariadenia má karty.
Majú malé biele krabičky že majú veci vo vnútri nej.
A tak budeme sa snažiť a robiť že sami sa tu pomocou vec
volal panel.
Takže ak prikladáme class = "panel panel-default "k nášmu vonkajšiemu div,
potom prikladáme triedu div = - poďme stačí si prečítať túto dokumentáciu.
div class = "panel-nadpis" a potom div class = "panely telo".
Opäť platí, že sa nemusíte starať o pamätať tento kód.
To bude k dispozícii on-line.
>> Tak sme to urobili a teraz náš nudný, starý div sa obrátil do tohto krásneho, malé karty.
Má pekné polstrovanie, to má hranice, vyniká
od zvyšku časti stránky čo je celkom v pohode.
Tak poďme dovnútra a zmeniť Get Tlačidlo smery vyzerať pekne.
Kto v publiku chce povedať mi, čo sa dá robiť na tlačidlo
aby to vyzeralo pekne pomocou Bootstrap?
Ano?
>> Divákov: Mohli by sme pridať triedu.
A my sme mohli urobiť class = "btn btn-primárnej".
NEEL MEHTA: Áno.
Je tu veľa ďalších Farby k dispozícii pre buttons--
alebo na čokoľvek, keď na to príde.
Môžeme si robiť, btn-nebezpečenstvo a aby bolo červené.
Tam sme ísť.
Môžeme si robiť, btn-úspech, aby sa to zelená.
Môžeme si robiť, btn-info-- je tu partia vecí, ktoré sú vám k dispozícii.
Takže mám malú výzvou pre vás teraz.
Takže je tu ešte jedna vec, že som opustil un-štýlu.
Tento top reštaurácie.
>> A chceme použiť vec volal skupinu zoznamu ju v štýle.
Takže moja výzva pre vás je ísť na getbootstrap.com--
Budem vytiahnite ju sem.
getboostrap.com.
Prejdite na getbootstrap.com, nájsť sekcie, kde idú *** zoznam skupín.
A uvidíte tu teda príklad a správne triedy
ktoré môžete použiť, aby sa vaše Zoznamy do týchto krásnych zoznam skupín.
Tie sú spracované príklady príkladov kódu, čo
Kód použijete, čo HTML kód ktorý používate, a čo to výstupy.
>> Takže moja výzva k vás-- pokračovať getbootstrap.com,
nech už ste tu, alebo doma, a pokúsiť sa pridať štýly na túto UL
aby to vyzeralo pekne.
A používať štýl v zozname skupiny.
Ak chcete trvať pár minút, a hľadať v dokumentácii,
Skúste tento sami?
Vzhľadom k tomu, ako robíte vývoj webových aplikácií, si uvedomíte, veľa svojej práce
sa bude čítať táto dokumentácia.
Takže si myslím, že je dobré sa zoznámiť so s tým, ako čítať dokumentáciu,
ako prísť na to, čo je kde, aký kód príkladov, ktoré môžete použiť,
čo môžete využiť.
>> Takže znovu, getbootstrap.com, prejdite na kartu Súčasti
a potom prejdite do zoznamu skupiny.
A uvidíte príklady kódu, ktoré môžete použiť, aby vaše HTML fit to.
Takže trvať niekoľko minút a vyskúšať a preskúmať sami,
nech už ste tu, alebo doma.
Ak ste doma, video pozastaviť, Možno, a skúste si to sami.
Ak ste tu, keď idete do našej website-- ak aktualizovať stránku,
uvidíte to tam.
Tento veľmi rovnaký kód je jednoducho pridávať nové štýly práve tam.
Takže trvať niekoľko minút.
Dajte mi vedieť, kedy sa cítite dobre o tom, alebo keď ste úplne stratený.
Znie to dobre?
Super.
Quick stranou pre tých z vás, doma, zatiaľ čo čakáme,
ak idete k serveru GitHub že som dal až pred pár šmykľavky,
smerom k začiatku videa, Mám GitHub repo, úložisko,
Pre tie reči.
Všetky tieto príklady kódu, že budeme hovorí o sú uložené priamo tu.
Takže ak idete spochybniť-1.html, toto je o kód, ktorý sme práve teraz
na našich CodePen.
Takže si môžete jednoducho ísť dopredu, a kopírovanie to, a vložte ho do svojej vlastnej CodePen.
A to spôsobom môžete držať krok s tým, čo tu robíme.
Takže majú túto stránku otvorenú rovnako dobre ako my prejsť zvyšok semináre.
Opäť platí, že chcete, aby to vyzeralo ako to, čo ste pozri dole v spodnej časti obrazovky
tam.
Cítim sa dobre?
Solid.
Počkajme pre všetky ostatné, aby skončiť s tým, čo robia.
>> Ano?
>> Divákov: Predpokladajme, že som chcel použiť Bootstrap na home--
NEEL MEHTA: Áno.
Publikum: Vidím, na webových stránkach, Začíname stránku.
Dávajú mi možnosti Bootstrap, zdrojový kód, alebo Sass.
Ktorý z nich to chcem?
>> NEEL MEHTA: Áno.
Takže otázka je, ako si získať začali používať Bootstrap sami?
Proste sa to stane, aby magicky pracovať tu.
Takže keď máme čas koniec semináre,
Ja vám ukážem, ako môžete si ho na svoje vlastné webové stránky.
Rovnako ako tu, som vlastne vložiť niektoré nastavenia, ktorá
budú mať automaticky ho naložený, ale budem
ukázať, aby si to urobil z poškriabaniu na vašich vlastných webových stránkach.
>> Divákov: Ďakujem.
>> NEEL MEHTA: Áno.
Dobrá otázka.
Cítim sa dobre?
Cítim sa dobre?
Super.
Takže, kto ma chce, ako vyrobený povedať tá vec vyzerať pekne a Boostrappy?
Aký je prvej triedy sme sa pridať do UL?
Divákov: class = "list-group".
NEEL MEHTA: Áno. list-group.
A potom to, čo dávame LIS?
Niekto iný?
Publikum: A potom, po že class = "list-group-item".
>> NEEL MEHTA: Áno.
>> Divákov: A je to rovnaké pre ďalšie.
>> NEEL MEHTA: Li class = "list-group-item".
A je to.
Máme krásny zoznamu skupín, rovnako ako sme očakávali.
Takže tam idete.
Za 10 minút sme urobili to nuda, starý Yalp! strana
vyzerať pekne a profesionálne.
A to je len začiatok.
Takže teraz, že máte pocit, dobre o tom, poďme
jednoducho ísť dopredu a hovoriť o tom, Pár viac zložiek, ktoré
by mohlo prísť vhod ako vy ísť v celom svojom dobrodružstve.
>> Samozrejme, je tu veľa z nich tu.
A teraz, že ste sa dozvedel, ako to urobiť zoznam skupín,
môžete do značnej miery naučiť si, ako to urobiť niektorý z nich.
Ale, samozrejme, nech to jednoducho skúsiť a urobiť pár viac sami,
Len tak budete mať pocit, pre ako sa môžete použiť.
Ja som jednoducho ísť na tento príklad tu.
Opäť platí, že kód, ktorý som práve vložili tu je k dispozícii priamo tu.
Tak neváhajte a vytiahnite ju ***.
>> Takže sme už prešli niekoľko týchto príkladov.
Takže máme tlačidla, ktoré sme už videli, ako to urobiť.
Môžeme tlačidla väčšie.
Tlačidlom class-- to ide, BTN BTN-lg a btn-default robí to biele.
Tak to je náš tlačidlo väčšia než by inak mohol byť.
To by mohlo prísť vhod, ak máte veľké tlačidlo alebo tak niečo odoslať.
Videli sme príklad zoznamu skupín, sme videli príklad formulára.
>> Veľmi dôležitá je ikony.
A ikony sú spôsob, ako pridať zaujímavé veci, ako zaškrtnite
značky, alebo plusy, alebo priateľ ikony alebo reštartujte ikony,
alebo čokoľvek, aby vaše webové aplikácie.
Takže znova, keď sme na tú, súčasťou, glyphicons,
sú ikony k dispozícii pre bootstrap.
K dispozícii je vyčerpávajúci Zoznam všetkých tých tu.
Tak len ako príklad, Skúsme a pridať jeden.
>> Tak, ako sú Facebook, my sme sa snažili mať tlačidlo Pridať priateľa.
Poďme si najprv pridať nejaký štýl.
Tlačidlo class = "btn btn-úspechu".
A tam ideme.
Poďme pridať ikonu sem.
Čo ikona, myslíš, by mohlo mať zmysel, aby tu?
Vy ste pravdepodobne videli na Niektoré webové stránky alebo čokoľvek,
ale to, čo je príklad ikonu, ktorá môže ísť aj vnútri tohto tlačidla?
Neváhajte prechádzať tento názor, ak budete potrebovať inšpiráciu.
Je tu veľa užitočných tie, k dispozícii tu.
Ano?
>> Divákov: Možno glyphicon užívateľ, kto?
NEEL MEHTA: OK.
Toto.
To je celkom dobrý.
Áno.
Na Facebook, myslím, že to bude vyzerať trochu ako to.
Takže tu je návod, ako sme sa ísť o Pridanie ikon do našich stránkach.
Len Máme span-- dlani je neutrálne kontajner pre niečo.
Div je kontajner pre niečo, dlani je ďalší kontajner.
tagy Div sa konce riadkov okolo nich, rozpätie nie.
Takže tam rôzne spôsoby majúce všeobecný kontajnery.
Rovnako ako to nemá zmysel, aby to vnútri odseku alebo tak niečo.
Musíme dať Vnútri niečo hoci,
tak sme len dať vnútri rozpätia.
Takže span class = glyphicon glyphicon-user "blízko rozpätie.
A máme teraz ikony vnútri tlačidla.
>> Takže to nevyzerá úplne na rozdiel od to, čo môžete vidieť na facebook.com.
A tak to je pekné, že tieto môžu v skutočnosti byť umiestnené kdekoľvek budete chcieť.
Vo svojich hlavičky baroch, vo vašom zozname skupín.
Hocičo.
Nemusí to byť vnútri tlačidla.
Tak ako príklad, môžem dal rovnakú triedu tu.
"glyphicon glyphicon-user".
A zdá sa, rovnako tak.
Tak to icons-- môžete použiť rozpätie class = "glyphicon glyphicon-čokoľvek".
A to vám umožní pridať Ikony kamkoľvek budete chcieť.
A Ikony sú veľmi dôležitou Súčasťou robiť webové stránky vyzerať
profesionálne a dobre urobil.
Takže nepreháňajte to, ale je to často dobré vedieť.
>> Panely, znova.
Ja si len to opäť ako rekapituláciu pretože sú trochu zapojení.
Všimnite si, že v otáčať normálneho HTML
site do bootstrap-afied miesto, budete mať
pridať ďalšie štruktúru na internetových stránkach.
Napríklad, máme navyše divs tu len preto, že tí,
Je potrebné, aby sa panel.
Takže len majte na pamäti, že budete musieť mať navyše štruktúru.
Takže "panel panel-default".
Možno je to panel-header.
Myslím, že je panel-hlavičky.
Áno.
Tam sme ísť.
Takže, opäť, je naša panel.
>> Ešte jedna vec, že sme nepokrývala ešte, stoly.
Tabuľky, od východiskovej vzhľad druhu škaredé.
Ako toto.
Ale tabuľky sú, samozrejme, veľmi dôležitá časť
o tom, čo budete robiť vo vývoji webu.
V Pset7, napríklad, CS50 Financie, ktorá vyjde skoro,
budete používať veľké množstvo tabuliek.
A veľa webové dev používajú veľa tabuliek na zobrazenie informácií,
ako sú akcie, alebo skóre, alebo čokoľvek iného.
>> Takže styling tabuľky je vlastne veľmi jednoduché.
Môžete pridať triedu tabuľky na váš stôl.
A trúfam si povedať, vyzerá to celkom pekné.
Môžete robiť ďalšie veci, ako "stôl table-prúžkovaný".
A uvidíte výsledky tu.
Môžete to urobiť tabuľky ohraničený.
Je tu veľa možností, ktoré môžete.
Ale v podstate, pridanie stôl, trieda stôl,
bude vaša stoly vyzerať celkom pekné.
Tak to je v krátkosti predstaviť námety niektoré z dôležitých štýly
a komponenty budete je potrebné použiť pre bootstrap.
Takže si myslím, že zábaly up našej krásnej časti.
Akékoľvek otázky práve teraz o tom, ako aby vaše webové stránky krásna?
Ako môžete použiť tieto komponenty vo svoj prospech?
Cítim sa dobre?
Ano?
Publikum: Možno to je hlúpa otázka,
ale môžete použiť Bootstrap na Wikipédii?
Ak upravujete stránky Wikipedia?
NEEL MEHTA: Áno.
Takže otázka bola, že som editácia stránky Wikipedia,
môžem zahrnúť bootstrap štýly tam?
>> Divákov: Áno.
>> NEEL MEHTA: A tak je Bootstrap v podstate veľký CSS štýlov.
CSS štýlov len hovorí, kedykoľvek Mám túto triedu, priložte tieto štýly.
Takže v CSS štýlov pre bootstrap bude niečo ako .btn,
trieda tlačidlo, dostane ako keď zaoblený roh hranice alebo čokoľvek iného.
Takže v podstate, Bootstrap to len banda tried a veľa štýlov
určený pre tieto triedy.
Tak dlho, ako budete mať tento CSS, Tento zoznam pravidiel vo svojej stránky,
dostanete bootstrap štýl.
To je, samozrejme, závisieť na s štýly bootstrap vo vašej stránke
začať s.
>> A tak vo Wikipédii, pravdepodobne nemohol
urobiť, pretože Wikipédie nemá Bootstrap v ňom.
Ale keby to predsa malo Bootstrap, by pravdepodobne mohlo urobiť.
A ak by ste chceli, mohol by ste zahŕňajú, ale ktoré by mohli
rozbiť existujúce rozloženie stránky.
Ale veľmi dobrá otázka.
Môžete použiť Bootstrap všade tam, kde je v cene,
ale to nie je postavený v roku v predvolenom nastavení.
>> Divákov: Ďakujem.
>> NEEL MEHTA: Áno.
Nejaké ďalšie otázky?
Áno.
Takže nech už ste tu, alebo doma, stačí spomenúť znovu getboostrap.com--,
getboostrap.com-- je váš priateľ.
Vždy, keď používate Bootstrap, bude vám
inštrukcie o tom, ako sa dostať začal, ako používať komponenty.
Tam je nejaké chladné JavaScript plug-inov, ktoré nebudeme ísť sem,
ale sú to stojí mimo kontroly rovnako.
Takže toto je váš priateľ.
Je to len dôležité, aby si použitý k tomu, ako používať.
>> Takže poďme porozprávať trochu o Vďaka citlivé webové stránky.
Tak ako som už povedal, ľudia používali ich notebooky, ktoré používajú ich telefóny.
A ako si možno dobre predstaviť, je to veľmi odlišný veľkosť obrazovky, než to.
A tak rovnaké webové stránky že vyzerá dobre na môj telefón
sa nebude vyzerať dobre, nutne, na počítači.
Takže to, čo musíte urobiť, je aby vaše webové stránky prispôsobiť.
To sa musí prispôsobiť rôzne veľkosťou obrazovky, že je to na.
>> To má hovoriť, viem, že Som na počítač, veľký notebook, mal by som rozšíriť.
Viem, že som na telefóne, mal by som zmenšiť.
A tak Bootstrap poskytuje niektoré Veľmi, veľmi užitočné nástroje, aby to.
Tak Bootstrap Poďme si prestávku webové stránky do 12 stĺpcov.
Môžete si vytvoriť riadky a majú 12 stĺpcov.
A môžete rozdeliť tie však budete chcieť.
Môžete mať jednu veľkú vec ,, čo je 12 stĺpcov široká.
Môžete mať dve veci ktoré sú po šiestich.
Môžete to urobiť jednu vec, ktorá je štyri, ten, ktorý je dva, alebo ten, ktorý je šesť.
Môžete to urobiť tri, tri, tri, tri.
Môžete si robiť, čo členenie, ktoré chcete.
>> Takže možno vaše webové stránky potrebuje mať ľavý stĺpec je to jednu tretinu šírky.
Tak, že by boli štyri stĺpce široký a zvyšok stránky
by bolo osem stĺpcov široký.
Tak to je príklad.
Poďme vytiahnuť iný príklad.
>> Divákov: to robí vždy musí byť ešte rozdelená?
Mohol by to byť sedem, päť rozkol?
>> NEEL MEHTA: Áno.
Mohlo by to byť sedem, päť.
Áno.
Tak dlho, ako to pridá na 12, to je v poriadku.
Tak poďme späť.
Opäť platí, že kód, ktorý je Tu je k dispozícii tiež tu,
pod citlivé príkladu.
Tak som vytiahol nejaké Príkladom reagujúce kódu tu.
Takže ste to urobiť pomocou vec zvaná riadok.
Riadok je len ďalší trieda.
Je to ďalší štýl môžete pridať do vášho divs, aby im ich vlastné komponenty.
>> Takže hovoríte, div class = "riadku", aby sa riadok,
dať si 12 stĺpcov priestoru.
A potom si dať stĺpca vnútri toho.
Takže tu máme col-xs-6.
Nerobte si starosti xs.
Budeme hovoriť o tom, v sek.
Ale v podstate, máme jedno vec, ktorá je šesť široká.
Hovoríme tomu odišiel.
A tak to je ľavý box sem.
Máme jednu vec, ktorá je šesť z 12 stĺpcov široký.
A že jeden je na pravej strane.
>> no proste dáva značiek Váš div naplňte ju šedou farbou.
Takže to je to, aby sme mohli vidieť, že sú odlišné.
A tak sa jedná o prvý príklad.
Je to veľmi jednoduchý príklad, ako ste by sa používať svoje riadky a stĺpce tu.
Môžete definovať rad pomocou class = "riadok".
A potom vy class = "col-XS-6" robiť polovica, "col-XS-6" urobiť druhú polovicu.
Tu je zložitejšie príklad.
Poďme sa pozrieť na Tiny, Obrovské, Zvyšok človek.
>> Môžeme Tiny dva stĺpce široký, môžeme robiť obrovské šesť stĺpcov široký,
A zvyšok štyri stĺpce široký.
Ktorý pridáva do 12.
A tak títo skončí klenout šírka stránky.
Opäť platí, že máme riadok vonku.
Potom máme div class = "zbi-XS-2" a potom na 6, a potom sa 4.
A to bude poskytovať štruktúra pre nás.
A tak môžeme dať čokoľvek sakra chceme dovnútra sem.
Miesto Tiny, môžeme dať tlačidlo.
Tlačidlo class = "btn btn-primárnej".
A tak si všimnúť, že naša tlačidlo nezaberá celú šírku,
ale aspoň je to obmedzené k tomu veľa priestoru.
>> Tak to je všetko dobre a dobre.
Takže teraz môžeme rozísť web strana na kúsky, šírka múdry.
Dá sa povedať, chceme mať doľava stĺpec, a pravý stĺpec, a tak ďalej.
Ale my sme nešli cez ako si urobiť to reagovať.
A tak Bootstrap poďme to urobiť rovnako.
To má tieto veci zvanej zarážky.
Tak to má spôsob, ako zistiť, či ste na notebooku, ste na tabletu,
ste na telefóne horizontále, alebo ste na telefóne vertikálne.
To pozná veľkosť obrazovky.
A rozbije to do štyroch kategorie-- veľké alebo LG, ktorý je notebooky, zvyčajne.
md alebo medium, ktorá je tablety.
SM, malé.
Alebo xs, extra malé.
A tak, keď zadáte stĺpec, hovoríte,
to by malo byť šesť stĺpcov široký na extra malom prístroji.
To je dôvod, prečo sme to urobili col-xs-6.
Sme hovorí, že by mala byť šesť z 12 stĺpcov širokých
na extra malom prístroji.
A či je to niečo väčšie, budeme jednoducho východzí pomocou extra malej veľkosti.
Ak je to niečo väčšia ako Veľmi malé, bude to šiestich široká.
A tak môžeme využiť tieto, aby sa z našich stĺpcov
zaberajú rôzne množstvo stĺpce na základe veľkosti obrazovky.
Poďme sa na tento citlivý zmena veľkosti.
Takže máme stĺpce.
A hovorí: "col-LG-6 col-xs-12".
Takže vzhľadom na to, čo viete, tak ďaleko, čo myslíš
myslíte, že sa chystá stane na veľkom plátne?
No, je to trochu vzhľadom k tomu, cesta, ale to, čo robiť
si myslíte, že to bude vyzerať Páči sa mi na veľkej obrazovke?
A prečo je to?
>> Divákov: Je možné, že na veľkej obrazovke, to je
bude trvať len časť plného priestoru?
Rovnako ako polovicu, ale myslím, že?
>> NEEL MEHTA: Áno.
>> Divákov: A na menšie obrazovky, bude to
prevziať celú obrazovku, 12.
NEEL MEHTA: Áno.
Doprava.
Tak ako príklad, poďme stačí sa pozrieť tu.
Áno.
Takže na čokoľvek, čo je LG alebo bigger-- takže môj počítač sa stane,
byť lg, pretože je to pekný wide-- to bude
to vedľa seba, pretože to je col-lg-6.
Takže, pretože je to na veľké, to robí to šesť stĺpcov široká a šesť stĺpcov široký.
Pozrime sa, čo sa stane, keď aby to do menšieho jeden.
Ja som jednoducho ísť un-plnom rozsahu tohto.
A budem zmenšiť na obrazovku.
Chystám sa zmenšiť obrazovku, tak to Vyzerá ako ja na menšie zariadenia.
Takže budem zmenšovať to takto.
>> A ajhľa.
To je teraz skladaný pretože teraz sme šli
z veľkej to-- je to pravdepodobne navyše malá veľkosť obrazovky.
A tak sa teraz hovorí, OK, nie sme vo veľkom, sme v extra nízkej krajine.
Takže budeme používať navyše malá veľkosť.
A ideme XS-12, XS-12.
Takže to bude na seba.
A všimnite si, že je tu vec zvaná zarážku.
Zarážku je miesto, kde si robil prechod
od extra malé až malé, malých až po veľké, a tak ďalej.
>> Takže len si všimnite, že, ako som to snímku out, nakoniec dostanete do bodu,
kde budú skákať byť vedľa seba.
A je to.
Takže tam zarážku práve tam.
Takže môžeme robiť to ešte zložitejšie.
Teraz môžeme povedať, tieto veci by mala byť štyri široká.
To znamená, že by trvať asi tretinu
reči o veľkých zariadeniach.
Na strednej zariadení by sa mal vziať polovicu obrazovky, pretože je MD-6.
Na veľmi malom zariadení, to by malo trvať až 12.
A tak to vyzerá celkom prirodzené.
Proste skúsiť to pre seba.
>> Takže na veľkej obrazovke, sú to štyroch široký.
Zmenšiť to trochu.
A oni sú teraz šesť široká.
Takže to je šesť, šesť, šesť.
Zmršťovacia to ešte viac a potom budú úplne na seba.
Takže to, napríklad, má zmysel, ak máte karty, ako sú novinky kariet,
Napríklad v prípade, ak je to na veľmi veľkej obrazovke,
je to v poriadku, ak máte niekoľko vedľa seba pretože by všetci dostali dostatok priestoru.
Ale oni potrebujú mať dostatok priestoru.
A tak na menšie obrazovky, by ste chceli, aby im
viac priestoru, proporcionálne, stránky.
>> Takže ako príklad reálneho sveta, povedzme, že máme Twitter.
A máme textové pole, takže môžete pípanie na boku.
A máme zoznam trendy Témy na pravej strane.
Takže na veľkej obrazovke, mali by sme nechať byť vedľa seba,
takže ich môžete vidieť na sklo.
Ale v menšom rozsahu, by sme mali urobiť, 12 a 12,
tak, že témy Smerovanie sú pod tweet oblasti.
Vzhľadom k tomu, tweet oblasť je Hlavná vec, a na malej obrazovke,
témy Trendy nie ohľadu na to, docela ako veľa.
A tak sme sa dať ich priamo pod, tak že oni môžu obaja získať dostatok priestoru.
Urobiť tak ďaleko zmysel?
>> Divákov: Áno.
>> NEEL MEHTA: Solid.
Tak to je všetky príklady mám tu.
Skúsme urobiť výzvu.
Takže znovu, to je výzva-2.html pre tí z vás, ktorý nasleduje po doma.
Takže môj kamarát, Mark Zuckerberg, za mnou prišiel druhý deň.
A on to ako Neel, mám dostal celkom dobré na web design.
Môžem robiť HTML.
Urobil som to málo, nový upraviť na Facebook.
Mám novú predstavu o tom, ako mali by sme štýl Facebook.
A je to tu.
Práve tu.
Tu je niekoľko príklad kódu.
Tak sa volá Fancybook.
>> Máme nejaké aktualizácie stavu.
Máme Nemo, Mike Kosowski, ***-- tri stav aktualizácie.
A potom máme zoznam Online priatelia priamo pod ním.
Tak urobil svoju domácu úlohu.
On vie trochu o Bootstrap, on robil zobrazenie zoznamu,
urobil trochu HTML.
Takže on má webovú stránku.
Ale on to ako Neel, vôbec sa mi nepáči porozumieť citlivé dizajnu vôbec.
Máte nejaké odborníkmi, ktorí mi mohol pomôcť s tým?
A našťastie, ste teraz odborníci v citlivej dizajne.
>> Takže to, čo mi povedal, bolo, že chce Fancybook vyzerať takto.
Na veľmi malom zariadení, ako telefón, všetko
by malo byť zaplnený, rovnako ako tu.
Takže máte časovú os vopred, a to až ***, a potom
mali by ste mať chatu bar v dolnej časti.
Ale na tablety alebo médiu zariadenia, by malo byť pol na pol,
ako je v časovej osi musí byť pol na zoznam Chat Priatelia
by malo byť na druhej polovici.
>> Potom sa na notebooku, časová os by mala trvať až tri štvrtiny
a potom chat zaistenia by mal zaberajú ďalšie štvrtinu.
A tak sa to ako Neel, to mám Kód tu, ale to nie je citlivý.
Je potrebné, aby takto správať.
Takže moja výzva pre vás je uvedený tento kód here--
ak osvieženie CodePens, uvidíte to.
Alebo ak stačí vložiť do kódu Na výzvu-2, uvidíte to.
>> Tu to je príklad kódu.
Uvidíte xxS.
Chcem, aby ste zmeniť xxS, tak, aby časová os a zoznam priateľov
Nasleduje tieto špecifikácie tu.
Nebojte sa o tom, čo je vnútri časovej osi pre teraz.
Dostaneme, že v ďalšom kroku.
Ale teraz, uvidíme, či sa dostaneme tieto veci rozdeliť to takto.
Takže to zmysel?
Takže ak ste doma, video pozastaviť a skúste
aby vaše webové stránky vyzerať reagovať takto.
Ak ste tu, vziať rovnako ako dve, tri minúty.
Neváhajte a chatovať so susedom, a pokúsiť, a opraviť pán Zuckerberg je
reagujúce dizajnu problém.
Ak máte nejaké otázky, neváhajte a dajte mi vedieť.
Cítim sa dobre?
Hotovo?
Nice.
>> Divákov: [Nepočuteľné].
NEEL MEHTA: Čo?
>> Divákov: Ja som dobrý.
>> NEEL MEHTA: Oh, dobre.
Nice.
Divákov: Vec, o 12, je to, že Bootstrap
zaobchádza daný priestor obrazovky as 12 jednotky doprava a potom rozdeľuje, že až?
Ako presne robí dimenzovanie prácu na to?
>> NEEL MEHTA: Áno.
Otázkou teda je, ako robí dimenzovanie
pracovať pre bootstrap, že jo?
>> Divákov: Áno.
NEEL MEHTA: Takže kedykoľvek Máte div class = "riadku",
bez ohľadu na to, aký veľký je obrazovka, Bootstrap vám dá 12 jednotiek
o rovnakej veľkosti k zaberajú toľko veľkosť.
Takže v sedle 1, je to vždy 8,33% veľkosti obrazovky,
či je, že je to široká alebo že je to široká.
A tak, samozrejme, na menšie obrazovky, každý stĺpec je menšia.
Stále máte 12 stĺpcov široký, je to menšie.
Takže je to len na vás, aby sa ubezpečil, že veci zaberajú viac stĺpci,
úmerne, kompenzovať pre tento nedostatok priestoru.
Dáva to zmysel_
>> Divákov: Áno.
Ďakujem.
NEEL MEHTA: Dobrá otázka.
Divákov: Na veľké obrazovky, môžete mať
časová os trvať až tri štvrtiny?
>> NEEL MEHTA: Áno.
NEEL MEHTA: Ako sa chlapci cíti?
Dobrý?
Super.
Takže poďme sa vrátiť.
A poďme vyskúšať a opraviť túto časť webové stránky pána Zuckerberg sa.
Takže lehoty je tu, u hornej, a zoznam priateľov
je v dolnej časti.
A tak len musíme priradiť stĺpy, s dimenzovanie proporcionálne,
v každom z nich.
Takže tento prvý *** je na časovej osi.
Čo triedy máme dať sem?
Čo ste chlapci dať sem?
Takže pamätajte, že na veľkej obrazovke, je potrebné prevziať tri štvrtiny šírky.
A tak to, aký štýl by vám to?
Na veľkej obrazovke, tri štvrtiny šírky.
Čo trieda sa tam používať?
Divákov: Takže sme len bude editáciu, že prvý inštanciu triedy.
NEEL MEHTA: Pre teraz.
Áno.
>> Divákov: Nie sme editáciu každý, individuálne rys časovej osi?
NEEL MEHTA: Teraz nie, prinajmenšom.
Takže celá tá vec je blok.
Sme len zmenou projektovanie bloku.
Takže tu my sl-LG-9, pretože je to deväť z 12 široká na veľkej obrazovke.
A potom na strednej obrazovke, koľko stĺpcov by som mal dostať?
Divákov: Má to byť pol na pol.
NEEL MEHTA: Správne.
Tak koľko to je?
>> Divákov: Tak šesť.
NEEL MEHTA: Six.
A potom navyše malý mali, pokiaľ to be-- zaberá celú šírku riadku,
koľko by to malo byť?
Divákov: 12.
NEEL MEHTA: 12.
Áno.
A teraz musíme zmeniť tie ostatné,
takže zaberá zvyšok priestoru.
Takže col-lg--
Divákov: Bude to zaberajú celú obrazovku?
NEEL MEHTA: Zaberá štvrť obrazovky na veľkom zariadení,
ako sme tu ukázal.
>> Hľadisko: Tri.
>> NEEL MEHTA: Tri.
A potom col-MD-6, aby sa up zvyšok priestoru.
col-XS-12.
Takže teraz máme časovú os nástupu do tri štvrtiny
stránky v veľkej obrazovke a potom štvrtinou na boku.
A potom, ak veľkosť obrazovky dole, to by malo zodpovedajúcim spôsobom zmeniť veľkosť.
Takže to zaplnený teraz, na veľmi malom rozsahu.
A ak by sme dimenzovať to trochu, mali by byť presne pol na pol.
Takže sme urobili, že tak ďaleko.
Husté.
A tak nebudeme robiť ďalšia časť problému.
Môžete to urobiť sami.
Ale v podstate, musíte pokúsiť sa a urobiť tieto citlivý
as well-- urobiť časovú os položky, samy o sebe, citlivé.
Takže teraz sme prešli všetko, čo potrebujete vedieť
o citlivé strane Bootstrap.
Máte otázky na citlivý dizajn s bootstrap
a ako môžete ísť o tom, že?
Ano?
>> Divákov: Je to podobné ako v prípade, sme mali vložené video
a my sme chceli kontrolovať meradlo, pri ktorom sa video was--
veľkosť videa ísť od prenosného počítača do telefónu.
NEEL MEHTA: Áno.
Viac alebo menej.
Musel by ste povedať video na zaberajú toľko priestor, ako je to s ohľadom,
čo je trochu nepríjemné občas.
Avšak základná myšlienka je rovnaká.
Video, ako každý iný objekt v stránky, ako tlačidlá alebo čokoľvek,
ako dlho, ako budete používať stĺpce a riadky,
môžete dať to určité množstvo priestoru.
A tak ako sa to ku cti, že je Inou otázkou pretože rovnako ako YouTube
vloží mať určitú, preferovanú veľkosť.
Ale teoreticky aspon by to fungovať.
V pohode?
>> Divákov: Myslím, že potom, pre obraz, sa vlastne
musí mať rôzne verzie rovnaký obrázok v rôznych veľkostiach
pre notebook proti iPhone?
Jo Otázkou je, potrebujeme majú obrázky, ktoré sú citlivé aj.
A skutočne, môžete to urobiť.
Myslím, že je v CSS.
Ale Bootstrap umožňuje vás k tomu, že rovnako.
Môžete mať citlivé obrázky.
Môžete mať vaše obrázky veľkosť v závislosti na veľkosti stránky.
A je tu veľmi nová vec HTML5, najnovšia verzia HTML,
a CSS3, najnovšie verzia CSS, ktorý
vám umožní požiadať o rôznych obrazov v závislosti na veľkosti obrazovky, ktorú ste na.
Zvyčajne je to dosť dobré len majú na disk len zmenšiť alebo rast na
ale veľká, že potrebuje byť.
Ale môžete, ak chcete, k, mať jeden 32 o 32
pre veľmi malé obrazovky, a 64 o 64 na veľkej obrazovke,
a potom slúži tým selektívne.
Dokážeš to.
Je to hotovo niektorými ľuďmi.
Je to ešte celkom ostrie.
Ale krátka odpoveď, citlivý images-- Bootstrap môže deň tam uložiť.
V pohode?
>> Divákov: Ďakujem.
>> NEEL MEHTA: Takže poďme hovorí naozaj rýchlo o tom, ako
aby si to vo svoje vlastné webové stránky.
Povedzme, že chcete, aby vaše vlastné webové stránky pomocou Bootstrap.
A tak to proste len nech prejsť cez to spoločne.
Povedzme, že stránky ako práve normálny HTML stránky.
Neváhajte a sledovať spolu v bez ohľadu na váš obľúbený editor.
Takže sme jednoducho nejakú HTML stránku.
Môžeme to urobiť! DOCTYPE html.
To je tiež html, naša strana.
Nič nové.
Urobili sme to predtým.
Takže tu máme HTML a môžeme dať veci dovnútra tu.
Môžeme mať naše tlačidlo.
A ako som už povedal skôr, tento nie je nevyhnutne bude fungovať.
Prečo by to mohlo fungovať?
Prečo nie dostať naše pekné, farebné tlačidlo?
>> Divákov: Pretože sme nemali prepojiť k projektu Bootstrap alebo súbor?
NEEL MEHTA: Áno.
Správne.
Vzhľadom k tomu, že je to Bootstrap-- len fantázia CSS súbor.
Je to rad štýlov, ktoré sú pripojené k prvkom.
Tu sme povedali to, že my chcieť používať tieto štýly.
Budem veľkosť, že až trochu.
Povedali sme to chceme použiť tieto štýly, ale nikdy sme
Povedal to, aké štýly sú.
A to je to, čo vaše Otázka od predtým bol.
To je odpoveď na túto otázku.
Musíme nájsť spôsob, ako dostať štýly a zahrnúť ich do našej stránke nejako.
A tak bude Bootstrap ukazujú nám, ako to urobiť.
>> Takže ak idete na vrchol tu, Začíname.
Je tu rôzne spôsoby, ako ho stiahnuť.
To by nedávalo zmysel nutne.
Bootstrap-- to umožní urvat samotného súboru CSS.
A vy ste to zahrnuté vo svojej vlastnej stránky.
Zdrojový kód je, ak chcete, zaseknúť na to sami.
Nepotrebujete to naozaj.
Sass je jazyk , Ktorý prekladá do CSS.
Ber to ako preprocesoru.
Rovnako ako PHP je preprocesor na HTML, Sass je preprocesor pre CSS.
Takže ak chcete, aby to týmto spôsobom, môžete to urobiť.
>> Najjednoduchší spôsob, ako sa pomocou CDN, alebo content delivery network.
Je to webová stránka, ktorá práve servíruje kópiu bootstrap
veľmi rýchlo pre vás zahrnúť do svojej vlastnej stránky.
Takže tu je príklad.
To vám dám tento odkaz prvok.
Odkaz element hovorí váš prehliadač, prijmú všetky súbory sú uložené tu
a zahrnúť ho do našej webovej stránke.
A v tomto prípade, je to CSS súbor Bootstrap.
Tak sme si len skopírovať túto adresu URL, alebo že text, a my ho hodiť dovnútra
našej hlavy.
>> A ja sa nespustí stránku pre toto, ale môžete veriť, že to funguje.
Odkaz sa dostanete CSS.
Zahrňte ho do svojho Stránka a potom budete
mohli používať všetky bootstrap triedy, ktoré poznáte a lásku.
Ak chcete, aby ju udržali na mieste a mať na vašom vlastnom systéme súborov
namiesto toho, aby musel ísť na internet chytiť to,
ako keď chcete použite webu v režime offline,
môžete použiť možnosť Stiahnuť.
Ale z väčšej časti, za použitia CDN je veľmi rýchly, pretože týmto spôsobom,
to je priebežne aktualizovaná aj pre vás.
Musíte aktualizovať ručne buď.
Dáva zmysel?
>> Takže mnoho nástrojov, bude mať toto postavené v predvolenom nastavení. Vo vašom Pset7 a Pset8,
Verím, že je Bootstrap automaticky hotela.
A v CodePen, pre príklad, je to už
zahrnuté preto, že som pridaný dodať, že nastavenie.
Takže ak ste niekedy chceli pohrať s ním si môžete jednoducho ísť na CodePen,
alebo ísť na vaše ID, alebo čokoľvek iného.
A vy ste mali byť schopní Prístup Bootstrap tam,
ale to nie je vždy postavená v predvolenom nastavení, na web.
Dáva zmysel?
>> Áno.
rovnako ako recap-- máme rovnako ako päť minút zostáva.
Ale ako rekapituláciu, v nových webových stránkach, môžete zahrnúť Bootstrap takhle.
A až budete mať to v cene, môžete robiť všetky zábavné veci tu.
Môžete ísť ďalej, a môžete len prezrieť CSS, môžete pridať nejaké cool štýly,
môžete mať komponenty rovnako ako tlačidlá,
a stoly, a zoznam položky, ktoré sme spomenuli.
Je tu niekoľko skvelých pluginy JavaScript ktoré budete chcieť preskúmať.
Oni pridať nejaké cool interaktivita na webovú stránku.
Podobne ako tento je modálne dialóg.
>> Takže tam je nejaké zábavné veci môžete robiť s bootstrap.
Takže moja rada pre vás je ísť dopredu a používať ho vo svojich vlastných projektoch,
postupujte podľa pokynov sme urobil, ako ho získať,
a len čítať bootstrap nasledujúcich dôvodov budete sa dozvedieť viac o tom, čo robiť.
A tak sme sa preč ***, dnes, ako používať
dokumentácie, čo budova bloky sú, a ako to je koncepčne.
Takže teraz môj výzvou pre vás je vytvoriť webové stránky pomocou Bootstrap.
Choďte do docs.
A používať nástroje, ktoré sme naučili tak ďaleko, aby sa pokúsila analyzovať ich
a porozumieť im.
A používať tieto štýly a nástroje vidíte, že na svoje webové stránky.
A to je len veľký, Experimentálny postup.
>> Vyskúšajte určitý štýl.
Funguje to?
Má nie?
Pokúste veci dohromady.
Pozrite sa, čo sa stane.
Je to veľmi self sprievodcom, objav proces.
Ale dnes, sme sa naučil samotné základy toho, čo je Bootstrap?
Prečo to funguje?
Ako to funguje?
Ako môžeme začať používať to, v prvom rade?
A tak teraz, že ste cez ten hrb, vy
by mal byť schopný to urobiť celkom hladko sami.
>> Takže ešte raz, a to tým kód sme urobili, je tu.
Takže ak ste niekedy chceli aby si oprášiť,
rovnako ako to, čo je rýchly cheat list pre všetky štýly?
Môžete ísť do tejto vzorky tu.
Máme tu nejaký príklad štýly.
Ak si chcete skúsiť výzvy znovu od seba,
ich môžete vyskúšať tu a pozrite sa na riešení.
Takže odkaz bude zahrnuté na snímkach, ktoré
bude zaslaný na vás samozrejme.
Ale je to tiež tu.
Ak môžete video pozastaviť, ak chcete.
Všetky informácie, ktoré potrebujete, je Bude tu, na tejto stránke.
Takže ak niekto má nejaké otázky, môžeme vezmite ich na ďalších pár minút.
Inak ďakujem vám všetkým moc za sledovanie.