Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Takže ahoj každý, kdo se dívá zde
nebo sledování on-line, nebo vzdáleně.
Mé jméno je Neel, je to CS50.
A dnešní seminář je Citlivé Web Design s bootstrap.
Je to téma, které je velmi blízká mému srdci.
Doufejme, že to bude v blízkosti vašeho srdce
jakož i na konci dnešního semináře.
Tak Bootstrap.
Jak mnozí z vás udělal jakýkoli druh vývoj webových dříve?
Dobré množství?
Trochu.
>> Takže Bootstrap je svět je nejvíce populární, front-end rámec.
Používá se by-- jsem zvolena Pár náhodných websites--
Lyft, Newsweek, a Vogue.
Je využívá řada internetových stránek.
Je to rámec, web design, který vám umožní, aby vaše webové stránky
tak krásné a citlivý.
A já půjdu po nich dva pojmy zde.
Krásný.
Takže máte normální webové stránky na levá, který je vyroben pouze HTML.
Jste se naučili HTML ve třídě a v sekci na délku.
Bootstrap je způsob, jak vaše webové stránky krásná.
Můžete si vzít to, co je na levé straně obrazovky
a přeměnit ji na to, co je na pravé straně obrazovky s velmi,
velmi, velmi málo kód.
>> Získáte pěkné modré tlačítko, dostanete ozdobný, zaoblené hrany na obrazovce,
dostanete zobrazení seznamu, dostanete karty, a tak dále s velmi malou kódem.
Je tu vlastně žádný CSS, že musíte napsat sami.
Takže Bootstrap umožňuje mají tyto pre-postavený CSS
komponenty, které můžete dát uvnitř své webové stránky
aby to sluší, aniž Velmi mnoho práce na vlastní pěst.
Je to opravdu bootstrap, výchozím bodem,
pro vývoj webových aplikací dobrodružství.
A tak, když jste jen výsměšný internetové stránky,
je to velmi dobré místo, abyste mohli začít.
Můžete získat dobré vypadající webové stránky s velmi, velmi málo práce.
A skutečně, jdeme to udělat sami
v průběhu asi pět minutes-- během 10 minut.
Takže je to docela snadné aby některé skvělé webové stránky.
Takže to je první část.
>> Druhý part-- citlivý.
Lidé v dnešní době, ne jen přístup na web na svých laptopech.
Vlastně, od roku 2014, stále více lidí přístup k internetu prostřednictvím mobilních zařízení,
jako telefony, nebo tablety, nebo služby, nebo tak dále, než webové stránky.
A webové stránky se již tradičně navržený s notebooky nebo stolní počítače
na mysli.
A tak se webové stránky jsou často nejsou velmi dobře hodí do vašeho telefonu.
Pokud jste někdy navštívili harvard.edu v telefonu,
je to trochu nepříjemné zkušenost, že jo?
To proto, že to není citlivý.
Snažíme se, aby webové stránky, které jsou citlivé,
které reagují na velikosti lidí obrazovky.
>> Takže pokud je to telefon, je to jít na telefonu.
Pokud se jedná o tablety, je to jít na tabletu.
To upravuje, aby odpovídal displej, který je používán.
A tak Bootstrap také poskytuje některé Velmi, velmi užitečné nástroje pro to.
A budeme diskutovat, že stejně.
Takže znovu, tam jsou dvě části Bootstrap-- krásná a odpovědnost.
Budeme mluvit o nich.
Za prvé, překrásná.
A pak reagovat.
>> Takže všechno kód, který jsme mluvit o today--
budeme mít spoustu příkladů, hodně problémů, a tak on-- ní
všichni bydlí na této webové stránce zde.
Tento snímek je to, co jsme vyslali.
Takže pokud jste tady, můžete se cí*** zatím neměl napsat, že dolů.
A pokud se díváte na dálku, pocit zatím vytáhnout to na vašem počítači
také.
Budete pravděpodobně potřebovat během Průběh tohoto semináře.
>> Takže budeme použít webové stránky s názvem CodePen,
což je výsledkem společného kódování Prostředí, v průběhu tohoto semináře.
A CodePen-- A já budu ukázat vám tady real fast--
to vám umožní psát HTML spolupracovat.
Umím napsat to, mohu poslat na vy, vy můžete upravit.
I když jste dálkový, vás stále přístup, aby to tak.
Můžete zadat kód HTML u top a bude to automaticky
se převede na webová stránka na dně.
Takže je to způsob, jak pro vás rychle vyzkoušet kód
aniž byste museli dělat jakékoliv věci na IDE, nebo své vlastní internetové stránky,
nebo cokoliv jiného.
>> Tak jděte do toho a vytáhnout to webové stránky, pokud jste dálkový
nebo pokud jste tady, zejména pokud jste vzdálený.
is.gd/cs50boostrap.
Žádné čepice, žádné podtržení, prostě nic.
Takže ti z vás, kteří jsou tady, dej mi palce
když jste vytáhl up této webové stránky.
Dobrý?
>> Diváků: Ano.
>> NEEL MEHTA: Takže my dostaneme se, že v jen sekundy.
Takže nejprve, budeme se dostat, jak si, aby vaše webové stránky krásná?
Budeme se učit, jak se nudné, starý HTML, jako bych tě ukázal dříve,
a zase, že do Opravdu pěkné komponenty,
jako pěkné widgety, pěkné, barevné tlačítka a štítky, a stoly,
a tak, za použití Bootstrap.
Takže pokud bychom všichni mohli přejít do CodePen, které jste právě zastavil.
Mělo by to vypadat trochu jako je tento.
Vypadá to, jako to pro každého?
>> Diváků: Ano.
>> NEEL MEHTA: Pokud jste dálkový, jej by měl vypadat takto stejně.
Pokud ne, budu brzy, jak ukážu můžete si to vypadat takto
v budoucí části videa.
Tak tady jsme psali velmi základní HTML,
jako druh nemáš používal ve své třídě.
Je to velmi jednoduchý.
Žádné kudrlinky.
A máme nějaké věci.
Navrhli jsme velmi, velmi základní spuštění
volejte Yalp! pomocí kterých můžete najít restaurace v okolí,
a najít recenze a směry na všechny z nich.
Je to velmi dobrý koncept.
Je to nikdy předtím.
Je to velmi jedinečný název, taky.
>> Takže to, co budeme se snažit udělat, je pomoci majitele
z Yalp! aby jeho internetové stránky vypadají opravdu, opravdu cool.
Tak pro začátek, majitel Yalp! učinil malý vyhledávání
box, a trochu knoflík, a pak možná trochu
zvýrazněné oblasti po zvýrazněné restaurace, a poté
seznam dalších restaurací které jsou v této oblasti.
Takže můžeme jen projít HTML kód opravdu rychle.
Jak pohodlné jste chlapi s HTML?
Udělali jsme trochu sekce a také ve třídě.
Slušný?
>> Takže jen jako rekapitulaci, HTML je všechno o tom mít
tagy nebo prvky, které Řekněte počítač, jak vyložit webovou stránku.
Takže tento h1 here-- začít h1, Vítejte na Yalp !, konec h1-- říká počítači,
nakreslit velkou hlavičku to říká, vítejte na Yalp!
tam uvnitř.
Máme také formy.
Můžeme vstupy takhle, textové vstupy, který bude skýtat jako textová pole
píšete.
Máte také tlačítka.
Získáte krásný, tlačítko klikací.
To nic nedělá pravdu nyní, ale dostanete tlačítko.
Můžete mít divy, nebo děliče, k rozbít svou stránku do různých skupin.
>> Můžete mít body, Máte tlačítka.
Máte-li body, pak máte neuspořádané seznamy, ul,
a seznamy uvnitř toho, li.
Takže to jsou velmi základní stavebními kameny webové stránky.
A skutečně, do značné míry každý web vidíte
se bude postaven použití těchto stejných nástrojů.
Samozřejmě, že ne všechny vypadat tak zlé, protože jsme
jít do koření to trochu.
Tak ať je to nudný starý HTML a začátek transformovat to do krásného místa
že jsme právě viděli před pár minutami.
>> Takže pojďme začít velmi jednoduché.
Takže máme toto tlačítko zde.
V bootstrap, jak jsme viděli, můžeme mají pěkný, krásné, modré tlačítko.
A to dělá ne tím, že dělá vlastní CSS.
Neexistuje žádný vlastní CSS sem.
To provést přidáním třídy vašim prvky HTML.
Pokud jste se pokusili třídy, nebo hrefs, nebo kotvy, nebo type = "text" pro inputs--
HTML prvky mohou mít tyto atributy.
Mohou mít další informace které by vás mohly dát.
>> A tak, v tomto případě, třídy jsou atribut.
Takže byste napsat, tlačítko class = něco uvnitř řetězců.
A to atribut se říct, počítač, to není žádný, tlačítko starý.
Je to tlačítko, které je v Tato třída tlačítek.
A tak Bootstrap, pokud jej dát určitý styl na svém živlu,
to bude čerpat to určitým způsobem.
Tak jsem se napsat "btn btn-primární.
BTN být zkratka pro tlačítka.
Všimněte si, že teď můj Tlačítko ošklivý obrátil
do pěkné, krásné, modré tlačítko.
Vypadá to velmi pěkné, když jsme na něj.
>> A tak co se stane, je, že jsme mít BTN třídy a btn-třída primární
na našich prvek.
A Bootstrap půjde a říct, OK, já vědí, že jsou tyto dvě třídy.
Jakýkoliv prvek, který má tyto dva třídy by měly být vypracovány takhle.
Tak to je jádro, jak se připojit styly pro prvky v bootstrap.
Právě jste připojit třídy k nim a to bude vážit to, jak uzná za vhodné.
Tak tady je další příklad.
V vstup, můžeme přidat třída = "Formulář-control".
A já vám ukážu, kde si brzy Můžete zjistit, jaké třídy
jsou k dispozici z každého druhu prvku.
Ale třída, která jsme právě přidaná má příjemné, zaoblené rohy,
to má pěknou polstrování, má pěkný, modrá záře na to.
>> Můžeme také jít do tohoto formuláře.
A class = "form-inline", který bude Naše forma, jak byste si mohli představit, inline.
Tak vypadá to trochu víc jako to, co jsme měli předtím už.
Takže než jsme se jít na styl zbytku stránku, nějaké otázky o tom, co
dělal?
My prostě připojené třídy našim různých prvků.
A ti ukážu později, jak můžete zjistit, jaké jsou k dispozici třídy.
Připojený jsme třídy, které mají určité styly.
A to říká prohlížeč Jak layout stránku pomocí
Bootstrap za předpokladu, styly.
Případné dotazy z publika?
>> Dobrá tak daleko?
Bezva.
Mnoho problémů s Bootstrap je jen
věděl, co komponenty jsou k dispozici a jak je používat.
A to je všechno naučil se zkušenostmi a také
přes čtení dokumentace, které budeme mluvit o tom, brzy.
Takže máme DIV.
Je to jen nudná, stará věc.
Chceme zdůraznit to nějak.
Takže bootstrap, existuje Mnoho dostupných komponent.
A je to getbootstrap.com.
Je to velmi užitečný odkaz.
Obsahuje věci jako-- Zde je návod, jak udělat tlačítko.
A vy můžete udělat Nav bary, můžete etikety, můžete postupovat bary,
můžete udělat seznam skupin.
V podstatě je to všechny druhy z vás může zobrazit webovou stránku.
>> Tady je ten, který se budeme snažit právě teď.
Říká se tomu panel.
Pokud jste někdy používat Google Nyní mají karty.
Nebo jakýkoli Android zařízení má karty.
Mají malé bílé krabičky že mají věci uvnitř ní.
A tak budeme se snažit a dělat že sami se zde pomocí věc
volal panel.
Takže pokud přikládáme class = "panel panel-default "k našemu vnějšímu div,
pak přikládáme třídu div = - pojďme stačí si přečíst tuto dokumentaci.
div class = "panel-nadpis" a pak div class = "panely tělo".
Opět platí, že se nemusíte starat o pamatovat tento kód.
To bude k dispozici on-line.
>> Tak jsme to udělali a teď náš nudný, starý div se obrátil do tohoto krásného, malé karty.
Má pěkné polstrování, to má hranice, vyniká
od zbytku části stránky což je docela v pohodě.
Tak pojďme dovnitř a změnit Get Tlačítko směry vypadat hezky.
Kdo v publiku chce sdělit mi, co se dá dělat na tlačítko
aby to vypadalo hezky pomocí Bootstrap?
Ano?
>> Diváků: Mohli bychom přidat třídu.
A my jsme mohli udělat class = "btn btn-primární".
NEEL MEHTA: Ano.
Je tu spoustu dalších Barvy k dispozici pro buttons--
nebo na cokoliv, když na to přijde.
Můžeme si dělat, btn-nebezpečí a aby bylo červené.
Tam jedeme.
Můžeme si dělat, btn-úspěch, aby se to zelená.
Můžeme si dělat, btn-info-- je tu parta věcí, které jsou vám k dispozici.
Takže mám malou výzvou pro vás nyní.
Takže je tu ještě jedna věc, že jsem opustil un-stylu.
Tento top restaurace.
>> A chceme použít věc volal skupinu seznamu ji ve stylu.
Takže moje výzva pro vás je jít na getbootstrap.com--
Budu vytáhněte ji sem.
getboostrap.com.
Přejděte na getbootstrap.com, najít sekce, kde jdou *** seznam skupin.
A uvidíte zde tedy příklad a správné třídy
které můžete použít, aby se vaše Seznamy do těchto krásných seznam skupin.
Ty jsou zpracovány příklady příkladů kódu, co
Kód použijete, co HTML kód který používáte, a co to výstupy.
>> Takže moje výzva k vás-- pokračovat getbootstrap.com,
ať už jste tady, nebo doma, a pokusit se přidat styly na tuto UL
aby to vypadalo hezky.
A používat styl v seznamu skupiny.
Chcete-li trvat pár minut, a hledat v dokumentaci,
Zkuste tento sami?
Vzhledem k tomu, jak děláte vývoj webových aplikací, si uvědomíte, spoustu své práce
se bude číst tato dokumentace.
Takže si myslím, že je dobré se seznámit se s tím, jak číst dokumentaci,
jak přijít na to, co je kde, jaký kód příkladů, které můžete použít,
co můžete využít.
>> Takže znovu, getbootstrap.com, přejděte na kartu Součásti
a pak přejděte do seznamu skupiny.
A uvidíte příklady kódu, které můžete použít, aby vaše HTML fit to.
Takže trvat několik minut a vyzkoušet a prozkoumat sami,
ať už jste tady, nebo doma.
Pokud jste doma, video pozastavit, Možná, a zkuste si to sami.
Pokud jste tady, když jdete do naší website-- pokud aktualizovat stránku,
uvidíte to tam.
Tento velmi stejný kód je prostě přidávat nové styly právě tam.
Takže trvat několik minut.
Dejte mi vědět, kdy se cítíte dobře o tom, nebo když jste úplně ztracený.
Zní to dobře?
Bezva.
Quick stranou pro ty z vás, doma, zatímco čekáme,
pokud jdete k serveru GitHub že jsem dal až před pár skluzavky,
směrem k začátku videa, Mám GitHub repo, úložiště,
Pro ty řeči.
Všechny tyto příklady kódu, že budeme mluví o jsou uloženy přímo zde.
Takže pokud jdete zpochybnit-1.html, toto je o kód, který jsme právě teď
na našich CodePen.
Takže si můžete prostě jít dopředu, a kopírování to, a vložte jej do své vlastní CodePen.
A to způsobem můžete držet krok s tím, co tady děláme.
Takže mají tuto stránku otevřenou stejně dobře jako my projít zbytek semináře.
Opět platí, že chcete, aby to vypadalo jako to, co jste viz dole ve spodní části obrazovky
tam.
Cí*** se dobře?
Pevný.
Počkejme pro všechny ostatní, aby skončit s tím, co dělají.
>> Ano?
>> Diváků: Předpokládejme, že jsem chtěl použít Bootstrap na home--
NEEL MEHTA: Ano.
Publikum: Vidím, na webových stránkách, Začínáme stránku.
Dávají mi možnosti Bootstrap, zdrojový kód, nebo Sass.
Který z nich to chci?
>> NEEL MEHTA: Ano.
Takže otázka je, jak si získat začali používat Bootstrap sami?
Prostě se to stane, aby magicky pracovat tady.
Takže když máme čas konec semináře,
Já vám ukážu, jak můžete si jej na své vlastní webové stránky.
Stejně jako tady, jsem vlastně vložit některá nastavení, která
budou mít automaticky jej naložený, ale budu
ukázat, abys to udělal z poškrábání na vašich vlastních webových stránkách.
>> Diváků: Děkuji.
>> NEEL MEHTA: Ano.
Dobrá otázka.
Cí*** se dobře?
Cí*** se dobře?
Bezva.
Takže, kdo mě chce, jak vyrobený říct ta věc vypadat hezky a Boostrappy?
Jaký je první třídy jsme se přidat do UL?
Diváků: class = "list-group".
NEEL MEHTA: Ano. list-group.
A pak to, co dáváme LIS?
Někdo jiný?
Publikum: A pak, po že class = "list-group-item".
>> NEEL MEHTA: Ano.
>> Diváků: A je to stejné pro další.
>> NEEL MEHTA: Li class = "list-group-item".
Tady máš.
Máme krásný seznamu skupin, stejně jako jsme očekávali.
Takže tam jdete.
Za 10 minut jsme učinili to nuda, starý Yalp! strana
vypadat hezky a profesionální.
A to je jen začátek.
Takže teď, že máte pocit, dobře o tom, pojďme
prostě jít dopředu a mluvit o tom, Pár více složek, které
by mohlo přijít vhod jako vy jít v celém svém dobrodružství.
>> Samozřejmě, je tu spousta z nich zde.
A teď, že jste se dozvěděl, jak to udělat seznam skupin,
můžete do značné míry naučit si, jak to udělat některý z nich.
Ale, samozřejmě, ať to prostě zkusit a udělat pár více sami,
Jen tak budete mít pocit, pro jak je můžete použít.
Já jsem prostě jít na tento příklad zde.
Opět platí, že kód, který jsem právě vložili zde je k dispozici přímo zde.
Tak neváhejte a vytáhněte ji nahoru.
>> Takže jsme již prošli několik těchto příkladů.
Takže máme tlačítka, které jsme již viděli, jak to udělat.
Můžeme tlačítka větší.
Tlačítkem class-- to jde, BTN BTN-lg a btn-default dělá to bílé.
Tak to je náš tlačítko větší než by jinak mohl být.
To by mohlo přijít vhod, pokud máte velké tlačítko nebo tak něco odeslat.
Viděli jsme příklad seznamu skupin, jsme viděli příklad formuláře.
>> Velmi důležitá je ikony.
A ikony jsou způsob, jak přidat zajímavé věci, jako zaškrtněte
značky, nebo plusy, nebo přítel ikony nebo restartujte ikony,
nebo cokoliv, aby vaše webové aplikace.
Takže znovu, když jsme na tu, součástí, glyphicons,
jsou ikony k dispozici pro bootstrap.
K dispozici je vyčerpávající Seznam všech těch zde.
Tak jen jako příklad, Zkusme a přidat jeden.
>> Tak, jako jsou Facebook, my jsme se snažili mít tlačítko Přidat přítele.
Pojďme si nejprve přidat nějaký styl.
Tlačítko class = "btn btn-úspěchu".
A tam jdeme.
Pojďme přidat ikonu sem.
Co ikona, myslíš, by mohlo mít smysl, aby tu?
Vy jste pravděpodobně viděli na Některé webové stránky nebo cokoliv,
ale to, co je příklad ikonu, která může jít i uvnitř tohoto tlačítka?
Neváhejte procházet tento názor, pokud budete potřebovat inspiraci.
Je tu spousta užitečných ty, k dispozici zde.
Ano?
>> Diváků: Možná glyphicon uživatel, kdo?
NEEL MEHTA: OK.
Toto.
To je docela dobrý.
Ano.
Na Facebook, myslím, že to bude vypadat trochu jako to.
Takže tady je návod, jak jsme se jít o Přidání ikon do našich stránkách.
Jen Máme span-- dlani je neutrální kontejner pro něco.
Div je kontejner pro něco, dlani je další kontejner.
tagy Div se konce řádků kolem nich, rozpětí ne.
Takže tam různé způsoby mající obecný kontejnery.
Stejně jako to nemá smysl, aby to uvnitř odstavce nebo tak něco.
Musíme dát Uvnitř něco ačkoli,
tak jsme jen dát uvnitř rozpětí.
Takže span class = glyphicon glyphicon-user "blízko rozpětí.
A máme nyní ikony uvnitř tlačítka.
>> Takže to nevypadá úplně na rozdíl od to, co můžete vidět na facebook.com.
A tak to je hezké, že tyto mohou ve skutečnosti být umístěny kdekoli budete chtít.
Ve svých záhlaví barech, ve vašem seznamu skupin.
Cokoliv.
Nemusí to být uvnitř tlačítka.
Tak jako příklad, mohu dal stejnou třídu zde.
"glyphicon glyphicon-user".
A zdá se, stejně tak.
Tak to icons-- můžete použít rozpětí class = "glyphicon glyphicon-cokoli".
A to vám umožní přidat Ikony kamkoli budete chtít.
A Ikony jsou velmi důležitou Součástí dělat webové stránky vypadat
profesionální a dobře udělal.
Takže nepřehánějte to, ale je to často dobré vědět.
>> Panely, znovu.
Já si jen to opět jako rekapitulaci protože jsou trochu zapojeni.
Všimněte si, že v otáčet normálního HTML
site do bootstrap-afied místo, budete mít
přidat další strukturu na internetových stránkách.
Například, máme navíc divs tady jen proto, že ti,
Je zapotřebí, aby se panel.
Takže jen mějte na paměti, že budete muset mít navíc strukturu.
Takže "panel panel-default".
Možná je to panel-header.
Myslím, že je panel-záhlaví.
Ano.
Tam jedeme.
Takže, opět, je naše panel.
>> Ještě jedna věc, že jsme nepokrývala ještě, stoly.
Tabulky, od výchozí vzhled druhu ošklivé.
Takhle.
Ale tabulky jsou, samozřejmě, velmi důležitá část
o tom, co budete dělat ve vývoji webu.
V Pset7, například, CS50 Finance, která vyjde brzy,
budete používat velké množství tabulek.
A spousta webové dev používají hodně tabulek k zobrazení informací,
jako akcie, nebo skóre, nebo cokoliv jiného.
>> Takže styling tabulky je vlastně velmi snadné.
Můžete přidat třídu tabulky na váš stůl.
A troufám si říci, vypadá to docela pěkné.
Můžete dělat další věci, jako "stůl table-proužkovaný".
A uvidíte výsledky zde.
Můžete to udělat tabulky ohraničený.
Je tu spousta možností, které můžete.
Ale v podstatě, přidání stůl, třída stůl,
bude vaše stoly vypadat docela pěkné.
Tak to je v krátkosti představit náměty některé z důležitých styly
a komponenty budete je třeba použít pro bootstrap.
Takže si myslím, že zábaly up naší krásné části.
Jakékoliv dotazy právě teď o tom, jak aby vaše webové stránky krásná?
Jak můžete použít tyto komponenty ve svůj prospěch?
Cí*** se dobře?
Ano?
Publikum: Možná to je hloupá otázka,
ale můžete použít Bootstrap na Wikipedii?
Pokud upravujete stránky Wikipedia?
NEEL MEHTA: Ano.
Takže otázka byla, že jsem editace stránky Wikipedia,
mohu zahrnout bootstrap styly tam?
>> Diváků: Ano.
>> NEEL MEHTA: A tak je Bootstrap v podstatě velký CSS stylů.
CSS stylů jen říká, kdykoli Mám tuto třídu, přiložte tyto styly.
Takže v CSS stylů pro bootstrap bude něco jako .btn,
třída tlačítko, dostane jako když zaoblený roh hranice nebo cokoliv jiného.
Takže v podstatě, bootstrapu to jen banda tříd a spoustu stylů
určený pro tyto třídy.
Tak dlouho, jak budete mít tento CSS, Tento seznam pravidel ve své stránky,
dostanete bootstrap styl.
To je, samozřejmě, záviset na s styly bootstrap ve vaší stránce
začít s.
>> A tak ve Wikipedii, pravděpodobně nemohl
udělat, protože Wikipedie nemá Bootstrap v něm.
Ale kdyby to přece mělo Bootstrap, by pravděpodobně mohlo udělat.
A pokud byste chtěli, mohl byste zahrnují, ale které by mohly
rozbít stávající rozvržení stránky.
Ale velmi dobrá otázka.
Můžete použít Bootstrap všude tam, kde je v ceně,
ale to není postaven v roce ve výchozím nastavení.
>> Diváků: Děkuji.
>> NEEL MEHTA: Ano.
Nějaké další otázky?
Ano.
Takže ať už jste tady, nebo doma, stačí vzpomenout znovu getboostrap.com--,
getboostrap.com-- je váš přítel.
Vždy, když používáte Bootstrap, bude vám
instrukce o tom, jak se dostat začal, jak používat komponenty.
Tam je nějaké chladné JavaScript plug-inů, které nebudeme jít sem,
ale jsou to stojí mimo kontrolu stejně.
Takže tohle je váš přítel.
Je to jen důležité, aby si použit k tomu, jak používat.
>> Takže pojďme popovídat trochu o Díky citlivé webové stránky.
Tak jak jsem již řekl, lidé používali jejich notebooky, které používají jejich telefony.
A jak si možná dobře představit, je to velmi odlišný velikost obrazovky, než to.
A tak stejné webové stránky že vypadá dobře na můj telefon
se nebude vypadat dobře, nutně, na počítači.
Takže to, co musíte udělat, je aby vaše webové stránky přizpůsobit.
To se musí přizpůsobit různé velikostí obrazovky, že je to na.
>> To má říkat, vím, že Jsem na počítač, velký notebook, měl bych rozšířit.
Vím, že jsem na telefonu, měl bych zmenšit.
A tak Bootstrap poskytuje některé Velmi, velmi užitečné nástroje, aby to.
Tak Bootstrap Pojďme si přestávku webové stránky do 12 sloupců.
Můžete si vytvořit řádky a mají 12 sloupců.
A můžete rozdělit ty však budete chtít.
Můžete mít jednu velkou věc,, což je 12 sloupců široká.
Můžete mít dvě věci které jsou po šesti.
Můžete to udělat jednu věc, která je čtyři, ten, který je dva, nebo ten, který je šest.
Můžete to udělat tři, tři, tři, tři.
Můžete si dělat, co členění, které chcete.
>> Takže možná vaše webové stránky potřebuje mít levý sloupec je to jednu třetinu šířky.
Tak, že by byly čtyři sloupce široký a zbytek stránky
by bylo osm sloupců široký.
Tak to je příklad.
Pojďme vytáhnout jiný příklad.
>> Diváků: to dělá vždycky musí být ještě rozdělena?
Mohl by to být sedm, pět rozkol?
>> NEEL MEHTA: Ano.
Mohlo by to být sedm, pět.
Ano.
Tak dlouho, jak to přidá na 12, to je v pořádku.
Tak pojďme zpátky.
Opět platí, že kód, který je Zde je k dispozici také zde,
pod citlivé příkladu.
Tak jsem vytáhl nějaké Příkladem reagující kódu zde.
Takže jste to udělat pomocí věc zvaná řádek.
Řádek je jen další třída.
Je to další styl můžete přidat do vašeho divs, aby jim jejich vlastní komponenty.
>> Takže říkáte, div class = "řádku", aby se řádek,
dát si 12 sloupců prostoru.
A pak si dát sloupce uvnitř toho.
Takže tady máme col-xs-6.
Nedělejte si starosti xs.
Budeme mluvit o tom, v sec.
Ale v podstatě, máme jedno věc, která je šest široká.
Říkáme tomu odešel.
A tak to je levý box sem.
Máme jednu věc, která je šest z 12 sloupců široký.
A že jeden je na pravé straně.
>> no prostě dává značek Váš div naplňte ji šedou barvou.
Takže to je to, abychom mohli vidět, že jsou odlišné.
A tak se jedná o první příklad.
Je to velmi jednoduchý příklad, jak jste by se používat své řádky a sloupce zde.
Můžete definovat řadu pomocí class = "řádek".
A pak vy class = "col-XS-6" dělat polovina, "col-XS-6" udělat druhou polovinu.
Zde je složitější příklad.
Pojďme se podívat na Tiny, Obrovské, Zbytek člověk.
>> Můžeme Tiny dva sloupce široký, můžeme dělat obrovské šest sloupců široký,
A zbytek čtyři sloupce široký.
Který přidává do 12.
A tak tito skončí klenout šířka stránky.
Opět platí, že máme řádek venku.
Pak máme div class = "sbír-XS-2" a poté na 6, a pak se 4.
A to bude poskytovat struktura pro nás.
A tak můžeme dát cokoliv sakra chceme dovnitř sem.
Místo Tiny, můžeme dát tlačítko.
Tlačítko class = "btn btn-primární".
A tak si všimnout, že naše tlačítko nezabírá celou šířku,
ale alespoň je to omezeno k tomu mnoho prostoru.
>> Tak to je všechno dobře a dobře.
Takže nyní můžeme rozejít web strana na kousky, šířka moudrý.
Dá se říci, chceme mít doleva sloupec, a pravý sloupec, a tak dále.
Ale my jsme nešli přes jak si udělat to reagovat.
A tak Bootstrap pojďme to udělat stejně.
To má tyto věci zvané zarážky.
Tak to má způsob, jak zjistit, zda jste na notebooku, jste na tabletu,
jste na telefonu horizontále, nebo jste na telefonu vertikální.
To zná velikost obrazovky.
A rozbije to do čtyř kategorie-- velké nebo LG, který je notebooky, obvykle.
md nebo medium, která je tablety.
SM, malé.
Nebo xs, extra malé.
A tak, když zadáte sloupec, říkáte,
to by mělo být šest sloupců široký na extra malém přístroji.
To je důvod, proč jsme to udělali col-xs-6.
Jsme říká, že by měla být šest z 12 sloupců širokých
na extra malém přístroji.
A jestli je to něco větší, budeme prostě výchozí pomocí extra malé velikosti.
Pokud je to něco větší než Velmi malé, bude to šesti široká.
A tak můžeme využít tyto, aby se z našich sloupců
zabírají různé množství sloupce na základě velikosti obrazovky.
Pojďme se na tento citlivý změna velikosti.
Takže máme sloupce.
A říká: "col-LG-6 col-xs-12".
Takže vzhledem k tomu, co víte, tak daleko, co myslíš
myslíte, že se chystá stane na velkém plátně?
No, je to trochu vzhledem k tomu, cesta, ale to, co dělat
si myslíte, že to bude vypadat Líbí se mi na velké obrazovce?
A proč je to?
>> Diváků: Je možné, že na velké obrazovce, to je
bude trvat jen část plného prostoru?
Stejně jako polovinu, ale myslím, že?
>> NEEL MEHTA: Ano.
>> Diváků: A na menší obrazovky, bude to
převzít celou obrazovku, 12.
NEEL MEHTA: Ano.
Právo.
Tak jako příklad, pojďme stačí se podívat tady.
Ano.
Takže na cokoliv, co je LG nebo bigger-- takže můj počítač se stane,
být lg, protože je to pěkný wide-- to bude
to vedle sebe, protože to je col-lg-6.
Takže, protože je to na velké, to dělá to šest sloupců široká a šest sloupců široký.
Podívejme se, co se stane, když aby to do menšího jeden.
Já jsem prostě jít un-plném rozsahu tohoto.
A budu zmenšit na obrazovku.
Chystám se zmenšit obrazovku, tak to Vypadá jako já na menší zařízení.
Takže budu zmenšovat to takhle.
>> A ejhle.
To je nyní skládaný protože teď jsme šli
z velké to-- je to pravděpodobně navíc malá velikost obrazovky.
A tak se teď říká, OK, nejsme ve velkém, jsme v extra nizké zemi.
Takže budeme používat navíc malá velikost.
A jdeme XS-12, XS-12.
Takže to bude na sebe.
A všimněte si, že je tu věc zvaná zarážku.
Zarážku je místo, kde jsi dělal přechod
od extra malé až malé, malých až po velké, a tak dále.
>> Takže jen si všimněte, že, jak jsem to snímek out, nakonec dostanete do bodu,
kde budou skákat být vedle sebe.
Tady máš.
Takže tam zarážce právě tam.
Takže můžeme dělat to ještě složitější.
Nyní můžeme říci, tyto věci by měla být čtyři široká.
To znamená, že by trvat asi třetinu
řeči o velkých zařízeních.
Na střední zařízení by se měl vzít polovinu obrazovky, protože je MD-6.
Na velmi malém zařízení, to by mělo trvat až 12.
A tak to vypadá docela přirozené.
Prostě zkusit to pro sebe.
>> Takže na velké obrazovce, jsou to čtyř široký.
Zmenšit to trochu.
A oni jsou nyní šest široká.
Takže to je šest, šest, šest.
Smršťovací to ještě víc a pak budou zcela na sebe.
Takže to, například, má smysl, pokud máte karty, jako jsou novinky karet,
Například v případě, pokud je to na velmi velké obrazovce,
je to v pořádku, pokud máte několik vedle sebe protože by všichni dostali dostatek prostoru.
Ale oni potřebují mít dostatek prostoru.
A tak na menší obrazovky, byste chtěli, aby jim
více prostoru, proporcionálně, stránky.
>> Takže jako příklad reálného světa, řekněme, že máme Twitter.
A máme textové pole, takže můžete pípání na boku.
A máme seznam trendy Témata na pravé straně.
Takže na velké obrazovce, měli bychom nechat být vedle sebe,
takže je můžete vidět na sklo.
Ale v menším rozsahu, bychom měli udělat, 12 a 12,
tak, že témata Směřování jsou pod tweet oblasti.
Vzhledem k tomu, tweet oblast je Hlavní věc, a na malé obrazovce,
témata Trendy ne ohledu na to, docela jak hodně.
A tak jsme se dát je přímo pod, tak že oni mohou oba získat dostatek prostoru.
Udělat tak daleko smysl?
>> Diváků: Ano.
>> NEEL MEHTA: Solid.
Tak to je všechny příklady mám tady.
Zkusme udělat výzvu.
Takže znovu, to je výzva-2.html pro ti z vás, následujícího po doma.
Takže můj kamarád, Mark Zuckerberg, za mnou přišel druhý den.
A on to jako Neel, mám dostal docela dobré na web design.
Mohu dělat HTML.
Udělal jsem to málo, nový upravit na Facebook.
Mám novou představu o tom, jak měli bychom styl Facebook.
A je to tady.
Právě tady.
Zde je několik příklad kódu.
Tak se jmenuje Fancybook.
>> Máme nějaké aktualizace stavu.
Máme Nemo, Mike Kosowski, ***-- tři stav aktualizace.
A pak máme seznam Online přátelé přímo pod ním.
Tak udělal svůj domácí úkol.
On ví trochu o Bootstrap, on dělal zobrazení seznamu,
udělal trochu HTML.
Takže on má webovou stránku.
Ale on to jako Neel, vůbec se mi nelíbí porozumět citlivé designu vůbec.
Máte nějaké odborníky, kteří mi mohl pomoci s tím?
A naštěstí, jste nyní odborníci v citlivé designu.
>> Takže to, co mi řekl, bylo, že chce Fancybook vypadat takhle.
Na velmi malém zařízení, jako telefon, vše
by mělo být zaplněný, stejně jako tady.
Takže máte časovou osu předem, a to až nahoře, a poté
měli byste mít chatu bar v dolní části.
Ale na tablety nebo médiu zařízení, by mělo být půl na půl,
jak je v časové ose musí být půl na seznam Chat Přátelé
by mělo být na druhé polovině.
>> Pak se na notebooku, časová osa by měla trvat až tři čtvrtiny
a pak chat zajištění by měl zabírají další čtvrtinu.
A tak se to jako Neel, to mám Kód tady, ale to není citlivý.
Je třeba, aby takhle chovat.
Takže moje výzva pro vás je uveden tento kód here--
pokud osvěžení CodePens, uvidíte to.
Nebo pokud stačí vložit do kódu Na výzvu-2, uvidíte to.
>> Tady to je příklad kódu.
Uvidíte xxxS.
Chci, abyste změnit xxxS, tak, aby časová osa a seznam přátel
Následuje tyto specifikace zde.
Nebojte se o tom, co je uvnitř časové osy pro teď.
Dostaneme, že v dalším kroku.
Ale teď, uvidíme, jestli se dostaneme tyto věci rozdělit to takhle.
Takže to smysl?
Takže pokud jste doma, video pozastavit a zkuste
aby vaše webové stránky vypadat reagovat takhle.
Pokud jste tady, vzít stejně jako dvě, tři minuty.
Neváhejte a chatovat se sousedem, a pokusit, a opravit pan Zuckerberg je
reagující designu problém.
Pokud máte nějaké dotazy, neváhejte a dejte mi vědět.
Cí*** se dobře?
Hotovo?
Pěkný.
>> Diváků: [Neslyšitelné].
NEEL MEHTA: Co?
>> Diváků: Já jsem dobrý.
>> NEEL MEHTA: Oh, dobře.
Pěkný.
Diváků: Věc, o 12, je to, že Bootstrap
zachází daný prostor obrazovky as 12 jednotky doprava a potom rozděluje, že až?
Jak přesně dělá dimenzování práci na to?
>> NEEL MEHTA: Ano.
Otázkou tedy je, jak dělá dimenzování
pracovat pro bootstrap, že jo?
>> Diváků: Ano.
NEEL MEHTA: Takže kdykoliv Máte div class = "řádku",
bez ohledu na to, jak velký je obrazovka, Bootstrap vám dá 12 jednotek
o stejné velikosti k zabírají tolik velikost.
Takže v sedle 1, je to vždy 8,33% velikosti obrazovky,
zda je, že je to široká nebo že je to široká.
A tak, samozřejmě, na menší obrazovky, každý sloupec je menší.
Stále máte 12 sloupců široký, je to menší.
Takže je to jen na vás, aby se ujistil, že věci zabírají více sloupci,
úměrně, kompenzovat pro tento nedostatek prostoru.
Dává to smysl?
>> Diváků: Ano.
Děkuji.
NEEL MEHTA: Dobrá otázka.
Diváků: Na velké obrazovky, můžete mít
časová osa trvat až tři čtvrtiny?
>> NEEL MEHTA: Ano.
NEEL MEHTA: Jak se kluci cítí?
Dobrý?
Bezva.
Takže pojďme se vrá***.
A pojďme vyzkoušet a opravit tuto část webové stránky pana Zuckerberg se.
Takže lhůty je tady, u horní, a seznam přátel
je v dolní části.
A tak jen musíme přiřadit sloupy, s dimenzování proporcionální,
v každém z nich.
Takže tento první *** je na časové ose.
Co třídy máme dát sem?
Co jste kluci dát sem?
Takže pamatujte, že na velké obrazovce, je třeba převzít tři čtvrtiny šířky.
A tak to, jaký styl by vám to?
Na velké obrazovce, tři čtvrtiny šířky.
Co třída se tam používat?
Diváků: Takže jsme jen bude editaci, že první instanci třídy.
NEEL MEHTA: Pro teď.
Ano.
>> Diváků: Nejsme editaci každý, individuální rys časové osy?
NEEL MEHTA: Teď ne, přinejmenším.
Takže celá ta věc je blok.
Jsme jen změnou projektování bloku.
Takže tady my sl-LG-9, protože je to devět z 12 široká na velké obrazovce.
A pak na střední obrazovce, kolik sloupců bych měl dostat?
Diváků: Má to být půl na půl.
NEEL MEHTA: Správně.
Tak kolik to je?
>> Diváků: Tak šest.
NEEL MEHTA: Six.
A pak navíc malý měli, pokud to be-- zabírá celou šířku řádku,
kolik by to mělo být?
Diváků: 12.
NEEL MEHTA: 12.
Ano.
A teď musíme změnit ty ostatní,
takže zabírá zbytek prostoru.
Takže col-lg--
Diváků: Bude to zabírají celou obrazovku?
NEEL MEHTA: Zabírá čtvrt obrazovky na velkém zařízení,
jak jsme tady ukázal.
>> Hlediště: Tři.
>> NEEL MEHTA: Tři.
A pak col-MD-6, aby se up zbytek prostoru.
col-XS-12.
Takže teď máme časovou osu nástupu do tři čtvrtiny
stránky v velké obrazovce a pak ctvrtin na boku.
A pak, pokud velikost obrazovky dolů, to by mělo odpovídajícím způsobem změnit velikost.
Takže to zaplněný teď, na velmi malém rozsahu.
A pokud bychom dimenzovat to trochu, měly by být přesně půl na půl.
Takže jsme udělali, že tak daleko.
Skvělý.
A tak nebudeme dělat další část problému.
Můžete to udělat sami.
Ale v podstatě, musíte pokusit se a učinit tyto citlivý
as well-- udělat časovou osu položky, samy o sobě, citlivé.
Takže teď jsme prošli vše, co potřebujete vědět
o citlivé straně Bootstrap.
Máte otázky k citlivý design s bootstrap
a jak můžete jít o tom, že?
Ano?
>> Diváků: Je to podobné jako v případě, jsme měli vložené video
a my jsme chtěli kontrolovat měřítko, při kterém se video was--
velikost videa jít od přenosného počítače do telefonu.
NEEL MEHTA: Ano.
Víceméně.
Musel byste říct video na zabírají tolik prostor, jak je to s ohledem,
což je trochu nepříjemné občas.
Avšak základní myšlenka je stejná.
Video, jako každý jiný objekt v stránky, jako tlačítka nebo cokoliv,
jak dlouho, jak budete používat sloupce a řádky,
můžete dát to určité množství prostoru.
A tak jak se to ke cti, že je Jinou otázkou protože stejně jako YouTube
vloží mít určitou, preferovanou velikost.
Ale teoreticky aspoň by to fungovat.
Bezva?
>> Diváků: Myslím, že poté, pro obraz, se vlastně
musí mít různé verze stejný obrázek v různých velikostech
pro notebook proti iPhone?
Jo Otázkou je, potřebujeme mají obrázky, které jsou citlivé i.
A skutečně, můžete to udělat.
Myslím, že je v CSS.
Ale Bootstrap umožňuje vás k tomu, že stejně.
Můžete mít citlivé obrázky.
Můžete mít vaše obrázky velikost v závislosti na velikosti stránky.
A je tu velmi nová věc HTML5, nejnovější verze HTML,
a CSS3, nejnovější verze CSS, který
vám umožní požádat o různých obrazů v závislosti na velikosti obrazovky, kterou jste na.
Obvykle je to dost dobré jen mají na disk jen zmenšit nebo růst na
ale velká, že potřebuje být.
Ale můžete, pokud chcete, k, mít jeden 32 o 32
pro velmi malé obrazovky, a 64 o 64 na velké obrazovce,
a pak slouží těm selektivně.
Můžeš to udělat.
Je to hotovo některými lidmi.
Je to ještě docela ostří.
Ale krátká odpověď, citlivý images-- Bootstrap může den tam uložit.
Bezva?
>> Diváků: Děkuji.
>> NEEL MEHTA: Takže pojďme mluví opravdu rychle o tom, jak
aby si to ve své vlastní webové stránky.
Řekněme, že chcete, aby vaše vlastní webové stránky pomocí Bootstrap.
A tak to prostě jen ať projít přes to společně.
Řekněme, že stránky jak právě normální HTML stránky.
Neváhejte a sledovat spolu v bez ohledu na váš oblíbený editor.
Takže jsme prostě nějakou HTML stránku.
Můžeme to udělat! DOCTYPE html.
To je také html, naše strana.
Nic nového.
Udělali jsme to předtím.
Takže tady máme HTML a můžeme dát věci dovnitř zde.
Můžeme mít naše tlačítko.
A jak už jsem řekl dříve, tento není nutně bude fungovat.
Proč by to mohlo fungovat?
Proč ne dostat naše pěkné, barevné tlačítko?
>> Diváků: Protože jsme neměli propojit k projektu Bootstrap nebo soubor?
NEEL MEHTA: Ano.
Opravit.
Vzhledem k tomu, že je to Bootstrap-- jen fantazie CSS soubor.
Je to řada stylů, které jsou připojena k prvkům.
Zde jsme řekli to, že my chtít používat tyto styly.
Budu velikost, že až trochu.
Řekli jsme to chceme použít tyto styly, ale nikdy jsme
Řekl to, jaké styly jsou.
A to je to, co vaše Otázka od dříve byl.
To je odpověď na tuto otázku.
Musíme najít způsob, jak dostat styly a zahrnout je do naší stránce nějak.
A tak bude Bootstrap ukazují nám, jak to udělat.
>> Takže pokud jdete na vrchol tady, Začínáme.
Je tu různé způsoby, jak jej stáhnout.
To by nedávalo smysl nutně.
Bootstrap-- to umožní urvat samotného souboru CSS.
A vy jste to zahrnuty ve své vlastní stránky.
Zdrojový kód je, pokud chcete, zaseknout na to sami.
Nepotřebujete to opravdu.
Sass je jazyk , který překládá do CSS.
Ber to jako preprocesoru.
Stejně jako PHP je preprocesor na HTML, Sass je preprocesor pro CSS.
Takže pokud chcete, aby to tímto způsobem, můžete to udělat.
>> Nejjednodušší způsob, jak se pomocí CDN, nebo content delivery network.
Je to webová stránka, která právě servíruje kopii bootstrap
velmi rychle pro vás zahrnout do své vlastní stránky.
Takže tady je příklad.
To vám dám tento odkaz prvek.
Odkaz element říká váš prohlížeč, přijmou veškerá soubory jsou uloženy zde
a zahrnout jej do naší webové stránce.
A v tomto případě, je to CSS soubor Bootstrap.
Tak jsme si jen zkopírovat tuto adresu URL, nebo že text, a my jej hodit dovnitř
naší hlavy.
>> A já se nespustí stránku pro toto, ale můžete věřit, že to funguje.
Odkaz se dostanete CSS.
Zahrňte jej do svého Stránka a pak budete
mohli používat všechny bootstrap třídy, které znáte a lásku.
Pokud chcete, aby ji udrželi na místě a mít na vašem vlastním systému souborů
místo toho, aby musel jít na internet chytit to,
jako když chcete použijte webu v režimu offline,
můžete použít možnost Stáhnout.
Ale z větší části, za použití CDN je velmi rychlý, protože tímto způsobem,
to je průběžně aktualizována i pro vás.
Musíte aktualizovat ručně buď.
Dávat smysl?
>> Takže mnoho nástrojů, bude mít toto postaveny ve výchozím nastavení. Ve vašem Pset7 a Pset8,
Věřím, že je Bootstrap automaticky hotelu.
A v CodePen, pro příklad, je to již
zahrnuty proto, že jsem přidán dodat, že nastavení.
Takže pokud jste někdy chtěli pohrát s ním si můžete prostě jít na CodePen,
nebo jít na vaše ID, nebo cokoliv jiného.
A vy jste měli být schopni Přístup Bootstrap tam,
ale to není vždy postavena ve výchozím nastavení, na web.
Dávat smysl?
>> Ano.
stejně jako recap-- máme stejně jako pět minut zbývá.
Ale jako rekapitulaci, v nových webových stránkách, můžete zahrnout Bootstrap takhle.
A až budete mít to v ceně, můžete dělat všechny zábavné věci zde.
Můžete jít dál, a můžete jen prohlédnout CSS, můžete přidat nějaké cool styly,
můžete mít komponenty stejně jako tlačítka,
a stoly, a seznam položky, které jsme zmínili.
Je tu několik skvělých pluginy JavaScript, které budete chtít prozkoumat.
Oni přidat nějaké cool interaktivita na webovou stránku.
Stejně jako tento je modální dialog.
>> Takže tam je nějaké zábavné věci můžete dělat s bootstrap.
Takže moje rada pro vás je jít dopředu a používat jej ve svých vlastních projektech,
postupujte podle pokynů jsme udělal, jak jej získat,
a jen číst bootstrap následujících důvodů budete se dozvědět více o tom, co dělat.
A tak jsme se pryč ***, dnes, jak používat
dokumentace, co budova bloky jsou, a jak to je koncepčně.
Takže teď můj výzvou pro vás je vytvořit webové stránky pomocí Bootstrap.
Jděte do docs.
A používat nástroje, které jsme naučili tak daleko, aby se pokusila analyzovat jejich
a porozumět jim.
A používat tyto styly a nástroje vidíte, že na své webové stránky.
A to je jen velký, Experimentální postup.
>> Vyzkoušejte určitý styl.
Funguje to?
Má není?
Pokuste věci dohromady.
Podívejte se, co se stane.
Je to velmi self průvodcem, objev proces.
Ale dnes, jsme se naučil samotné základy toho, co je Bootstrap?
Proč to funguje?
Jak to funguje?
Jak můžeme začít používat to, v první řadě?
A tak teď, že jste přes ten hrb, vy
by měl být schopen to udělat docela hladce sami.
>> Takže ještě jednou, a to tím kód jsme udělali, je tady.
Takže pokud jste někdy chtěli aby si oprášit,
stejně jako to, co je rychlý cheat list pro všechny styly?
Můžete jít do tohoto vzorku zde.
Máme tady nějaký příklad styly.
Pokud si chcete zkusit výzvy znovu od sebe,
je můžete vyzkoušet zde a podívejte se na řešení.
Takže odkaz bude zahrnuty na snímcích, které
bude zaslán na vás samozřejmě.
Ale je to také tady.
Můžete-li video pozastavit, pokud chcete.
Všechny informace, které potřebujete, je Bude tady, na této stránce.
Takže pokud někdo má nějaké otázky, můžeme vezměte je na dalších pár minut.
Jinak děkuji vám všem moc za sledování.